微信公眾號如何開啟關聯的小程式？

王铁柱6發表於2024-12-06

微信公眾號開啟關聯小程式，前端開發主要有以下幾種方式：

  1. 使用wx.navigateToMiniProgram API: 這是最常用的方法。 在公眾號網頁中，透過呼叫 JavaScript API wx.navigateToMiniProgram 可以直接跳轉到關聯的小程式。

    wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會透過log打出，僅在pc端時才會列印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: ['navigateToMiniProgram'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});

wx.ready(function(){
    wx.navigateToMiniProgram({
        appId: 'wxXXXXXXXXXXXX', // 目標小程式appId
        path: 'path/to/page', // 目標小程式頁面路徑
        extraData: {
            foo: 'bar' // 需要傳遞給小程式的引數
        },
        envVersion: 'develop', // 要開啟的小程式版本。正式版為 release，體驗版為 trial ，開發版為 develop
        success(res) {
            // 開啟成功
        },
        fail(res) {
            // 開啟失敗
        }
    })
});

wx.error(function(res){
    // config資訊驗證失敗會執行error函式
    console.log(res);
});

    關鍵點：

    • 配置wx.config: 必須正確配置appId、timestamp、nonceStr、signature和jsApiList。簽名演算法較為複雜，通常需要後端配合生成。
    • appId: 確保填入正確的小程式 appId。
    • path: 指定小程式的目標頁面路徑。
    • extraData: 可以傳遞引數給小程式。
    • envVersion: 指定開啟小程式的版本，方便開發除錯。
    • wx.ready 和 wx.error: 在wx.ready中呼叫wx.navigateToMiniProgram，確保 JSSDK 初始化完成。 wx.error 用於處理 JSSDK 初始化失敗的情況。

  2. 使用小程式碼: 在公眾號文章或其他地方放置小程式碼，使用者長按識別即可開啟小程式。 這種方式比較簡單，但靈活性較差，無法傳遞引數。

  3. 公眾號選單欄: 在公眾號選單欄中配置跳轉小程式的功能。 這種方式需要在微信公眾平臺後臺進行配置。

  4. 公眾號模板訊息: 在公眾號模板訊息中插入小程式卡片，使用者點選卡片即可跳轉到小程式。 這種方式需要在傳送模板訊息時配置小程式引數。

  5. 公眾號文章內連結: 在公眾號文章中插入小程式連結，使用者點選連結即可跳轉到小程式。 這種方式需要在編輯文章時插入特定的連結格式。

前端開發主要負責第一種方式，即透過wx.navigateToMiniProgram API 進行跳轉。其他方式需要配合後端或公眾號運營人員進行配置。 記住，為了使用者體驗，最好提供多種跳轉方式，例如在無法呼叫 JS API 的情況下，提供備用的小程式碼。

相關文章