微信官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/framework/
一、 添加js安全域名（公眾號必須為已認(rèn)證的服務(wù)號）
將頁面域名添加到JS接口安全域名中
在微信公眾號后臺(tái)->設(shè)置與開發(fā)->公眾號設(shè)置->功能設(shè)置->JS接口安全域名
下載校驗(yàn)文件，將文件上傳至填寫域名或路徑指向的web服務(wù)器（或虛擬主機(jī)）的目錄（若填寫域名，將文件放置在域名根目錄下，例如wx.qq.com/****.txt；若填寫路徑，將文件放置在路徑目錄下，例如wx.qq.com/mp/****.txt），并確保可以訪問，然后提交添加安全域名。
二、使用開放標(biāo)簽wx-open-launch-weapp（具體以微信官方文檔為準(zhǔn)）
1、引入 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）
2、生成簽名
①、獲取access_token（有效期7200秒，開發(fā)者必須在自己的服務(wù)全局緩存access_token）
②、用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket）
③、生成 JS-SDK 權(quán)限驗(yàn)證的簽名
wx.config({
debug: false, //開啟調(diào)試模式,調(diào)用的所有 api 的返回值會(huì)在客戶端 alert 出來，若要查看傳入的參數(shù)，可以在 pc 端打開，參數(shù)信息會(huì)通過 log 打出，僅在 pc 端時(shí)才會(huì)打印。
appId: **, // 必填，公眾號的唯一標(biāo)識(shí)
timestamp:**, //必填，生成簽名的時(shí)間戳
nonceStr: **, //必填，生成簽名的隨機(jī)串
signature:**, //必填，簽名
jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的 JS 接口列表
openTagList: ['wx-open-launch-weapp'], //選填，需要使用的開放標(biāo)簽
})
3、調(diào)試
可以使用微信開發(fā)者工具調(diào)試，如果控制臺(tái)出現(xiàn)wx.config end中errmsg為cionfig:ok說明簽名成功。
此時(shí)就可以使用微信開放標(biāo)簽：wx-open-launch-weapp跳轉(zhuǎn)指定小程序（已認(rèn)證的非個(gè)人主體的小程序）。
注意：只能用戶主動(dòng)點(diǎn)擊該標(biāo)簽才生效。
4、wx-open-launch-weapp標(biāo)簽的用法（vue3）
在vue3里，script是不可以直接植入template里面的，會(huì)報(bào)錯(cuò) VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates. 。解決辦法是通過 v-is 進(jìn)行繞過：使用 <div v-is="'script'" type="text/wxtag-template">以替代<script>。
<div class="btn_content">
<div class="normal_btn buy_info">打開小程序</div>
<div class="buy_info" v-if="isReady">
<wx-open-launch-weapp
ref="launch_btn"
username="gh_****"http://必填，小程序原始id
path="**"http://選填，要打開的小程序的地址，默認(rèn)為首頁
style="position:absolute;left:0;top:0;width:100%;height:100%;"
@ready=“onReady”//當(dāng)標(biāo)簽可用時(shí)的回調(diào)
>
<div v-is="'script'" type="text/wxtag-template">
<div style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
</div>
</wx-open-launch-weapp>
</div>
</div>
<script setup>
const isReady=ref(false)
function onReady(){
isReady.value=true
}
</script>
.btn_content {
position: relative;
width: 286px;
height: 74px;
margin: 0 auto;
overflow: hidden;
}
.buy_info {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 40px;
font-weight: normal;
margin-bottom: 20px;
}
點(diǎn)擊按鈕出現(xiàn)即將打開小程序的提示彈窗，說明接入成功
三、擴(kuò)展
1、H5頁面直接打開小程序的其他方式
2、微信分享
wx.ready(function () { //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
wx.updateAppMessageShareData({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號 JS 安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function () {
// 設(shè)置成功
}
})});
注意：只有從公眾號菜單中打開的頁面才能正常使用分享功能，如果是直接訪問連接的形式，分享出來的還是連接的形式。
