uni-app 开发华为 微码小程序
背景
之前一直使用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。配置方式如下图:
配置完成之后,uni-app将会在项目目录下生成unpackage
目录,在unpackage
目录下找到h5
目录。目录结构如图:
注意 当publicPath 设置为./可将整个项目路径设置为相对路径也就是uni-app编译好的h5应用可直接在本地打开,但是需要注意当项目中使用到图片等文件时,其文件路径也要进行相应的调整。
通过微码开发者工具新建一个微码应用
通过微码开发者工具新建微码应用wecode_demo,注意模板请选择普通模板。如图:
将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开发微码小程序也就轻而易举了。