Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南

1. h5开发工具选择HBuilder X

官方下载地址 :HBuilderX-高效极客技巧

选择App开发版

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第1张图片

 下载完成后是压缩包,直接解压然后打开HBuilderX.exe可直接使用

2.使用HBuilderX新建项目

2.1 注册帐号并使用该帐号登录HBuilder

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第2张图片

 2.2 新建项目,选择 默认模版

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第3张图片

 2.3 在index.vue中编写调用代码





Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第4张图片

2.4然后生成本地打包app资源备用

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第5张图片

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第6张图片

2.5 登录:DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

 会发现刚才HBuilder生成的项目也在开发者后台自动生成了

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第7张图片

 3. android开发工具选择Android Studio

官方下载地址:Download Android Studio and SDK tools  |  Android Developers

3.1 下载uniapp项目官网demo

下载地址:原生开发者支持

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第8张图片

 3.2.uniapp官方demo下载之后解压

有三个demo,大致类似,选择UniPlugin-Hello-AS为例,用Android Studio打开UniPlugin-Hello-AS项目。

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第9张图片

 3.3 创建自己的module

目录层级与uniplugin_module等三个插件同级

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第10张图片

 3.4在build中加上自己创建的uni-app插件

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第11张图片

 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'

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第12张图片

 3.6 找到下图中存放资源文件的目录,并将HBuilder中发行的资源文件复制并替换

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第13张图片

 3.7 把下图中的名字替换为新的名字

__UNI__E 更换为 __UNI__1524E40(你自己生成的是啥就写啥)

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第14张图片

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第15张图片

 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);
        }
    }
}

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第16张图片

 3.9 在下图位置添加插件配置

{
  "plugins": [
    {
      "type": "module",
      "name": "MyModule",
      "class": "com.example.mylibrary.MyModule"
    }
  ]
},

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第17张图片

 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或配置错误

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第18张图片

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第19张图片

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第20张图片

 3.11 最后运行

可以看到已经成功调用到了网页已经安卓方法

Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第21张图片

 Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接,uniapp第一个项目指南_第22张图片

你可能感兴趣的:(跨平台,android,vue.js,uni-app,前端,web,app)