1. h5开发工具选择HBuilder X
官方下载地址 ：HBuilderX-高效极客技巧
选择App开发版
?下载完成后是压缩包，直接解压然后打开HBuilderX.exe可直接使用
2.使用HBuilderX新建项目
2.1 注册帐号并使用该帐号登录HBuilder
?2.2 新建项目，选择 默认模版
?2.3 在index.vue中编写调用代码
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<button type="default" @click="sayhello">调用原生方法-异步回调</button>
</view>
</template>
<script>
const myModule = uni.requireNativePlugin('MyModule')
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
sayhello(){
myModule.sayhello({
'name': '张三',
'age': 20,
'words': "你好!"
},(ret) => {
uni.showToast({
title:ret
})
})
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
?
2.4然后生成本地打包app资源备用
?
?
2.5 登录：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
?会发现刚才HBuilder生成的项目也在开发者后台自动生成了
?3. android开发工具选择Android Studio
官方下载地址：Download Android Studio and SDK tools ?|? Android Developers
3.1 下载uniapp项目官网demo
下载地址：原生开发者支持
?3.2.uniapp官方demo下载之后解压
有三个demo，大致类似，选择UniPlugin-Hello-AS为例，用Android Studio打开UniPlugin-Hello-AS项目。
?3.3 创建自己的module
目录层级与uniplugin_module等三个插件同级
?3.4在build中加上自己创建的uni-app插件
?3.5 在自己建造的module的build文件中添加如下代码
compileOnly fileTree(dir: '../app/libs', include: ['uniapp-v8-release.aar'])
compileOnly 'androidx.recyclerview:recyclerview:1.0.0'
compileOnly 'androidx.legacy:legacy-support-v4:1.0.0'
compileOnly 'androidx.appcompat:appcompat:1.0.0'
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation 'com.facebook.fresco:fresco:1.13.0'?
?3.6 找到下图中存放资源文件的目录，并将HBuilder中发行的资源文件复制并替换
?3.7 把下图中的名字替换为新的名字
__UNI__E 更换为 __UNI__1524E40（你自己生成的是啥就写啥）
?
?3.8 在自己的module下新建MyModule类，并添加如下代码
package com.example.mylibrary;
import android.util.Log;
import android.widget.Toast;
import com.alibaba.fastjson.JSONObject;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;
/**
* @author han
* @date 2022/2/26 17:57
* @desc
*/
public class MyModule extends UniModule {
private static final String TAG = "MyModule";
@UniJSMethod(uiThread = true)
public void sayhello(JSONObject options, UniJSCallback callback) {
Log.e(TAG, "testAsyncFunc--"+options);
if(callback != null) {
String name = options.getString("name");
Toast.makeText(mUniSDKInstance.getContext(), name, Toast.LENGTH_SHORT).show();
JSONObject data = new JSONObject();
data.put("code", "success");
data.put("message", "我是李四");
callback.invoke(data);
//callback.invokeAndKeepAlive(data);
}
}
}?
?3.9 在下图位置添加插件配置
{
"plugins": [
{
"type": "module",
"name": "MyModule",
"class": "com.example.mylibrary.MyModule"
}
]
},?
?3.10 配置appkey和证书
登录：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
然后进入该项目生成appkey以及证书配置到Android项目中，不知道的可以参考上篇文章
uni-app官方demo（Android sdk）：未配置appkey或配置错误。（uni原生插件开发，Android插件开发）_break妖的博客-CSDN博客_未配置appkey或配置错误
?
?
?
?3.11 最后运行
可以看到已经成功调用到了网页已经安卓方法
?
?