2020年7月微信開放了H5跳轉(zhuǎn)小程序的實(shí)現(xiàn)（基于微信JSDK和開放標(biāo)簽）督弓。微信官方文檔 僅有 js 示例哥谷，工作中用的是vue拴袭，特此記錄備忘泣棋。
微信開放標(biāo)簽是微信公眾平臺(tái)面向網(wǎng)頁開發(fā)者提供的擴(kuò)展標(biāo)簽集合雕薪。通過使用微信開放標(biāo)簽昧诱，網(wǎng)頁開發(fā)者可安全便捷地使用微信或系統(tǒng)的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)所袁。
此文檔面向網(wǎng)頁開發(fā)者盏档，介紹微信開放標(biāo)簽如何使用及相關(guān)注意事項(xiàng)。需要注意的是燥爷，微信開放標(biāo)簽有最低的微信版本要求蜈亩，以及最低的系統(tǒng)版本要求懦窘。
微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上稚配、Android 5.0及以上畅涂。
代碼示例
示例備注：
- 基于vue、vant實(shí)現(xiàn)
- 請求后端api 獲取 JSDK授權(quán)信息需要根據(jù)自身情況做修改道川，字段如下：
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來午衰，若要查看傳入的參數(shù)，可以在pc端打開冒萄，參數(shù)信息會(huì)通過log打出臊岸，僅在pc端時(shí)才會(huì)打印
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填尊流，生成簽名的時(shí)間戳
nonceStr: '', // 必填帅戒，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: [], // 必填崖技，需要使用的JS接口列表
openTagList: [] // 可選逻住，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
})
- 對于
path屬性响疚，所聲明的頁面路徑必須添加.html后綴鄙信，如pages/home/index.html。 - 開放標(biāo)簽成功時(shí)才能看到button忿晕，僅真機(jī)測試有效装诡。微信開發(fā)者工具無法展示button，且console提示錯(cuò)誤
[Vue warn]: Unknown custom element: <wx-open-launch-weapp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
<template>
<div>
this is a demo
<div class="home">
<wx-open-launch-weapp
id="launch-btn"
:username="username"
:path="path"
@launch="handleLaunchFn"
@error="handleErrorFn"
>
<script type="text/wxtag-template">
<style>
.ant-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid #d9d9d9;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0,0,0,0.65);
background-color: #fff;
}
.ant-btn-red {
color: #fff;
background-color: #FF5A44;
border-color: #FF5A44;
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>
<button class="ant-btn ant-btn-red">{{ btnText }}</button>
</script>
</wx-open-launch-weapp>
</div>
</div>
</template>
<script>
import wx from 'weixin-js-sdk' // 引入weixin JSDK
import {Toast, Dialog, Notify} from 'vant'
// api 接口從后端獲取微信jsdk授權(quán)信息
import { getWechatJsConfig } from '../../../api/wechat'
export default{
data () {
return {
username: 'gh_xxxxxxxx', // gh_ 開頭的原始小程序ID
path: 'pages/index/index.html', // 一定要以 .html 結(jié)尾
btnText: "我的小程序"
}
},
methods: {
ToMiniapp() {
getWechatJsConfig({api: 'getLocation', 'url': window.location.href }).then(res => {
res['openTagList'] = ['wx-open-launch-weapp'] // 微信小程序標(biāo)簽名加入 openTagList
console.log(res)
wx.config(res);
})
},
handleLaunchFn (e) {
console.log(e)
},
handleErrorFn(e){
console.log('fail', e.detail);
}
},
mounted() {
this.ToMiniapp()
}
}
</script>
