微信公眾號開發之H5頁面跳轉到指定的小程式

追逐時光者發表於2021-10-14
H5

前言：

　　最近公司有一個這樣的需要，需要從我們在現有的公眾號H5頁面中加一個跳轉到第三方小程式的按鈕。之前只知道小程式之間是可以相互跳轉的，今天查閱了下微信開發文件原來現在H5網頁也支援小程式之間的跳轉了，下面就簡單描述一下對接的流程。

微信公眾號詳細對接文件：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

公眾號關聯小程式：

注意：在對接跳轉之前我們需要在需要跳轉的小程式關聯到我們的公眾號中。公眾號可以關聯同一主體的小程式10個，不同主體的3個。

1、進入公眾號後臺，路徑：廣告與服務——小程式—小程式管理—新增

2、關聯小程式—管理員微信掃碼確認

3、搜尋小程式名稱或APPID繫結

4、繫結成功等待小程式管理者同意

檢視小程式原始id：

小程式原始id，即小程式對應的以gh_開頭的id

找到關聯成功的小程式，滑鼠放入其中找到詳情檢視小程式原始id

 

繫結JS介面安全域名：

登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。

 

微信JS-SDK的使用步驟，配置資訊生成詳細說明（.NET版）：

https://www.cnblogs.com/Can-daydayup/p/11124092.html

跳轉標籤、前提條件和屬性說明：

跳轉小程式：wx-open-launch-weapp

用於頁面中提供一個可跳轉指定小程式的按鈕。使用此標籤後，使用者需在網頁內點選標籤按鈕方可跳轉小程式。H5通過開放標籤開啟小程式的場景值為1167。

開放物件

  1. 已認證的服務號，服務號繫結“JS介面安全域名”下的網頁可使用此標籤跳轉任意合法合規的小程式。
  2. 已認證的非個人主體的小程式，使用小程式雲開發的靜態網站託管繫結的域名下的網頁，可以使用此標籤跳轉任意合法合規的小程式。

錯誤提示

若跳轉時出現以下頁面，表示網頁繫結的服務號或小程式無許可權，請檢查是否符合上述開放物件條件。

無許可權提示

屬性

名稱必填預設值備註
username 是   所需跳轉的小程式原始id，即小程式對應的以gh_開頭的id
path 否   所需跳轉的小程式內頁面路徑及引數（不填寫的話預設跳轉小程式首頁）

 

程式碼實現：

注意：使用瀏覽器或者微信開發工具除錯wx-open-launch-weapp開發標籤都不會顯示，只有在真機中才會有效果（前提還是config介面注入許可權驗證配置通過）。

<html>

<head>
    <title>H5開啟小程式</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
</head>

<body>
    <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
    <script type="text/wxtag-template">
      <style>.btn { padding: 12px }</style>
      <button class="btn">開啟小程式</button>
    </script>
    </wx-open-launch-weapp>


    <!-- 公眾號 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    <!--js程式碼-->
    <script type="text/javascript">

        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });

        wx.ready(function () {
            var ua = navigator.userAgent.toLowerCase()
            var isWXWork = ua.match(/wxwork/i) == 'wxwork'
            var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'

            if (isWeixin) {
                wx.config({
                    //debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印
                    appId: 'ccccxxxx4354353453', // 必填，公眾號的唯一標識
                    timestamp: 0123456, // 必填，生成簽名的時間戳
                    nonceStr: 'nonceStr', // 必填，填任意非空字串即可
                    signature: 'signature', // 必填，填任意非空字串即可
                    jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填，隨意一個介面即可   
                    openTagList: ['wx-open-launch-weapp'], // 填入開啟小程式的開放標籤名  
                })
            }
            else {
                alert("請在微信中開啟");
            }
        })

    </script>
</body>

</html>

實現效果：

 

相關文章