UNI-APP转华为welink小程序实战

最新推荐文章于 2025-02-28 17:02:26 发布

mingyong.g

最新推荐文章于 2025-02-28 17:02:26 发布

阅读量2.7k

点赞数 3

分类专栏： VUE UNI-APP 点滴DayUP 文章标签： uni-app 微码小程序 vue-cli 微码 uni-app 微码小程序 uni-app开发微码小程序

本文链接：https://blog.csdn.net/weixin_44670973/article/details/107441729

版权

点滴DayUP 同时被 3 个专栏收录

102 篇文章

订阅专栏

VUE

28 篇文章

订阅专栏

UNI-APP

22 篇文章

订阅专栏

UNI-APP转华为welink微码小程序实战

uni-app自2018年初发布以来，一直蓬勃发展，一派欣欣向荣，社区也是人声鼎沸，众望所归。根据官方介绍，基于uni-app 开发可以轻松实现一套代码发布到10个平台。
一码10端
随着小程序生态的不断发展，华为基于自家的welink平台（对标阿里的钉钉和腾讯的企业微信）推出了自己的小程序产品：微码小程序，由于发行时间较晚并没有被uni-app集成到统一开发平台下。

那么有没有可能通过uni-app开发华为的微码小程序呢？
答案是肯定的，对比微码小程序的语法API以及基础模板和vue模板发现其语法和uni-app是相同的，需要注意的地方在于：uni-app和微码小程序的配置文件不同。 至于开发都是万变不离其宗的。

如何创建UNI_APP

创建uni-app应用，官方提供了两种解决办法

通过HbuilderX 创建快速创建uni-app应用（简单，快速，集成了uni-app的语法提示和api接口等）
通过vue-cli工具创建（适合熟悉vue-cli的开发者以及使用其它编辑器开发uni-app的开发者）

🚀uni-app快速上手

基于HBuilderX 开发的UNI_APP应用如何转微码小程序？

由于大多数开发uni-app的开发者都是使用HbuilderX创建uni-app应用，那么首先介绍如何将通过HBuilderX创建的uni-app应用转换为华为微码小程序。

步骤一：通过HbuilderX 创建uni-app应用

通过HBuilderX 新建一个uni-app项目uni_wecode,并在项目根目录下新建index.html 用于引入hwh5.js等第三方js文件。
html 参考（这里hwh5.js我是本地化保存在common目录下）

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
				
				<!-- weCoed SDK  -->
				 <script type="text/javascript" src="../js/es6.polyfill.js"></script>
				 <!-- 控制台脚本，调试阶段可打开  -->
				 <script type="text/javascript" src="../js/vconsole.js"></script>
				 <!-- JSAPI相关脚本 -->
				 <script src="../../../../common/js/hwh5.js"></script>
				
    </body>
		<script>
			// console.log(HWH5);
		  document.body.addEventListener('touchstart', function () {});
		</script>
</html>

步骤2 ：将uni-app发布成H5应用

⭐️H5发行配置 点击发行->网站-H5手机版->高级->设置index.html和项目运行的基础路径
具体操作见下图

在这里插入图片描述

特别说明：

必须配置自定义index.html 也就是步骤一中编辑的html文件。否则无法集成华为微码小程序的SDK，无法使用诸如扫码，调取摄像头等手机底层应用。
应用的运行路径必须设置为相对路径 虽然是通过H5网站转换为微码小程序，但是微码小程序和网站不同不存在网站根目录或是网站部署目录等说法。因此这里必须将运行路径设置为相对路径。以保证本地资源能够正常访问
备注：此前UNI-APP 配置H5项目为相对路径一直存在bug（尤其是静态图片引用路径问题），不过最新的uni-app已经修复了这一bug，因此可以放心的将H5运行路径设置为相对路径

步骤3 通过微码开发者工具创建微码小程序

目前仅能通过这一方式创建微码小程序。所以必须转到微码开发者工具操作

创建微码小程序时注意选择模板为普通模板

步骤4 集成uni-app的H5应用

将uni-app打包生成的h5目录下的index.html及static文件拷贝至微码项目wecode_demo目录下，此时wecode_demo目录结构如下

编译调试

通过微码开发者工具编译调试，运行结构和uni-app运行结果一直
经测试页面跳转功能和扫码功能正常使用。（扫码需要在welink环境打开）

