盤點與業務轉化息息相關的小程式能力（二）

比亞的答案發表於2023-12-19

小程式跳轉內外部的能力在日常開發中用得非常多，上週為大家分享了小程式跳轉到外部的一系列能力，本週繼續為大家分享外部跳回小程式的能力。場景和實現方式不一定完全，也歡迎大家補充。

外部跳轉小程式功能列表：

  • 簡訊跳轉小程式
  • 公眾號跳轉小程式
  • H5連結跳小程式
  • APP 跳轉到小程式
  • 小程式跳小程式

簡訊跳轉小程式

簡訊、郵件跳轉到小程式的能力是微信官方提供的，主要是是透過 URL Scheme 的方式來拉起微信開啟主體小程式。

主要實現分為兩個步驟，「配置拉起網頁」和「傳送簡訊」。

簡單步驟如下：

  1. 登入微信公眾平臺，並進入小程式管理頁面。
  2. 在小程式管理頁面，進入“開發”-“開發設定”頁面。
  3. 在“開發設定”頁面中，找到“認證與服務”一欄，然後點選“網頁授權域名”後的“修改”按鈕，輸入要跳轉的連結域名，進行授權。
  4.  在簡訊中新增連結，連結的格式為：微信小程式
  5. 將連結中的“【小程式頁面路徑】”替換成所需跳轉到的小程式頁面路徑即可。

參考檔案：
簡訊跳小程式（自定義開發版）
雲開發簡訊跳小程式（無程式碼版）

公眾號跳轉小程式

公眾號跳轉小程式有以下兩種方法：在公眾號文章中新增小程式卡片，使用者點選卡片即可跳轉到小程式。

具體步驟如下：

  • 在小程式管理後臺中，進入“設定”-“基本設定”-“關聯的公眾號”，將小程式與公眾號進行關聯。
  • 在公眾號文章編輯頁面，選擇“小程式”-“新增小程式卡片”，選擇要跳轉的小程式並設定卡片樣式。
  • 釋出文章後，使用者點選小程式卡片即可跳轉到小程式。

在小程式中新增公眾號文章連結或二維碼，使用者掃描二維碼或點選連結即可跳轉到公眾號文章。具體步驟如下：

  • 在公眾號中釋出文章，並獲取文章連結或二維碼。
  • 在小程式中新增“web-view”元件，將文章連結或二維碼作為“url”屬性的值。
  • 釋出小程式後，使用者點選“web-view”元件即可跳轉到公眾號文章。

H5連結跳小程式

開放標籤

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

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

開放物件

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


程式碼用例

<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>
<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>


靜態網站H5跳小程式

非個人主體並且已認證的（微信認證） 小程式，使用雲開發 靜態網站託管的網頁，可以免鑑權跳轉任意合法合規的小程式。即可以在微信內部瀏覽器的 H5 跳轉小程式，也可以在微信外部瀏覽器或其他部分 App （如企業微信、QQ 等）跳轉微信小程式。 參考連結

參考連結

App跳轉小程式有兩種方式

微信 OpenSDK 提供了APP拉起小程式功能。使用者可以在 APP 中跳轉至微信某一小程式的指定頁面，完成服務後再跳回至原 APP 。

1、App主動發起小程式卡片分享到微信

參考檔案：

APP拉起小程式功能 /Android開發示例

小程式型別分享示例：

WXMiniProgramObject miniProgramObj =  new  WXMiniProgramObject();
miniProgramObj.webpageUrl =  " http://www.qq.com" ; // 相容低版本的網頁連結
miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPTOGRAM_TYPE_RELEASE; // 正式版:0，測試版:1，體驗版:2
miniProgramObj.userName =  "gh_d43f693ca31f" ;      // 小程式原始id
miniProgramObj.path =  "/pages/media" ;             //小程式頁面路徑；對於小遊戲，可以只傳入 query 部分，來實現傳參效果，如：傳入 "?foo=bar"
WXMediaMessage msg =  new  WXMediaMessage(miniProgramObj);
msg.title =  "小程式訊息Title" ;                     // 小程式訊息title
msg.description =  "小程式訊息Desc" ;                // 小程式訊息desc
msg.thumbData = getThumb();                       // 小程式訊息封面圖片，小於128k
 
SendMessageToWX.Req req =  new  SendMessageToWX.Req();
req.transaction = buildTransaction( "miniProgram" );
req.message = msg;
req.scene = SendMessageToWX.Req.WXSceneSession;   // 目前只支援會話
api.sendReq(req);


2、App主動發起開啟小程式

參考檔案：

分享與收藏功能 /Android開發手冊

APP拉起小程式功能 /Android開發示例

小程式型別分享示例

String appId =  "wxd930ea5d5a258f4f" ;  // 填應用AppId
IWXAPI api = WXAPIFactory.createWXAPI(context, appId);
 
WXLaunchMiniProgram.Req req =  new  WXLaunchMiniProgram.Req();
req.userName =  "gh_d43f693ca31f" ;  // 填小程式原始id
req.path = path;                   ////拉起小程式頁面的可帶參路徑，不填預設拉起小程式首頁，對於小遊戲，可以只傳入 query 部分，來實現傳參效果，如：傳入 "?foo=bar"。
req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE; // 可選開啟 開發版，體驗版和正式版
api.sendReq(req);

小程式跳小程式

在小程式裡可以開啟另一個小程式，讓小程式之間可以互相連線跳轉，類似於網頁之間透過URL連結互相跳轉。

小程式之間互相跳轉，使用wx.navigateToMiniProgram來實現。

參考檔案： 開啟另一個小程式

示例程式碼：

wx.navigateToMiniProgram({
   appId:  '' ,
   path:  'page/index/index?id=123' ,
   extraData: {
     foo:  'bar'
   },
   envVersion:  'develop' ,
   success(res) {
     // 開啟成功
   }
})

以上外部跳轉小程式的功能基本都是基於宿主是微信來實現的，脫離微信小程式跳轉的能力是否可以實現呢？答案當然是可以的！技術基本都是相通的。比如，我們團隊透過內嵌FinClip  小程式容器，不僅在自己的APP裡實現了小程式的執行，也搭建了一個小程式管理的後臺，平時的營銷活動、業務應用都可以統一管理。小程式在內外部渠道間的跳轉的能力在業務落地過程中應用非常廣泛。


來自 “ ITPUB部落格 ” ，連結：https://blog.itpub.net/70017183/viewspace-3000605/，如需轉載，請註明出處，否則將追究法律責任。

相關文章