使用微信開放標簽＜wx-open-launch-weapp＞的踩坑日記

最近在完成H5跳轉小程序需求時，使用到了微信官方退出的開放標簽<wx-open-launch-weapp>，來談一談使用的心得和不足。

1、適用環境
微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上

2、接入微信的JS-SDK
按微信JS-SDK要求綁定安全域，並通過config接口注入權限驗證配置

wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
});

 

這里附錄微信官方教程微信開放文檔 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

最后在貼個官方的適用用例

<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打開小程序</button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>

在微信開發者工具內打開你的頁面如果顯示

 

在微信開發者工具內打開你的頁面如果顯示

{errMsg: "config:ok”}

 

就說明你已經介入wx的js-sdk成功了

3.使用開放標簽(vue)
貼個最簡單的應用

<wx-open-launch-weapp
id="launch-weapp1"
username="xxxxxx"
path="xxxxxx"
@launch="onLaunch"
@error="onError"
>
<script type="text/wxtag-template">
<div style="font-size: 14px;margin-top: 10px;text-align: center;">打開小程序</div>
</script>
</wx-open-launch-weapp>

 

坑的地方來了： 你會發現在微信開發者工具中沒有顯示還報錯

在微信開發者工具中沒有顯示是因為微信開發者工具還是無法支持微信開放標簽的調試功能，只能在手機上調試並且是在加了微信安全域名的服務器環境下調試(￣︶￣)

報錯是在提示你沒有在vue中注冊過改組件，你只需要在main.js中寫上下面一句代碼就可以了

Vue.config.ignoredElements = ['wx-open-launch-weapp']

 

除了這點外還有以下幾個坑點

　　不能用js來模擬點擊，有了局限性
　　樣式無法寫在外面中，只能在script標簽內內鏈寫或者行內樣式
　　無論是內鏈還是行內 都不支持rem
　　不會繼承樣式
　　如果開發標簽內需要使用圖片，不能用本地圖片，得用外網可以訪問的圖片，要不然會不顯示