HTML5頁(yè)面打開(kāi)微信小程序功能實(shí)現(xiàn)
我要評(píng)論微信終于支持由頁(yè)面跳轉(zhuǎn)至小程序啦 ~
步驟一：綁定域名
登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。
步驟二：引入JS文件
在需要調(diào)用JS接口的頁(yè)面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）
如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)，可改訪問(wèn)：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載。
步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置并申請(qǐng)所需開(kāi)放標(biāo)簽
與使用JS-SDK配置方式相同，所有需要使用開(kāi)放標(biāo)簽的頁(yè)面必須先注入配置信息，并通過(guò)openTagList字段申請(qǐng)所需要的開(kāi)放標(biāo)簽，否則將無(wú)法使用（同一個(gè)url僅需調(diào)用一次）。開(kāi)放標(biāo)簽的申請(qǐng)和JS接口的申請(qǐng)相互獨(dú)立，因此是可以同時(shí)申請(qǐng)的。
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可選，需要使用的開(kāi)放標(biāo)簽列表，例如['wx-open-launch-app']
});
在wx.config下面多了一項(xiàng)openTagList，開(kāi)放標(biāo)簽列表，目前支持配置wx-open-launch-weapp，wx-open-launch-app。
簽名算法見(jiàn)JS-SDK說(shuō)明文檔的附錄1，所有開(kāi)放標(biāo)簽列表見(jiàn)文末的附錄1。
步驟四：通過(guò)ready接口處理成功驗(yàn)證
wx.ready(function () {
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
});
步驟五：通過(guò)error接口處理失敗驗(yàn)證
wx.error(function (res) {
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名
});
小程序跳轉(zhuǎn)按鈕：<wx-open-launch-weapp>
用于頁(yè)面中提供一個(gè)可跳轉(zhuǎn)指定小程序的按鈕。使用此標(biāo)簽后，用戶需在網(wǎng)頁(yè)內(nèi)點(diǎn)擊標(biāo)簽按鈕方可跳轉(zhuǎn)小程序。H5 通過(guò)開(kāi)放標(biāo)簽打開(kāi)小程序的場(chǎng)景值為 1167.
此功能的開(kāi)放對(duì)象：
- 已認(rèn)證的服務(wù)號(hào)，服務(wù)號(hào)綁定“JS接口安全域名”下的網(wǎng)頁(yè)可使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
- 已認(rèn)證的非個(gè)人主體的小程序，使用小程序云開(kāi)發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁(yè)，可以使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
錯(cuò)誤提示
若跳轉(zhuǎn)時(shí)出現(xiàn)以下頁(yè)面，表示網(wǎng)頁(yè)綁定的服務(wù)號(hào)或小程序無(wú)權(quán)限，請(qǐng)檢查是否符合上述開(kāi)放對(duì)象條件。
注意事項(xiàng)( 按鈕不顯示、點(diǎn)擊按鈕沒(méi)反應(yīng)，請(qǐng)對(duì)照以下事項(xiàng)逐一排查 )
username為小程序原始ID。path為跳轉(zhuǎn)至小程序的路徑，一定要加后綴.html。還能攜帶參數(shù)，在微信小程序中通過(guò)onLoad的options接收。(代碼如下)<wx-open-launch-weapp>中必須用<template>標(biāo)簽包裹。- config配置中一定要加入
openTagList: ['wx-open-launch-weapp']。 - 微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上。
- 引入js至少是1.6以上版本。
按鈕不顯示，多半是wx.config配置不正確。
正確配置如下：
完整代碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="yes" name="apple-touch-fullscreen">
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<wx-open-launch-weapp id="launch-btn" username="gh_666666666666" path="/pages/index/index.html?myid=123aaa">
<template>
<style>
.btn {
padding: 12px;
width: 200px;
height: 50px;
}
</style>
<button class="btn">打開(kāi)</button>
</template>
</wx-open-launch-weapp>
<script type="text/javascript">
wx.config({
debug:false, // 是否開(kāi)啟調(diào)試模式
appId:'', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList:['openLocation'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開(kāi)放標(biāo)簽列表，例如['wx-open-launch-app']
});
wx.ready(function () {
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
});
wx.error(function (res) {
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名
});
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>
</body>
</html>
在小程序端接收參數(shù)
onLoad: function (options) {
let myid = options.myid || '';
util.alterDialog('提示myid', myid, '確定', null);
}
其他
App跳轉(zhuǎn)小程序按鈕：<wx-open-launch-app>
到此這篇關(guān)于HTML5頁(yè)面打開(kāi)微信小程序的文章就介紹到這了,更多相關(guān)h5微信小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
iPhoneX安全區(qū)域(Safe Area)底部小黑條在微信小程序和H5的屏幕適配
這篇文章主要介紹了iPhoneX安全區(qū)域(Safe Area)底部小黑條在微信小程序和H5的屏幕適配,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需2020-04-08
