Uniapp与原生

Posted on | In

Uniapp和原生sayhello交互

把uniapp的resources代码导出给安卓使用

HBuilderX（写uniapp代码）

  1. 下载HBuilderX稳定版（与上述原文发布时候的不大一样了） https://www.dcloud.io/hbuilderx.html

    我下载的是 3.7.8.20230323 版本

  2. 用HBuilderX新建项目，选择默认模版即可

  3. 更改 pages/index/index.vue 内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <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">调用原生方法-异步回调（调用的方法名sayhello与安卓中的方法名一致）</button>
    	</view>
    </template>

    <script>
    	const myModule = uni.requireNativePlugin('MyModule') //MyModule与Android中建的插件名一致
    	export default {
    		data() {
    			return {
    				title: 'Hello'
    			}
    		},
    		onLoad() {

    		},
    		methods: {
    			sayhello() {
    				myModule.sayhello({ //这是给安卓方法传参，并toast回调的内容
    					'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>

  4. 生成本地打包app资源备用

    工具栏：发行》原生App-本地打包(L)》生成本地打包App资源(R)

    生成的内容在 unpackage/resources/ 文件夹下，这个文件夹下的内容等下要复制到 AndroidStudio 中使用

    这个步骤会要求填写 appid（uniapp唯一码），有链接可以跳到 DCloud 平台

在DCloud平台进行注册

  1. 在开发者中心，点击刚刚生成的应用的名称。

  2. 点“Android云端证书”，生成证书。这个证书下载下来【就是Android那边的 jks 签名文件。等下复制到Android项目app目录下】

  3. 本地命令行窗口：使用 keytool 命令查看 SHA1、SHA256

    1
    keytool -v -list -keystore 下载下来的keystore的绝对路径

  4. 把 SHA1、SHA256填写到 开发者中心》各平台信息，点提交之后，可以查看“离线打包key”【等下复制到 Android 项目的 AndroidManifest.xml中替换dcloud_appkey的value值】

Android项目

  1. 下载官方demo ：
    2023年03月23日发布——HBuilderX（3.7.8.20230323）

  2. 解压后，用Android Studio打开 UniPlugin-Hello-AS 项目

  3. 创建自己的module

    创建自己的module

    在刚创建的module的build.gradle中的dependencies内添加

    1
    2
    3
    4
    5
    6
    7
    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'

  4. 在app/build.gradle中的dependencies 内添加 implementation project(':mylibrary')

  5. 把 app/src/main/assets/apps 下的 __UNIX_E_ 删除，把HbuilderX生成的本地资源（HBuilderX项目下unpackage/resources/文件夹下的内容）复制进来

  6. app/src/main/assets/data/dcloud_control.xml文件修改 appid（__UNI__7F90CC3），跟复制到 app/src/main/assets/apps的名称一致

  7. 写Andorid代码，供uniapp调用【注意名称】

    在我们刚创建的module中写代码【mylibrary/src/main/java/com.ab.mylibrary下新建MyModule类】：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    package com.ab.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;

    /**
     * desc   :
     * author : shenbh
     * time   : 2023-3-27 08:49
     */
    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);
            }
        }
    }

  8. app/src/main/assets/dcloud_uniplugins.json文件中添加我们创建的module

    image-20230327101039199

把Android项目弄成插件给uniapp调用

接上述的 Uniapp和原生sayhello交互

  1. AS打包生成原生插件aar

    AS右侧Gradle》自己创建的module下的other》bundleReleaseAar。双击进行aar发行版打包

    生成在自己创建的module下build/outputs/aar路径下

    image-20230328142343033

  2. HBuilderX引入aar

    image-20230328144447755

  3. HBuilderX选择本地插件

    image-20230328144803832

  4. 制作自定义调试基座

    image-20230328145003095

    注意：如果出现已经制作自定义调试基座，但是没有运行基座选择这一选项的情况。请重新进行自定义基座打包，直到出现运行基座选择为止！

    image-20230328145457629

注意！！！

  1. uniapp测试aar包的时候，每次变动aar包内容都要重新云打包！！！再用自定义调试基座运行
  2. uniapp云打包要求只能有一个aar包

代码（原生插件）

方法调用

问题

app运行后，未配置appkey或配置错误

解决：

  1. app/src/main/AndroidManifest.xml中，替换成具体的值

    1
    2
    3
    <meta-data
               android:name="dcloud_appkey"
               android:value="4201732dc35d8c819f0556c7ea9e0dd9" />

  2. app/src/main/assets/：替换apps的内容，修改data/dcloud_control.xml的appid值，修改dcloud_uniplugins.json内容

    image-20230406152144232

  3. 更改keystore，更改成跟appid相对应得（在dcloud官网申请的keystore）

    更改app/build.gradle的config内容

    注意：keystore、applicationId、appid都要对应上