H5跳轉小程式頁面/wx-open-launch-weapp/

外部的H5已經可以跳轉小程式啦，也可以跳轉app啦，讓我們一起學習一下吧！
🙂🙂🙂

重要重要重要

我們撰寫的H5頁面一定要放在服務器上，不然看不見效果！！！
這個必須是微信瀏覽器訪問！！！
此功能的開放物件：
已認證的服務號，服務號系結“JS介面安全域名”下的網頁可使用此標簽跳轉任意合法合規的小程式，
已認證的非個人主體的小程式，使用小程式云開發的靜態網站托管系結的域名下的網頁，可以使用此標簽跳轉任意合法合規的小程式，
官方檔案：微信官方檔案：開放標簽wx-open-launch-weapp的使用

第一步

我們按照檔案的意思先引入
1.js檔案，必須是1.6版本及以上：<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2.我們的配置資訊：提示：這里的話我們需要后端一起哦，appid可以在頁面上寫死，我們的timestamp/nonceStr/signature需要后端給傳值，jsApiList這個我們可以隨便給個js介面串列，可查看：js介面串列，openTagList這個是使用開放標簽串列，必填wx-open-launch-weapp；

wx.config({
  debug: true, // 開啟除錯模式,呼叫的所有api的回傳值會在客戶端alert出來，若要查看傳入的引數，可以在pc端打開，引數資訊會通過log打出，僅在pc端時才會列印
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，需要使用的JS介面串列
  openTagList: [] // 可選，需要使用的開放標簽串列，例如['wx-open-launch-app']
});

官方給的用例：
提示：username小程式的原始id，和微信小程式的id是不一樣的，微信小程式的id是WX開頭哦；path這個可以給死的路徑，就給都不是的時候跳轉頁面吧！

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打開小程式</button>
  </template>
</wx-open-launch-weapp>
<script>
  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>
App跳轉按鈕：

第二步

基礎的我們已經搭建好了，接下來我們就需要去配置一些資訊啦，這一步我們按照文本來就行；

第三步

我們呼叫后端介面把頁面完整，如圖：

$(function () {
				//=== 這里僅僅是獲取 config 的引數以及簽名=== start
				$.ajax({
					url: "#介面的地址",
					type: "請求方式",
					contentType: 'application/json;charSet=UTF-8',
					dataType: "json",
					data: JSON.stringify(thisurl),
					success: function (data) {
						wx.config({
							// debug: false, // 除錯時可開啟, 調通了就關啦
							appId: "#", // 必填，公眾號的唯一標識
							timestamp: data.data.timestamp, // 必填，生成簽名的時間戳
							nonceStr: data.data.noncestr, // 必填，生成簽名的隨機串
							signature: data.data.signature, // 必填，生成簽名
							jsApiList: ['getLocation',
								'onMenuShareTimeline',
								'onMenuShareAppMessage'],
							openTagList: ['wx-open-launch-weapp'],
						});
					}
				});
			});

注意哦：

1. 我們的樣式寫在插槽里面哦，盡量不要寫定位哦；
2. wx-open-launch-weapp這個是父元素，里面有個ID，可以給它設定一些定位的元素，還有就是我的按鈕在手機上一直不出來，然后我在這個父元素加上了樣式后，我的按鈕就出來啦；

第四步

你可能會遇到的錯誤，這里是我遇到的一些錯誤哦

1. 提示無效的標簽，對此，我們檢查一下：首先看簽名演算法正確嗎？有一個網站檢查演算法正確：簽名演算法檢查網站，如果正確，我們看一下我們的config里面的S是不是大寫，然后我們再看一下我們的url傳給后端進行簽名的引數是否是動態獲取的，如果不是可以用：var thisurl = { "url": window.location.href.split("#")[0] };這是去了#的，url我們只是傳給后端進行簽名的引數，我們可以隨便給一個網頁，只要是動態獲取就行；最后就是我們的appid要與后端一致，必須是我們的小程式的appid哦；如果還不行的話，那就是配置問題了；
2. 還有一個是白名單的問題，這個也是配置問題；

到這里你就可以實作H跳轉啦，恭喜你哦，學會了一項新技術；

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

你可能需要進行微信環境判斷

function isWeixin() {
			var ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				return true;
			} else {
				alert('請打開微信瀏覽器');
				return false;
			}``

你可能需要的得到id的方法

	//獲取url的id
		function getParams(key) {
			var result = {};
			var paramStr = encodeURI(window.document.location.search);
			if (paramStr) {
				paramStr = paramStr.substring(1);
				var params = paramStr.split('&');
				for (var p = 0; p < params.length; p++) {
					result[params[p].split('=')[0]] = unescape(params[p].split('=')[1]);
				}
			}
			return result[key];
		}

你可能需要對多條頁面進行判斷，然后跳一個具體的頁面

//定義你的陣列，這里多條資料：{path：###，id:###}
var pathParams = [];
	//這里我們獲取到當前的url，因為我們訪問路徑后有帶引數，這個引數就是ID=什么，所以我們可以使用上面得到id的方法去得到當前url的id
	var thispath = window.location.href;
	//indexof的方法大家可以去看看
	if (thispath.indexOf('id') < 0) {
		//沒有id的時候跳什么地方
	} else {
		//這里是我們定義我們的跳轉路徑，因為上面是寫死的
		var paths =document.getElementById("launch-btn").getAttribute("path");
		//我們找到它的id
		var id = getParams('id');
		//進行對比
		//filter 過濾到滿足條件的  回傳一個陣列  
		let data=pathParams.filter(e=>e.id==id);
		//判斷一下陣列是否存在資料  如果存在 跳轉到指定頁面
		if(data.length>0){ 
			$(function(){
					path=data[0].path+"?id="+data[0].id;
					//替換
					document.getElementById("launch-btn").setAttribute("path",path);
			})
		}else{
			//有id沒有匹配到的時候
		}
		//注意這個getAttribute，和setAttribute可以去官方看看怎么使用哦

到這里我們的H5跳轉小程式就比較完善啦
在不是微信環境的時候會給到提示請打開我們的微信瀏覽器，可以跳到具體頁面；
哈哈，這是我的經歷啦，代碼就不全部展示啦，大家一定要想一想再撰寫哦，不要復制！！！這樣子才可以進步哦！！！
如果你遇到了問題也可以在下面評論哦，看到會回復你的
加油啦~
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
祝大家圣誕節快樂哦?