這是一個從H5跳轉到第三方小程序的功能。

一? ?第一個注意點，要知道你要跳轉的第三方小程序原始ID一般是gh_開頭的，有了這個id就能跳轉到第三方小程序公共界面。

二? ?第二個注意點，這個跳轉標簽的path地址一定一定一定要提前準備好，因為假如你要跳轉到小程序里具體某個用戶那如果不提前準備好跳轉地址拼上用戶信息，而是等點擊跳轉按鈕再獲取跳轉地址拼上用戶信息那你是無法準確跳到準確的用戶那的。? ? ? ? ? 暫時的理解是點擊跳轉的一瞬間就已經跳過去了，這時候手機會出現個彈窗這個彈窗綁定不了任何事件，只能做是否具體跳轉攔截處理。如果在跳轉綁定獲取地址拼用戶信息接口始終慢跳轉一步，? ? ? ? ? ? ? 總結一句話就是不能同時獲取跳轉地址拼用戶信息再跳轉到小程序具體某一用戶

? ? ? ? ? ? ? ? ? ? <wx-open-launch-weapp id="doc-launch-btn" username="gh_95xxxxxxxx" ?:path="path" @launch="handleLaunchFn">
? ? ? ? ? ? ? ? ? ? ? ? <script type="text/wxtag-template">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <style>.btn { ? width: 100%;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-family: PingFangSC-Medium, PingFang SC;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-weight: 600;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: #14B5B0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height: 46px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border: 0px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background: #FFFFFF;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }</style>
? ? ? ? ? ? ? ? ? ? ? ? <button ?type='primary' class="btn">立即使用</button>
? ? ? ? ? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? ? ? ? ? </wx-open-launch-weapp>

使用標簽前封裝的配置代碼

第一個? ?jssdkSignTest.js文件

(function () {
? ? var _sino = window.hmt = {};
? ? // let url // 微信jsdkSign待簽名url;
? ? const serverPath =? ?'域名'; //jssdkSign服務器地址;
? ? // _sino.callbackWX // 回調函數
? ? window.jssdkSign = function (url, callback) {
? ? ? ? this.url = url;
? ? ? ? _sino.callbackWX = callback;
? ? ? ? getJssdk(url);
? ? };

? ? function getJssdk (url) {
? ? ? ? // 加載jssdk信息;
? ? ? ? var scriptJssdk = document.createElement('script');
? ? ? ? try {
? ? ? ? ? ? scriptJssdk.src = serverPath + '/jssdkSign.json?url=' + url + '&callback=hmt.callbackWX';
? ? ? ? ? ? document.head.appendChild(scriptJssdk);
? ? ? ? } catch (e) {
? ? ? ? ? ? console.log(e);
? ? ? ? }
? ? }
})();

第二個配置wxfig.js文件

export function initWxConfig () {
? ? const url = encodeURIComponent(window.location.href.split('#')[0]);
? ? // console.log(sessionStorage.getItem('wxInfo'));
? ? window.jssdkSign(url, function (res) {
? ? ? ? // console.log(wx, 'wx');
? ? ? ? // localStorage.setItem('wxInfo', JSON.stringify(res));
? ? ? ? wx.config({
? ? ? ? ? ? debug: false,
? ? ? ? ? ? appId: res.appId,
? ? ? ? ? ? timestamp: res.timestamp,
? ? ? ? ? ? nonceStr: res.noncestr,
? ? ? ? ? ? signature: res.signature,
? ? ? ? ? ? jsApiList: [
? ? ? ? ? ? ? ? 'hideOptionMenu',
? ? ? ? ? ? ? ? 'showOptionMenu'
? ? ? ? ? ? ],
? ? ? ? ? ? openTagList: ['wx-open-launch-weapp']
? ? ? ? });
? ? ? ? wx.error(function (res) {
? ? ? ? ? ? console.log('微信簽名錯誤進入', res.errMsg);
? ? ? ? });
? ? ? ? wx.ready(function () {
? ? ? ? ? ? // console.log('ready');
? ? ? ? });
? ? });
};

哪個頁面使用的時候只需要在使用頁面 import initWxConfig from 'wxfig.js'然后mounted里initWxConfig（）即可。

總結

以上是生活随笔為你收集整理的H5跳转微信小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。