欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5頁面打開微信小程序功能實(shí)現(xiàn)

  發(fā)布時(shí)間：2022-09-20 15:41:49   作者：前端開發(fā)-阿鋒   我要評(píng)論
這篇文章主要介紹了HTML5頁面打開微信小程序功能，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

微信終于支持由頁面跳轉(zhuǎn)至小程序啦 ~

步驟一：綁定域名

登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

步驟二：引入JS文件

在需要調(diào)用JS接口的頁面引入如下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）

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載。

步驟三：通過config接口注入權(quán)限驗(yàn)證配置并申請(qǐng)所需開放標(biāo)簽

與使用JS-SDK配置方式相同，所有需要使用開放標(biāo)簽的頁面必須先注入配置信息，并通過openTagList字段申請(qǐng)所需要的開放標(biāo)簽，否則將無法使用（同一個(gè)url僅需調(diào)用一次）。開放標(biāo)簽的申請(qǐng)和JS接口的申請(qǐng)相互獨(dú)立，因此是可以同時(shí)申請(qǐng)的。

微信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-app']
});

在wx.config下面多了一項(xiàng)openTagList，開放標(biāo)簽列表，目前支持配置wx-open-launch-weapp，wx-open-launch-app。

簽名算法見JS-SDK說明文檔的附錄1，所有開放標(biāo)簽列表見文末的附錄1。

步驟四：通過ready接口處理成功驗(yàn)證

wx.ready(function () {
  // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
});

步驟五：通過error接口處理失敗驗(yàn)證

wx.error(function (res) {
  // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名
});

小程序跳轉(zhuǎn)按鈕：<wx-open-launch-weapp>

用于頁面中提供一個(gè)可跳轉(zhuǎn)指定小程序的按鈕。使用此標(biāo)簽后，用戶需在網(wǎng)頁內(nèi)點(diǎn)擊標(biāo)簽按鈕方可跳轉(zhuǎn)小程序。H5 通過開放標(biāo)簽打開小程序的場(chǎng)景值為 1167.
此功能的開放對(duì)象：

  • 已認(rèn)證的服務(wù)號(hào)，服務(wù)號(hào)綁定“JS接口安全域名”下的網(wǎng)頁可使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
  • 已認(rèn)證的非個(gè)人主體的小程序，使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁，可以使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。

錯(cuò)誤提示

若跳轉(zhuǎn)時(shí)出現(xiàn)以下頁面，表示網(wǎng)頁綁定的服務(wù)號(hào)或小程序無權(quán)限，請(qǐng)檢查是否符合上述開放對(duì)象條件。

注意事項(xiàng)( 按鈕不顯示、點(diǎn)擊按鈕沒反應(yīng)，請(qǐng)對(duì)照以下事項(xiàng)逐一排查 )

  1. username為小程序原始ID。
  2. path為跳轉(zhuǎn)至小程序的路徑，一定要加后綴.html。還能攜帶參數(shù)，在微信小程序中通過 onLoad的 options接收。(代碼如下)
  3. <wx-open-launch-weapp>中必須用<template>標(biāo)簽包裹。
  4. config配置中一定要加入openTagList: ['wx-open-launch-weapp']。
  5. 微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上。
  6. 引入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, // 是否開啟調(diào)試模式
			appId:'', // 必填，公眾號(hào)的唯一標(biāo)識(shí)    
			timestamp: , // 必填，生成簽名的時(shí)間戳
			nonceStr: '', // 必填，生成簽名的隨機(jī)串
			signature: '',// 必填，簽名
			jsApiList:['openLocation'], // 必填，需要使用的JS接口列表
			openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
		}); 
		
		wx.ready(function () {
		  // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
		});
		
		wx.error(function (res) {
		  // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開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頁面打開微信小程序的文章就介紹到這了,更多相關(guān)h5微信小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論