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

女爷i 2021-07-27 01:47 314阅读 0赞

# 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>
            
    				
    				
    				 <script type="text/javascript" src="../js/es6.polyfill.js"></script>
    				 
    				 <script type="text/javascript" src="../js/vconsole.js"></script>
    				 
    				 <script src="../../../../common/js/hwh5.js"></script>
    				
        </body>
    		<script> // console.log(HWH5); document.body.addEventListener('touchstart', function () { }); </script>
    </html>

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

![在这里插入图片描述][format_png_pic_center]

![wecode][]

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

![在这里插入图片描述][format_png_pic_center 1]

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

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

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

![123][]

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

![在这里插入图片描述][format_png_pic_center 2]

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

![在这里插入图片描述][format_png]

![在这里插入图片描述][format_png_pic_center 3]

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

## 进阶 ##

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

> 1.  能够通过HBuildeX直接打开微码开发者工具
> 2.  能够指定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开发微码小程序也就轻而易举了。

[format_png_pic_center]: /images/20210726/b02ff9f7c0a7424884732b805f2e222a.png
[wecode]: /images/20210726/353578241b794a18880c1c4312134a0a.png
[format_png_pic_center 1]: /images/20210726/1e10c6af2fc44e0b8f2aaaeb7bef7453.png
[123]: /images/20210726/4aedb2165a76460f89098ce13f5870ee.png
[format_png_pic_center 2]: /images/20210726/8ffb22ee78b244fc98a84d4a2a6927b1.png
[format_png]: /images/20210726/10cab83a90e3477ea2b04c2d82d5d408.png
[format_png_pic_center 3]: /images/20210726/3b89930794ce49ff9fe5ecd3df8328bc.png