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。配置方式如下圖：
配置完成之後，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開發微碼小程式也就輕而易舉了。