uniapp安卓原⽣组件开发
ask.dcloud/article/35416
项⽬需要基于uniapp 开发原⽣组件。
⼀、简介
本⽂档介绍如何在uni-app中基于weexsdk 开发Android原⽣插件。
更多说明请参考。
⼆、开发者须知
在您阅读此⽂档时,我们假定您已经具备了相应Android应⽤开发经验,使⽤Android Studio开发过Android原⽣。学习过 weex 知识并能够理解相关概念。您也应该对HTML,JavaScript,CSS等有⼀定的了解, 并且熟悉在JavaScript和JAVA环境下的JSON格式数据操作等。
三、前期准备
安装 version>=1.7 并配置了环境变量
安装Android SDK 并配置环境变量。
安装Android Studio 尽量使⽤最新版本!下载地址: OR
5+SDK下载:
学习weex 0.26.0版本框架API。
四、插件开发
导⼊UniPlugin-Hello-AS⼯程
UniPlugin-Hello-AS⼯程请在中查
点击Android Studio菜单选项File--->New--->Import Project。
导⼊选择UniPlugin-Hello-AS⼯程,点击OK! 等待⼯程导⼊完毕。
如果出现Android SDK路径不对问题,请在Android Studio中⿏标右键UniPlugin-Hello-AS选择Open Module Settings, 在SDK Location 中设置相关环境路径
注意!⼯程gradle配置的gradle-4.6-all版本!使⽤的是新版本的依赖⽅式,如果您使⽤的是⽼版本的gradle。可根据以下链接进⾏修改依赖⽅式。
创建uni-app插件Module
点击Android Studio 菜单项 File--->New--->New Module。
选择Android Library, 点击Next.填写与插件相关信息点击finish。
编辑module的adle⽂件。添加依赖库
Android Studio默认会在dependencies节点下添加⼀些基本依赖库,如下图红框内的引⽤注释掉或改为compileOnly依赖⽅式
此处需要注意libs⽂件夹下的jar⽂件已改为compileOnly⽅式引⽤了。当你离线⼯程调试时需要把插件中⽤到的jar⽂件在app⼯程的adle中配置相应的jar⽂件implementation引⼊。⼀定要注意否则导致应⽤闪退等问题。⾄于插件中⽤到的jar⽂件在打插件包时⽂件到底放在什么位置请留意插件打包⽂档。
加⼊以下引⽤(出现底⾊标红表⽰当前引⽤版本与compileSdkVersion版本不同,忽略即可)
compileOnly "com.android.support:recyclerview-v7:26.1.0"
compileOnly "com.android.support:support-v4:26.1.0"
compileOnly "com.android.support:appcompat-v7:26.1.0"
dependencies节点添加依赖库时需使⽤compileOnly依赖⽅式!防⽌打包时与其他插件资源库冲突导致打包失败!!
导⼊uniapp-release.aar
repositories {
flatDir {
dirs 'libs'
}
}
dependencies节点⾥添加 :
(注意:此添dir需根据具体⼯程⽬录配置,当前写法仅适⽤于UniPlugin-Hello-AS⼯程)
compileOnly fileTree(dir: '../app/libs', include: ['uniapp-release.aar'])
完成以上操作表⽰当前的Module已经具备了开发uni-app插件的能⼒了。
编写uni-app插件
学习Weex扩展 Android 知识。⽬前集成了Weex 0.26.0版本如果你之前开发的是⽼版本代码需要作升级代码操作。
特别注意uni-app插件⽬前仅⽀持Module扩展和Component扩展,暂时不⽀持Adapter扩展
编写插件
插件封装了⼀个 RichAlertWXModule, 富⽂本alert弹窗Module。
代码可参考UniPlugin-Hello-AS⼯程中的uniplugin_richalert模块。(UniPlugin-Hello-AS⼯程请在中查)
HBuilderX 项⽬中使⽤RichAlert⽰例:
// require插件名称
const dcRichAlert = quireNativePlugin('DCloud-RichAlert');
// 使⽤插件
dcRichAlert.show({
position: 'bottom',
title: "提⽰信息",
titleColor: '#FF0000',
content: "<a href='uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是⼀个使⽤ Vue.js 开发跨平台应⽤的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
contentAlign: 'left',
checkBox: {
title: '不再提⽰',
isSelected: true
},
buttons: [{
title: '取消'
},
{
title: '否'
},
{
title: '确认',
titleColor: '#3F51B5'
}
]
}, result => {
switch (pe) {
case 'button':
console.log("callback---button--" + result.index);
break;
case 'checkBox':
console.log("callback---checkBox--" + result.isSelected);
break;
case 'a':
console.log("callback---a--" + JSON.stringify(result));
break;
case 'backCancel':
console.log("callback---backCancel--");
break;
}
});
⽬前对weex⽀持的问题
Activity的获取⽅式。通过Context()强转Activity。建议先instanceof Activity判断⼀下再强转
.vue暂时只能使⽤module形式。component还不⽀持在.vue下使⽤
.vue下暂时不⽀持调⽤JS同步⽅法,.nvue可以使⽤。component的使⽤可参考weex写法**
component、module的⽣命周回调,暂时只⽀持onActivityDestroy 、onActivityResume 、onActivityPause、onActivityResult其他后续⽀持。请留意
更新!
第三⽅依赖库
均要使⽤compileOnly依赖⽅式,打包时需要配置或挪动⽂件到相关⽂件夹中。打包插件介绍时会有相关的具体描述!
请参考, 编写⾃⼰插件时需要查看是否与编译的程序依赖有冲突,防⽌审核失败或编译失败等问题。
对有些插件需要引⽤到.so⽂件,需要特殊配置⼀下.请参考
代码中⽤到的JSONObject、JSONArray 要使⽤com.alibaba.fastjson.JSONArray;com.alibaba.fastjson.JSONObject; 不要使⽤
org.json.JSONObject;org.json.JSONArray 否则造成参数⽆法正常传递使⽤等问题。
插件编写命名规范
源代码的package中⼀定要作者标识防⽌与其他插件冲突导致插件审核失败,⽆法上传。
如⽰例中插件类的“package uni.dcloud.io.uniplugin_richalert;” “dcloud”就是作者标识!
Module扩展和Component扩展在引⽤中的name,需要前缀加⼊你⾃⼰的标识,防⽌与其他插件名称冲突。
如⽰例中的插件“DCloud-RichAlert”!“DCloud”就是标识!
五、本地调试测试插件并运⽤到uni-app中
本地注册插件
第⼀种⽅式
在UniPlugin-Hello-AS⼯程下 “app” Module根⽬录assets/dcloud_uniplugins.json⽂件。在moudles节点下添加你要注册的Module 或 Component 第⼆种⽅式
创建⼀个实体类并实现AppHookProxy接⼝,在onCreate函数中添加weex注册相关参数或填写插件需要在启动时初始化的逻辑。
在UniPlugin-Hello-AS⼯程下 “app” Module根⽬录assets/dcloud_uniplugins.json⽂件,在hooksClass节点添加你创建实现AppHookProxy接⼝的实体类完整名称填⼊其中即可 (有些需要初始化操作的需求可以在此处添加逻辑,⽆特殊操作仅使⽤第⼀种⽅式注册即可⽆需集成AppHookProxy接⼝)具体写法如图:
以上两种⽅式选⼀即可
dcloud_uniplugins.json说明:
nativePlugins:插件跟节点可存放多个插件
hooksClass:⽣命周期代理(实现AppHookProxy接⼝类)格式(完整包名加类名)
name : 注册名称,
class : module 或 component 实体类完整名称
type : module 或 component类型。
{
"nativePlugins": [
{
"hooksClass": "uni.dcloud.io.uniplugin_richalert.apphooks",
"plugins": [
{
"type": "module",
"name": "DCloud-RichAlert",
"class": "uni.dcloud.io.uniplugin_richalert.RichAlertWXModule"
}
]
}
]
}
本地测试运⾏带有插件的uni-app
安装最新⼤于等于1.
创建uni-app⼯程或在已有的uni-app⼯程编写相关的.nvue 和.vue⽂件。使⽤uni-app插件中的module 或 component。
xxx.vue ⽰例代码(RichAlert为⽰例)
<template>
<view>
<button @click="showRichAlert">
点击弹出RichAlert
</button>
</view>
</template>
<script>
// require插件名称
const dcRichAlert = quireNativePlugin('DCloud-RichAlert');
export default {
methods: {
showRichAlert() {
// 使⽤插件
dcRichAlert.show({
position: 'bottom',
title: "提⽰信息",
titleColor: '#FF0000',
content: "<a href='uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是⼀个使⽤ Vue.js 开发跨平台应⽤的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",                      contentAlign: 'left',
checkBox: {
title: '不再提⽰',
isSelected: true
},
buttons: [{
title: '取消'
},
{
title: '否'
},
{
title: '确认',
titleColor: '#3F51B5'
}]
}, result => {
switch (pe) {
case 'button':
console.log("callback---button--" + result.index);
break;
case 'checkBox':
console.log("callback---checkBox--" + result.isSelected);
break;
case 'a':
console.log("callback---a--" + JSON.stringify(result));
break;
case 'backCancel':
console.log("callback---backCancel--");
break;
}
});
}
}
}
</script>
选择发⾏--->原⽣APP-本地打包--->⽣成本地打包App资源等待资源⽣成!
在控制台会输出编译⽇志,编译成功会给出App资源路径
把APP资源⽂件放⼊到UniPlugin-Hello-AS⼯程下 “app” Module根⽬录assets/apps/测试⼯程appid/www对应⽬录下,再修改
assets/data/l!修改其中appid=“测试⼯程appid”!,测试⼯程UniPlugin-Hello-AS 已有相关配置可参考。具体可查看。
appid注意⼀定要统⼀否则会导致应⽤⽆法正常运⾏!
配置"app"Module下的 adle. 在dependencies节点添加插件project引⽤(以uniplugin_richalert为例)
// 添加uni-app插件
implementation project(':uniplugin_richalert')
运⾏测试。测试运⾏时⼀切要以真机运⾏为主。
六、打包uni-app插件
选择Gradle--->插件module--->Tasks--->build--->assembleRelease编译module的aar⽂件
注意:新版本Android studio将assembleRelease放⼊other中了
将编译依赖库⽂件或仓储代码放⼊libs⽬录下或配置到package.json中
简易安卓app开发在填写必要的信息
完整的android 插件包包含:
android⽂件⾥⾯存放XXX.aar 、libs⽂件夹。
.aar⽂件插件包
libs⽂件夹存放插件包依赖的第三⽅ .jar⽂件和.so⽂件
package.json 插件信息
⽣成提交插件市场的.ZIP包
⼀级⽬录以插件id命名,对应package.json中的id字段!存放android⽂件夹和package.json⽂件。
⼆级⽬录 android 存放安卓插件 .aar ⽂件 .jar .so放⼊到libs下
注意:.os⽂件需要注意 armeabi-v7a、x86 、arm64-v8a以上三种类型的.so必须要有,如果没有⽆法正常使⽤!!
七、如果想要共享给其他开发者,把这个插件提交插件市场
不提交插件市场,也可以在HBuilderX⾥提交云端打包。
关于第三⽅库引⽤问题:
尽量去下载相关的aar或jar,然后配置到插件包相应⽂件夹下。aar放到android⽬录下。jar放到libs⽬录下。如果不下载也可以。可使⽤compileOnly修饰,然后将相应的依赖库名称配置到package.json中的dependencies节点下。
第三⽅库依赖冲突。⼀种是主app已完整集成相关第三⽅库。可使⽤⽤compileOnly修饰即可。如果主app仅集成了部分第三⽅库。可参考
blog.csdn/wapchief/article/details/80514880
.os⽂件需要注意 armeabi-v7a、x86 、arm64-v8a以上三种类型的.so必须要有,如果没有⽆法正常使⽤!!
插件中包含FileProvider云打包冲突,可通过ask.dcloud/article/36105此贴配置绕过。
插件中有资源路径返回时,请使⽤绝对路径file://开头防⽌不必要的路径转换问题。
androidx暂时不⽀持。请使⽤v4、v7实现插件。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。