通过vue-cli 创建uni-app应用如何转微码小程序？

使用vue-cli创建的uni-app 应用仍然可以使用上面的思路将uni-app打包为H5应用，然后导入微码开发者工具中调试上传，但是这样操作，代码的编辑和调试每次都需要在HBuilderX下操作，然后打包发布为H5再拷贝到微码开发者工具操作，步骤较为繁琐，基于vue-cli 创建的uni-app项目我们可以直接将源码复制到微码开发者工具下使用微码接着开发和调试。

非 vue-cli创建的uni-app 同样可以转换为vue-cli 项目操作。只是通过HbuildeX 创建的uni-app自动安装了uni-app编译器。因此想要将通过Hbuildex创建的项目uni-app、less、scss、ts等编译器，需自己手动npm安装。
Hbuildex和vue-cli两种方式创建的uni-app的主要区别如下：

cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update，或者手动修改 package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装，手动安装缺少的依赖即可。
HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

步骤1 使用vue-cli创建uni-app应用

具体步骤可以参考官方教程:🚀vue-cli创建uni-app

步骤2 使用微码开发者工具创建微码应用

注意：此处创建微码小程序应使用VUE模板或者uni-app模板。
由于微码开发者工具提供了uni-app模板，主要是适配了uni-app的一些通用API，方便开发者使用熟悉的uni-app语法开发微码小程序，因此此处可直接选择uni-app模板，减小后续的配置。

步骤3 合并uni-app项目和微码小程序项目

步骤2 的目的主要是获取微码开发者工具特有的配置文件,若跳过步骤2 也可以手动添加微码小程序配置文件.主要配置文件是wecode.json/plugin.json/vue.config.js/public/index.html(内容比较多还是建议通过步骤2创建微码小程序获取,以免造船未知错误)

合并uni-app项目和微码程序项目
通过步骤1和步骤2我们获得了两个vue-cli 项目.将二者合并.比如说将uni-app项目合并到微码小程序项目下.相同的文件直接跳过或者替换即可(需要注意的是:public目录下的index.html需要以微码小程序创建的为准,里面配置了对vconsole.js等文件的引用)
合并后的项目目录如下

步骤4 配置微码小程序appid

编辑上图的plugin.json文件配置微码小程序appid

{
  "indexURL":"h5://your_appid/index.html",
  "appId":"your_appid",
  "minSdkVersionName": "1.0.25",
  "versionName": "1.0.0"
}

appid 通过创建微码小程序获取,可自行查阅微码小程序开发者文档🚀welink开发文档

步骤5 配置uni-app基础路径

如前面所述,需要将uni-app h5应用的运行路径设路径设置为相对路径.
可通过uni-app项目下的manifest.json配置.打开manifest.json在文件最后加上以下配置即可

	"h5" : {
		"router" : {
				"base" : "./"
		},
		"optimization" : {
				"treeShaking" : {
						"enable" : true
				}
			}
	}

完整的配置文件如下

{
	"name": "",
	"appid": "",
	"description": "",
	"versionName": "1.0.0",
	"versionCode": "100",
	"transformPx": false,
	"app-plus": { /* 5+App特有相关 */
		"usingComponents": true,
		"splashscreen": {
			"alwaysShowBeforeRender": true,
			"waiting": true,
			"autoclose": true,
			"delay": 0
		},
		"modules": { /* 模块配置 */

		},
		"distribute": { /* 应用发布信息 */
			"android": { /* android打包配置 */
				"permissions": ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
					"<uses-feature android:name=\"android.hardware.camera\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
				]
			},
			"ios": { /* ios打包配置 */

			},
			"sdkConfigs": { /* SDK配置 */

			}
		}
	},
	"quickapp": { /* 快应用特有相关 */

	},
	"mp-weixin": { /* 微信小程序特有相关 */
		"appid": "",
		"setting": {
			"urlCheck": false
		},
		"usingComponents": true
	},
	"mp-alipay" : {
        "usingComponents" : true
    },
    "mp-baidu" : {
        "usingComponents" : true
    },
    "mp-toutiao" : {
        "usingComponents" : true
    },
    "mp-qq" : {
        "usingComponents" : true
		},
	"h5" : {
		"router" : {
				"base" : "./"
		},
		"optimization" : {
				"treeShaking" : {
						"enable" : true
				}
			}
	}
}