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

最新推荐文章于 2024-04-30 11:41:26 发布

mingyong.g

最新推荐文章于 2024-04-30 11:41:26 发布

阅读量1.2k

点赞数 4

分类专栏： UNI-APP 爬坑之旅点滴DayUP 文章标签： uni-app wecode 微码小程序 uni-app开发微码小程序

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

版权

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

102 篇文章 3 订阅

订阅专栏

爬坑之旅

48 篇文章 1 订阅

订阅专栏

UNI-APP

22 篇文章 7 订阅

订阅专栏

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

文章目录

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。配置方式如下图：

在这里插入图片描述

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开发微码小程序也就轻而易举了。

mingyong.g

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
uni-app 开发华为微码小程序

uni-app 开发华为微码小程序文章目录uni-app 开发华为微码小程序背景通过uni-app生成一个h5应用通过微码开发者工具新建一个微码应用进阶官方解决方案背景之前一直使用uni-app开发小程序、H5应用。近期公司有意向使用华为的welink产品作为移动OA。正好近期项目不是特别忙，在工作之余花了点时间了解了下welink产品以及其小程序平台。通过深入了解，发现其微码小程序api同uni-app api非常类似，于是想着能否通过uni-app开发微码小程序，毕竟已经习惯了Hbuil
复制链接

扫一扫