Android uni-app封装原生插件

北斗星辰 發表於 2020-7-31 16:41:00

<h1 style="text-align: center">Android uni-app封装原生插件</h1>
 
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731161440574-1563594351.png">
 
 
<h2>uni-app是什么?</h2>
一个使用Vue.js开发所有前端应用框架,开发者编写一套代码,可发布到ios、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
如果你还没有了解uni-app是什么：点击这里：这篇文章举例说明。。。
 
<h2>uni-app的特点</h2>
<ul>
<li>跨平台更多
<ul>
<li>真正做到“一套代码、多端发行”！</li>
<li>条件编译：优雅的在一个项目里调用不同平台的特色功能！</li>
</ul>
</li>
<li>运行体验好
<ul>
<li>组件、api与微信小程序一致</li>
<li>兼容weex原生渲染</li>
</ul>
</li>
<li>通过技术栈，学习成本低
<ul>
<li>vue的语法、微信小程序的api</li>
<li>内嵌mpvue</li>
</ul>
</li>
<li>开放生态，组件更丰富
<ul>
<li>支持通过npm安装第三方包</li>
<li>支持微信小程序自定义组件及SDK</li>
<li>兼容mpvue组件及项目</li>
<li>App端支持和原生混合编码</li>
<li>DCloud将发布插件市场</li>
</ul>
</li>
</ul>
 
<h2>uni-app封装原生插件</h2>
<h3>1.Android离线SDK下载：</h3>
点击下载，两个SDK均可。
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731163211592-456452723.png">
 
 
下载完成，解压备用：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731163317086-844758698.png">
 
 
<h3>2.新建Android项目</h3>
打开Android Studio，建立一个No Activity项目。在菜单栏选择File>New>New Project
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731164046873-1165869364.png">
 
 
 
然后Next：填写项目名，包名，已经API Level。
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731164231726-1642253506.png">
 
 
 然后Finish，为了更好的使用，我们把它转到Project视图。接下来创建开发的模块（Module）
点击File>New>New Module.
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731164534286-1851601392.png">
 
 
 
然后选择Android Library，点击Next：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731164616588-376895213.png">
 
 
 自定义Library名和包名，点击Finish
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731164656571-280340384.png">
 
 
 
创建完毕视图如下：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731164748162-1462615953.png">
 
 
 
接下来打开testplugin项目里的build.gradle，将原生的dependencies下默认生成的依赖注释掉，添加uni-app所需库的依赖：
<div class="cnblogs_code">
<pre> compileOnly "com.android.support:recyclerview-v7:25.3.1"
compileOnly "com.android.support:support-v4:25.3.1"
compileOnly "com.android.support:appcompat-v7:25.3.1"
implementation 'com.alibaba:fastjson:1.1.46.android' //一会会用到fastjson</pre>
</div>
添加完成如下图所示：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731165733505-109461150.png">
 
 
 
另外把导入的uniapp-release.aar插件，它是扩展module主要依赖库
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731170107787-904223382.png">
 
 
 回到刚刚创建的testplugin的build.gradle中，接下来进行导入aar需要的配置操作：
添加：放在android{}外
<div class="cnblogs_code">
<pre>repositories {
flatDir {
 dirs 'libs'
}
}</pre>
</div>
然后在dependencies内添加：
<div class="cnblogs_code">
<pre>compileOnly fileTree(dir: '../app/libs', include: ['uniapp-release.aar'])</pre>
</div>
添加完毕，如下图：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731170539456-1631989946.png">
 
 
 
然后同步Sync Now!
官网文档提醒：
工程gradle配置的为gradle-4.6-all版本，使用的是新版本的依赖方式。如果您使用的是老版本的gradle，可点击链接进行修改依赖方式。
 
<h3>3.原生插件的开发</h3>
以扩展Module为例，如图创建类TestModule：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731171052285-925706195.png">
 
 
 
Module扩展注意事项：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731171155203-2124840493.png">
 
 
 写一个小demo：
<div class="cnblogs_code">
<pre>import android.util.Log;
import com.alibaba.fastjson.JSONObject;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;

public class TestModule extends WXModule{
String NAME="name";
String AGE ="age";

@JSMethod(uiThread = true)
public void testText(JSONObject options, JSCallback callBack){
 Log.e("TestModule", "成功调用!" );
 String name =options.getString(NAME);
 String age =options.getString(AGE);
 JSONObject data =new JSONObject();
 if (name !=null && !name.isEmpty() && age !=null && !age.isEmpty()){
 int _age =Integer.parseInt(age);
 if (_age<0 || _age>30){
 data.put("code","不合格!");
 }else {
 age=(_age>0 && _age<10) ? "0"+age:age;
 data.put("code","合格:"+"姓名_"+name+",年龄_"+age);
 }
 }else {
 data.put("code","输入无效!");
 }
 callBack.invoke(data);
}
}</pre>
</div>
 
<h4>接下来在本地注册插件（一）：</h4>
在app>src>main目录下创建assets文件夹
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731171440282-899497458.png">
 
 
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731171454598-1949839310.png">
 
 <img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731171458842-905179687.png">
 
 在app>src>main>assets目录下创建dcloud_uniplugins.json文件，然后添加：
