外部的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'],
});
}
});
});
注意哦：
- 我們的樣式寫在插槽裏面哦，儘量不要寫定位哦；
- wx-open-launch-weapp這個是父元素，裏面有個ID，可以給它設置一些定位的元素，還有就是我的按鈕在手機上一直不出來，然後我在這個父元素加上了樣式後，我的按鈕就出來啦；
第四步
你可能會遇到的錯誤，這裏是我遇到的一些錯誤哦
- 提示無效的標籤，對此，我們檢查一下：首先看簽名算法正確嗎？有一個網站檢查算法正確：簽名算法檢查網站，如果正確，我們看一下我們的config裏面的S是不是大寫，然後我們再看一下我們的url傳給後端進行簽名的參數是否是動態獲取的，如果不是可以用：
var thisurl = { "url": window.location.href.split("#")[0] };這是去了#的，url我們只是傳給後端進行簽名的參數，我們可以隨便給一個網頁，只要是動態獲取就行；最後就是我們的appid要與後端一致，必須是我們的小程序的appid哦；如果還不行的話，那就是配置問題了； - 還有一個是白名單的問題，這個也是配置問題；
到這裏你就可以實現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跳轉小程序就比較完善啦
在不是微信環境的時候會給到提示請打開我們的微信瀏覽器，可以跳到具體頁面；
哈哈，這是我的經歷啦，代碼就不全部展示啦，大家一定要想一想再編寫哦，不要複製！！！這樣子纔可以進步哦！！！
如果你遇到了問題也可以在下面評論哦，看到會回覆你的
加油啦~
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
祝大家聖誕節快樂哦✨