微信小程序?qū)W習(xí)實(shí)戰(zhàn)系列目錄
- 微信小程序?qū)W習(xí)實(shí)錄7(H5嵌入小程序、獲取微信收貨地址、數(shù)組對(duì)象url傳值、js獲取url參數(shù))
- 微信小程序?qū)W習(xí)實(shí)錄6(百度經(jīng)緯度采集、手動(dòng)調(diào)整精度、H5嵌入小程序、百度地圖jsAPI、實(shí)時(shí)定位、H5更新自動(dòng)刷新)
- 微信小程序?qū)W習(xí)實(shí)錄5(H5嵌入小程序、map組件、地圖調(diào)起功能、騰訊百度高德導(dǎo)航頁、返回web-view頁)
- 微信小程序?qū)W習(xí)實(shí)錄4(開發(fā)前準(zhǔn)備、認(rèn)證必備資料、公眾號(hào)關(guān)聯(lián)小程序、小程序發(fā)布、開發(fā)配置、服務(wù)器域名、業(yè)務(wù)域名、位置接口設(shè)置)
- 微信小程序?qū)W習(xí)實(shí)錄3(環(huán)境部署、百度地圖微信小程序、單擊更換圖標(biāo)、彈窗信息、導(dǎo)航、支持騰訊百度高德地圖調(diào)起)
- 微信小程序?qū)W習(xí)實(shí)錄2(下拉刷新、下拉加載更多、小程序事件、PHP后端代碼、刷新無數(shù)據(jù)解決方案)
- 微信小程序?qū)W習(xí)實(shí)錄1(wxml文檔、引入weui、雙向數(shù)據(jù)綁定、提交表單到后端)
跳轉(zhuǎn)小程序：wx-open-launch-weapp
用于頁面中提供一個(gè)可跳轉(zhuǎn)指定小程序的按鈕。使用此標(biāo)簽后，用戶需在網(wǎng)頁內(nèi)點(diǎn)擊標(biāo)簽按鈕方可跳轉(zhuǎn)小程序。
官方文檔傳送門
一、環(huán)境部署
在瀏覽器環(huán)境中，調(diào)起微信小程序需要通過微信提供的開放能力來實(shí)現(xiàn)。以下是一種常見的調(diào)起微信小程序的方法：
- 首先，確保你的網(wǎng)頁中引入了微信提供的JavaScript SDK，通常為
https://res.wx.qq.com/open/js/jweixin-1.6.0.js。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 在你的網(wǎng)頁中，編寫JavaScript代碼來初始化微信JS-SDK，并檢測是否可以使用微信JS-SDK：
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-weapp']
});
wx.ready(function () {
// 在微信JS-SDK準(zhǔn)備就緒后，可以調(diào)用微信相關(guān)的功能
});
wx.error(function (res) {
// 如果初始化失敗，可以在這里處理錯(cuò)誤
});
- 配置微信平臺(tái)的網(wǎng)頁授權(quán)域名。在微信公眾平臺(tái)的小程序設(shè)置中，找到"開發(fā)-開發(fā)設(shè)置"，將你的網(wǎng)站域名添加到"網(wǎng)頁授權(quán)域名"中，保存設(shè)置。
二、打開小程序
要實(shí)現(xiàn)點(diǎn)擊鏈接或按鈕進(jìn)行跳轉(zhuǎn)到小程序，你可以在HTML中添加一個(gè)鏈接或按鈕元素，并通過事件監(jiān)聽器（如點(diǎn)擊事件）來觸發(fā)打開小程序的邏輯。以下是示例代碼：
JavaScript：
<wx-open-launch-weapp
id="launch-btn"
username="gh_****"
path="pages/index/index">
<script type="text/wxtag-template">
<button style="display: inline-block;padding: 12px;width: 200px;height: 40px;">打開小程序</button>
</script>
</wx-open-launch-weapp>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
三、避坑指南
1.noPermissionJsApi
調(diào)試發(fā)現(xiàn)，ios彈出提示 { “noPermissionJsApi”: [], “errMsg”: “config:ok” } 就是配置成功。
- PC端微信瀏覽器環(huán)境
- IOS端微信瀏覽器環(huán)境
常見情況： - 直接在微信聊天里輸入一個(gè)url ，點(diǎn)鏈接的時(shí)候會(huì)有noPermissionJsApi問題。
- 當(dāng)你掃一掃進(jìn)入或者直接點(diǎn)微信官方分享的鏈接進(jìn)入或者點(diǎn)公眾號(hào)底部的菜單進(jìn)入，是沒有問題的
- 官方?jīng)]有明確說明，猜測應(yīng)該是微信對(duì)外鏈不確定鏈接的一種保護(hù)機(jī)制。
2.JS文件的引入版本
http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問時(shí)，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）；
微信開放標(biāo)簽版本一定要是1.6.0的
3. jsApiList[]
必填，需要使用的JS接口列表，這個(gè)地方必須至少寫一個(gè)，即使你一個(gè)都不想用。
4.wx-open-launch-weapp 按鈕不顯示
wx-open-launch-weapp按鈕不顯示的解決方案五花八門。在本案例中，是因?yàn)槎丝趯戝e(cuò)了,直接復(fù)制了官方文檔的wx-open-launch-app。文章來源：http://www.zghlxwxcb.cn/news/detail-758479.html
openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
@漏刻有時(shí)文章來源地址http://www.zghlxwxcb.cn/news/detail-758479.html
到了這里，關(guān)于微信小程序?qū)W習(xí)實(shí)錄8：H5網(wǎng)頁跳轉(zhuǎn)小程序(微信開放標(biāo)簽、wx-open-launch-weapp按鈕不顯示、noPermissionJsApi)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
