HTML5頁面打開微信小程序功能實現(xiàn)
我要評論微信終于支持由頁面跳轉至小程序啦 ~
步驟一：綁定域名
登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
步驟二：引入JS文件
在需要調用JS接口的頁面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）
如需進一步提升服務穩(wěn)定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）
備注：支持使用 AMD/CMD 標準模塊加載方法加載。
步驟三：通過config接口注入權限驗證配置并申請所需開放標簽
與使用JS-SDK配置方式相同，所有需要使用開放標簽的頁面必須先注入配置信息，并通過openTagList字段申請所需要的開放標簽，否則將無法使用（同一個url僅需調用一次）。開放標簽的申請和JS接口的申請相互獨立，因此是可以同時申請的。
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
});
在wx.config下面多了一項openTagList，開放標簽列表，目前支持配置wx-open-launch-weapp，wx-open-launch-app。
簽名算法見JS-SDK說明文檔的附錄1，所有開放標簽列表見文末的附錄1。
步驟四：通過ready接口處理成功驗證
wx.ready(function () {
// config信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口，則可以直接調用，不需要放在ready函數(shù)中
});
步驟五：通過error接口處理失敗驗證
wx.error(function (res) {
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名
});
小程序跳轉按鈕：<wx-open-launch-weapp>
用于頁面中提供一個可跳轉指定小程序的按鈕。使用此標簽后，用戶需在網(wǎng)頁內點擊標簽按鈕方可跳轉小程序。H5 通過開放標簽打開小程序的場景值為 1167.
此功能的開放對象：
- 已認證的服務號，服務號綁定“JS接口安全域名”下的網(wǎng)頁可使用此標簽跳轉任意合法合規(guī)的小程序。
- 已認證的非個人主體的小程序，使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁，可以使用此標簽跳轉任意合法合規(guī)的小程序。
錯誤提示
若跳轉時出現(xiàn)以下頁面，表示網(wǎng)頁綁定的服務號或小程序無權限，請檢查是否符合上述開放對象條件。
注意事項( 按鈕不顯示、點擊按鈕沒反應，請對照以下事項逐一排查 )
username為小程序原始ID。path為跳轉至小程序的路徑，一定要加后綴.html。還能攜帶參數(shù)，在微信小程序中通過onLoad的options接收。(代碼如下)<wx-open-launch-weapp>中必須用<template>標簽包裹。- 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">打開</button>
</template>
</wx-open-launch-weapp>
<script type="text/javascript">
wx.config({
debug:false, // 是否開啟調試模式
appId:'', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList:['openLocation'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
});
wx.ready(function () {
// config信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口，則可以直接調用，不需要放在ready函數(shù)中
});
wx.error(function (res) {
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于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跳轉小程序按鈕：<wx-open-launch-app>
到此這篇關于HTML5頁面打開微信小程序的文章就介紹到這了,更多相關h5微信小程序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
iPhoneX安全區(qū)域(Safe Area)底部小黑條在微信小程序和H5的屏幕適配
這篇文章主要介紹了iPhoneX安全區(qū)域(Safe Area)底部小黑條在微信小程序和H5的屏幕適配,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需2020-04-08
