- 根據(jù)微信網(wǎng)頁(yè)開(kāi)發(fā) / 開(kāi)放標(biāo)簽說(shuō)明文檔 (qq.com)看開(kāi)放標(biāo)簽?wx-open-launch-weapp 說(shuō)明，從上往下完整的看到2.1
- 根據(jù)簽名算法見(jiàn)JS-SDK說(shuō)明文檔的附錄，所有開(kāi)放標(biāo)簽列表見(jiàn)文末的附錄1?概述 | 微信開(kāi)放文檔?獲取wx.config 中相關(guān)簽名等配置參數(shù)（后端通過(guò)接口傳給我們）
- 開(kāi)發(fā)者調(diào)試需要在真機(jī)上調(diào)試（手機(jī)等），本地授權(quán)跳轉(zhuǎn)小程序是不起作用的
- 在期間出現(xiàn)什么問(wèn)題一定要和后端及時(shí)溝通，如invalid signature簽名錯(cuò)誤 問(wèn)題
- 附上完整代碼：
router路由界面：（在這加的獲取url 是為了兼容蘋果手機(jī)）
router.beforeEach((to, from, next) => {
// alert('路由攔截器beforeEach一進(jìn)入的url'+','+ window.location.href)
/********************* 公眾號(hào)跳轉(zhuǎn)小程序 配置 *************************/
if(window.entryUrl===undefined){
window.entryUrl= window.location.href.split('#')[0]
}
if(window.location.href){
sessionStorage.weappUrl = window.location.href.split('#')[0]
}
/********************* 公眾號(hào)跳轉(zhuǎn)小程序 配置 *************************/
})要添加跳轉(zhuǎn)的小程序的頁(yè)面：
<template>
<div class="medical_one">
<wx-open-launch-weapp
id="launch-btn"
appid="小程序id"
path="跳轉(zhuǎn)到小程序的頁(yè)面路徑（后面可拼接參數(shù)）"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.btn { padding: 23px 16px; background-color: red; }</style>
<div class="btn">
病案小程序
</div>
</script>
</wx-open-launch-weapp>
<!--上面 開(kāi)放標(biāo)簽里自帶的樣式不符合我的需求，所以我自己加了樣式，將開(kāi)放標(biāo)簽里自帶的樣式用透明色隱藏了起來(lái)-->
<wx-open-launch-weapp
id="launch-btn"
appid="小程序id"
path="跳轉(zhuǎn)到小程序的頁(yè)面路徑（后面可拼接參數(shù)）"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.btn { padding: 23px 16px; background-color: transparent; color: transparent; }</style>
<div class="btn">
病案小程序
</div>
</script>
</wx-open-launch-weapp>
</div>
<!--上面 開(kāi)放標(biāo)簽里自帶的樣式不符合我的需求，所以我自己加了樣式，將開(kāi)放標(biāo)簽里自帶的樣式用透明色隱藏了起來(lái),通過(guò).medical_one 用定位定位我想要的位置上 -->
<div class="medical_one">
<wx-open-launch-weapp
id="launch-btn"
appid="小程序id"
path="跳轉(zhuǎn)到小程序的頁(yè)面路徑（后面可拼接參數(shù)）"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.btn { padding: 23px 16px; background-color: transparent; color: transparent; }</style>
<div class="btn">
病案小程序
</div>
</script>
</wx-open-launch-weapp>
</div>
</template>
<script>
const { callConfigSignApi } = require("../flowModulation/service/SyncRequest"); //引入獲取簽名等配置的接口
export default {
data() {
return {
SignUrl: '' //獲取簽名接口的入?yún)rl
}
},
methods: {
handleErrorFn(e) {
console.log('fail', e.detail);
},
handleLaunchFn(e) {
console.log('success', e)
},
// 從公眾號(hào)跳轉(zhuǎn)小程序 初始化配置
initData () {
// alert('走點(diǎn)擊調(diào)接口方法callConfigSignApi'+','+ window.location.href)
let url = ''
if(window.entryUrl){
url = window.entryUrl
}else if(sessionStorage.weappUrl){
url = sessionStorage.weappUrl
}else{
url = window.location.href.split('#')[0]
}
this.SignUrl = url
console.log('獲取當(dāng)前頁(yè)面url方法',this.SignUrl)
// alert('this.SignUrl跳轉(zhuǎn)'+','+ this.SignUrl)
this.getConfigSign()
},
async getConfigSign(){
let code = '';
const res = await Promise.all([
callConfigSignApi(this.SignUrl,code), //和后端對(duì)接 接口需要的參數(shù)
]);
// let aa = JSON.stringify(res)
// alert('接口出參'+':'+ aa)
console.log("callConfigSignApi返回", res);
if (res[0].data.code == 200) {
const { nonceStr, signature, timestamp} = res[0].data.data
wx.config({
debug: false, // debug: true 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印
//------ debug: true, 開(kāi)發(fā)者記得打開(kāi)true可調(diào)試哦，在真機(jī)上會(huì)出現(xiàn)彈窗，提示是否授權(quán)成功 -----
appId: '公眾號(hào)的appid', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: timestamp , // 必填，生成簽名的時(shí)間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
signature: signature,// 必填，簽名
jsApiList: [callConfigSignApi,'wx-open-launch-weapp', 'chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表 （我其實(shí)不是很懂這代表的含義）
// openTagList: ['wx-open-launch-app'] // 可選，需要使用的開(kāi)放標(biāo)簽列表，例如['wx-open-launch-app'] 這個(gè)是app的,小程序是wx-open-launch-weapp
openTagList: ['wx-open-launch-weapp']
});
// alert('配置下面的'+','+timestamp)
wx.ready(function() {
// alert('config ready')
console.log('config ready');
});
wx.error(function(){
// alert('config error')
console.log('config error');
})
}
}
}，
mounted() {
//初始化
this.initData() //里封裝的方法一定要按照我這樣分開(kāi)寫哦，要不然可能會(huì)出現(xiàn)提示簽名錯(cuò)誤
}
}
</script>要添加跳轉(zhuǎn)的小程序的頁(yè)面：
出現(xiàn)的常見(jiàn)錯(cuò)誤（等我有時(shí)間再補(bǔ)充的更完整吧）
- invalid signature簽名錯(cuò)誤
- 點(diǎn)擊不生效問(wèn)題
- 樣式問(wèn)題
微信小程序?qū)W習(xí)實(shí)錄8：H5網(wǎng)頁(yè)跳轉(zhuǎn)小程序(微信開(kāi)放標(biāo)簽、wx-open-launch-weapp按鈕不顯示、noPermissionJsApi)_wx-open-launch-weapp 不顯示-CSDN博客
wx-open-launch-weapp 按鈕為什么不顯示？ | 微信開(kāi)放社區(qū) (qq.com)
wx-open-launch-weapp 樣式問(wèn)題 - 文章教程 - 文江博客 (wenjiangs.com)
html 使用 wx-open-launch-weapp 跳轉(zhuǎn)小程序_寫一個(gè)html頁(yè)面啟動(dòng)小程序-CSDN博客
公眾號(hào)跳轉(zhuǎn)小程序 wx-open-launch-weapp_微信公眾號(hào)跳小程序-CSDN博客
?微信公眾號(hào)跳轉(zhuǎn)小程序 wx-open-launch-weapp (最全指南及坑)微信開(kāi)放標(biāo)簽wx-open-launch-app點(diǎn)擊無(wú)反應(yīng)？任何彈框都喚醒不起來(lái) | 微信開(kāi)放社區(qū)
https://www.cnblogs.com/Can-daydayup/p/15404964.html?utm_source=tuicool&utm_medium=referral
Vue單頁(yè)面應(yīng)用下IOS簽名失敗_window.entryurl-CSDN博客文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-850952.html
微信公眾號(hào)跳轉(zhuǎn)小程序 wx-open-launch-weapp，在vue3+vite中使用 (多個(gè)問(wèn)題集錦) - 知乎文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-850952.html
到了這里，關(guān)于vue2公眾號(hào)跳轉(zhuǎn)小程序 wx-open-launch-weapp 超完整流程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