<div class="cnblogs_code">
<pre>{
"nativePlugins": [
{
 "plugins": [
 {
 "type": "module",
 "name": "Test-Module",
 "class": "com.test.testplugin.TestModule"
 }
 ]
}
]
}</pre>
</div>
 
<h4>注册方法（二）：</h4>
对创建的Module扩展testplugin进行操作，在 src>main>java>插件包名(这里是com.test.testplugin)目录下创建类TestModule_AppProxy
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172448084-234529660.png">
 
 
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172457035-2032775893.png">
 
 
TestModule_AppProxy类要实现AppHookProxy接口，在onCreate（）方法中添加weex注册相关参数或填写插件需要在启动时初始化的逻辑。
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172518904-624835553.png">
 
 
<div>
<div>在hooksClass节点填入你创建的实现AppHookProxy接口的实体类的完整名称 (注：有些需要初始化操作的需求可以在此处添加逻辑，无特殊操作仅使用第一种方式注册即可无需集成AppHookProxy接口)</div>
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172714363-808100703.png">
 
 
注册完毕，开始打包插件
在Gradle>testplugin>Tasks>other目录下找到assembleRelease，双击等待系统编译出扩展module的aar文件
<div>
<div>注意：官方文档中是选择Gradle--->插件module--->Tasks--->build--->assembleRelease编译module的aar文件，在新版本的AndroidStudio中,assembleRelease和assembleDebug被转移到other目录下。</div>
</div>
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172832587-1298320577.png">
 
 <img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172839064-397103712.png">
 <img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172845159-5274535.png">
 <img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172856158-1185241826.png">
 
 成功后在testplugin>build>outputs>aar目录下就可以找到相关插件了
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731172938670-1484437150.png">
 
<h2> </h2>
<h2>4.HBuilderX导入和使用本地插件</h2>
</div>
<div>创建uni-app默认项目TestModule</div>
<div><img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173258491-405056811.png">
 
 
</div>
参照官方文档中的目录规范，将刚才打包的插件放到nativeplugins>插件文件夹名称（我的是Test-Module）>android目录下，没有相关目录就一步步创建。
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173321203-904346556.png">
 
 创建package.json——uni原生插件描述文件，放到插件文件夹名称目录下，与android文件夹并列
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173335528-650935996.png">
 
 
注意：插件标识id必须在对应android和ios节点下plugins中进行注册，与name字段值一致。name下的class是注册插件的类名，也要填对。
这里因为只有android插件，就把ios节点全部删掉，在这里直接注释的话是无效的。
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173435967-847896815.png">
 
 还有要注意的一点：插件标识id一定要与插件文件夹名称一致，不然在云打包时会提示插件不合法：该插件在nativePlugins目录下不存在。
在manifest.json下配置App原生插件
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173522146-1571855914.png">
 
 勾选并确认
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173533582-158492787.png">
 
 
parameters信息根据需求配置
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173544362-561133916.png">
 
 接下来在HBuilderX内对项目中的index.vue文件（在pages>index目录下）做出一定更改，以便后续测试开发的原生插件。
<div class="cnblogs_code">
<pre><template>
<view class="container">
 姓名<input v-model="name" placeholder="点此编辑姓名" >
 
 年龄<input v-model="age" placeholder="点此编辑年龄" >
 
 <button type="default" @click="test">提交</button>
 <view>{{name}}</view>
 <view>{{age}}</view>
 <view>{{ result }}</view>
</view>
</template>

<script>
var testModule = uni.requireNativePlugin("Test-Module");
export default {
 data() {
 return {
 name:"",
 age:"",
 result:"暂未提交"
 }
 },
 methods: {
 test(){
 testModule.testText({
 'name':this.name,
 'age':this.age,
 },
 (ret) =>{
 this.result="[提交反馈]"+ret.code;
 })
 }
 }
}
</script></pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173722037-1110614591.png">
 
 
<h2>5.运行项目</h2>
打包自定义基座：
运行(R)>运行到手机或模拟器(N)>制作自定义调试基座(P)
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731173925849-1691110993.png">
 
 
配置App云端打包信息：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174124845-273374213.png">
 
 云端打包：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174142192-1401244350.png">
 
 提交到云端服务器：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174154285-2132651930.png">
 
 打包成功：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174333281-474493270.png">
 
 打包成功后需要在下图位置确保开启自定义调试基座功能：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174352167-1928564490.png">
 
 可以在项目unpackage下看到打包后的测试apk文件：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174404054-652942205.png">
 
 启动模拟器，或者真机运行：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174423871-199924159.png">
 
 
进入测试项目：
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174504556-49402519.png">
 
 输入姓名tom和年龄9（大于0小于10前面自动补0）测试插件，点击提交
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174516807-1089212766.png">
 
 反馈提交结果
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174528175-2195180.png">
 
 把年龄改为31（插件设置年龄范围为0~30），反馈如下
<img src="https://img2020.cnblogs.com/blog/1752318/202007/1752318-20200731174539319-258289094.png">
 
 
至此，测试成功！
<h2> 参考：</h2>
<ul>
<li>官方文档原生插件开发！</li>
<li>
uni原生插件Android开发流程一览—Module扩展
</li>
</ul>
<h2>最后:请留下您的赞!阿里嘎多.</h2>
<h2> </h2>
  
来源：https://www.cnblogs.com/Mr-East/p/13410568.html

頁: [1]

琼殿技术论坛's Archiver

Android uni-app封装原生插件