The feedbackstar-android from xiexiepro

由于目前市面上的app大部分是由原生和H5独立或混合编写，本文尝试对原生项目进行改造，实现原生(Android)和uni-app以及html5项目混编，使其能在iOS、Android、H5、小程序等多个平台运行，从而实现跨平台开发。

第一种实现方式：在uni-app宿主项目中添加原生以及H5插件模块

第一步：新建uni-app项目

第二步：调用H5插件模块

将编写好的html使用uniapp中提供的web-view组件装载到app中运行，web-view是一个 web 浏览器组件，它可以用来承载网页的容器，会自动铺满整个页面。

uniapp可以用来加载本地和网络网页，小程序仅支持加载网络网页(个人类型与海外类型的小程序不支持使用 web-view 组件)，App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下，如下为一个加载本地网页的uni-app项目文件目录示例：

┌─components         //目录：组件文件存放目录
├─hybrid             //目录：本地网页及相关资源
│  └─html
│     ├─css
│     │  └─test.css
│     ├─img
│     │  └─icon.png
│     ├─js
│     │  └─test.js
│     └─local.html
├─pages              //目录：业务页面文件存放目录
│  └─index
│     └─index.vue
├─static             //目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js            //Vue初始化入口文件
├─App.vue            //应用配置，用来配置App全局样式以及监听应用的生命周期
├─manifest.json      //配置应用名称、appid、logo、版本等打包信息
└─pages.json         //配置页面路由、导航条、选项卡等页面类信息

1.uniapp加载本地网页示例代码：

<template>
    <view>
        <web-view src="/hybrid/html/local.html"></web-view>
    </view>
</template>

2.uniapp加载网络网页示例代码：

<template>
    <view>
        <web-view  src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
    </view>
</template>

第三步：调用原生(Android)插件模块

官方参考文档：Android uni-app原生插件开发文档官方示例代码：最新Andorid平台SDK下载（UniPlugin-Hello-AS）

该部分内容实践，我们将按照以下步骤进行：

第1步：新建一个Android项目

使用Android Studio IDE点击左上角File->New->New Peoject，填写Application name等信息，一路Next，最后Finish就创建好了一个Android工程。

Android应用开发这里不详细叙述，如需学习出门问谷歌。

第2步：改造已有Android项目，使其支持uniapp运行

参考：使用新版本5+SDK创建最简Android原生工程

1.复制SDK->libs->lib.5plus.base-release.aar文件到原生工程工程的app->libs目录下

2.修改工程的build.gradle文件 2.1 添加aar文件引用到dependencies,代码如下:

implementation(name: 'lib.5plus.base-release', ext: 'aar')

2.2 添加aar文件搜索路径添到gradle文件，与dependencies同级, 代码如下:

repositories {
    flatDir {
        dirs 'libs'
    }
}

3.修改工程的Androidmanifest.xml文件 3.1 修改application代码如下：

android:name="io.dcloud.application.DCloudApplication"

3.2 修改代码如下：

<activity
            android:name="io.dcloud.PandoraEntry"
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:hardwareAccelerated="true"
            android:theme="@style/TranslucentTheme"
            android:screenOrientation="user"
            android:windowSoftInputMode="adjustResize" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

第3步：开发Android原生插件 点击Android Studio 菜单项 File->New->New Module,选择Android Library, 点击Next.填写与插件相关信息点击finish。

第4步：uniapp代码中调用原生插件

               // require插件名称
				const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert');
			   // 使用插件
			   dcRichAlert.show({
			       position: 'bottom',
			       title: "提示信息",
			       titleColor: '#FF0000',
			       content: "<a href='https://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: '明白',
			           titleColor: '#3F51B5'
			       }
			       ]
			   }, result => {
			       switch (result.type) {
			           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;
			      }
			   });

第5步：将uni-app添加到Android项目中运行

在HbuilderX中选择将要添加到原生中uni-app项目点击发行->原生App-本地打包，将打包后的文件如下：