uni-app 开发华为微码小程序

文章目录

uni-app 开发华为微码小程序
- 背景
- 通过uni-app生成一个h5应用
- 通过微码开发者工具新建一个微码应用
- 进阶
- 官方解决方案

背景

之前一直使用uni-app开发小程序、H5应用。近期公司有意向使用华为的welink产品作为移动OA。正好近期项目不是特别忙，在工作之余花了点时间了解了下welink产品以及其小程序平台。

通过深入了解，发现其微码小程序api同uni-app api非常类似，于是想着能否通过uni-app开发微码小程序，毕竟已经习惯了HbuilderX的界面风格和操作习惯。

通过uni-app生成一个h5应用

通过HBuilderX 新建一个uni-app项目uni_wecode,并在项目根目录下新建index.html 用于引入hwh5.js等第三方js文件。

index.html 格式如下：

<!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>

将uni-wecode项目发布为H5应用，发布时需要点击高级配置，设置项目的index模板路径和publicPath。配置方式如下图：

在这里插入图片描述

wecode

配置完成之后，uni-app将会在项目目录下生成unpackage目录，在unpackage目录下找到h5目录。目录结构如图：

在这里插入图片描述

注意当publicPath 设置为./可将整个项目路径设置为相对路径也就是uni-app编译好的h5应用可直接在本地打开，但是需要注意当项目中使用到图片等文件时，其文件路径也要进行相应的调整。

通过微码开发者工具新建一个微码应用

通过微码开发者工具新建微码应用wecode_demo，注意模板请选择普通模板。如图：

123

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

在这里插入图片描述

编译运行可看到运行结果同uni-app运行结果一致。

在这里插入图片描述

经测试uni.navigateTo跳转正常，微码小程序扫码功能正常（需通过welink扫码打开）

进阶

通过前面的验证，说明技术的可行性，仅仅是一种方案的探索，具体实现还不够优雅！如何像uni-app开发微信小程序一样开发微码小程序呢？要想实现这个功能，首先要实现两件事情：

能够通过HBuildeX直接打开微码开发者工具

能够指定uni-app编译后的打包目录

首先HbuilderX是如何打开微信开发者工具呢？–>通过命令行工具cli.bat -o,我们可以在HbuilderX下新建终端并将目录切换到安装微信开发者工具的目录，并运行如下命令行：

cli.bat -o

可以看到微信开发者工具正在打开。这也就是为什么HbuiderX需要指定微信开发者工具的原因。当然以也可以通过命令行的方式打开uni-app编译打包的微信小程序项目。

那能否通过命令行打开微码开发者工具呢？目前尚未看到华为官方的相关文档和说明。也就是暂不可行。

对于第二个问题，如何指定uni-app的打包目录，我们只需在uni_wecode目录下新建一个vue.config.js文件，并按照我们的输出要求配置即可。

官方解决方案

知道我写这篇文章的时候，华为官方在5月9号的版本更新中推出了uni-app模板，让开发者可以在微码开发者工具使用uni-app的语法和规则开发微码小程序。这段话听起来有点绕。但实现方案和我上面的大同小异，都是将uni-app编译成h5应用同时集成华为的JSSDK从而实现在在uni-app项目下调用华为JSSDK提供的api，只不过我是从uni-app的角度出发，去集成华为JSSDK,而华为则是从微码小程序出发，使其适应uni-app的开发规范。

值得一提的是，微码小程序提供的uni-app模板还提供了一个补丁文件，使得开发者可以通过调用uni-app api的方式调用hwh5提供的api（仅适配了hwh5拥有的api，而且部分api条用仍存在区别，实际调用时注意对比两家文档）。如此看来，只要有朝一日uni-app 将微码api集成进去，并可像打开微信开发者工具一样打开微码开发者工具，那么使用uni-appk开发微码小程序也就轻而易举了。