喜大普奔，微信終於支持外網打開小程序啦！

前言

千呼萬喚始出來，微信小程序終於支持以URL Scheme的形式從外部喚起了。

long long ago~ 我們只能在微信內的網頁中使用微信開發標簽-小程序跳轉按鈕 <wx-open-launch-weapp>打開小程序，只有這樣一種單一的場景。

而在實際的業務中，我們希望在給用戶發送的營銷短信、郵件或其他渠道如APP打開小程序，以快速獲取用戶流量，完成引流、導購等目的。

他來啦，他來啦，微信小程序悄咪咪的上線了新功能：支持URL Scheme打開小程序了。

新品上線

URL Scheme打開小程序新品上線，速來嘗鮮。

可以隨着胡哥的角度為你一一闡述、總結分析，也可以直接點擊官方文檔傳送門查看官方文檔呦~

我們首先來看下目前微信官方提供的兩種打開微信小程序的方式以及相關適用場景。

打開方式	適用場景	場景值	使用方式	備注
URL Scheme	短信、郵件、微信外網頁打開小程序	1065	location.href = 'weixin://dl/business/?t= *TICKET*'	TICKET由服務端接口返回
<wx-open-launch-weapp>	微信內網頁	1167	頁面配置<wx-open-launch-weapp>標簽	需配置JS接口域名或雲開發靜態網站托管綁定的域名下網頁

一定要注意區分兩種方式的適用場景：URL scheme是適用於微信外網頁，<wx-open-launch-weapp>
是適用於微信內的。

小程序URL Scheme的獲取

小程序的URL Scheme的結構為 weixin://dl/business/?t= *TICKET*，其中TICKET由服務端接口返回的。服務端接口區分兩種形式：HTTPS調用和雲開發調用。

一、HTTPS調用

1. 獲取ACCESS_TOKEN

   請求地址：

   GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
   

   對應的APPID和APPSECRET換成自己對應的小程序即可。

   返回的數據結構如下：

   {
   	"access_token": "ACCESS_TOKEN",
   	"expires_in": 7200
   }
   

2. 獲取URL Scheme

   請求地址：

   POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
   

   請求參數：

   屬性	類型	默認值	必填	說明
   access_token	string		是	接口調用憑證
   jump_wxa	Object		否	跳轉到的目標小程序信息。
   is_expire	boolean	false	否	生成的scheme碼類型，到期失效：true，永久有效：false。
   expire_time	number		否	到期失效的scheme碼的失效時間，為Unix時間戳。生成的到期失效scheme碼在該時間前有效。最長有效期為1年。生成到期失效的scheme時必填。

   jump_wxa 的結構

   屬性	類型	默認值	必填	說明
   path	string		是	通過scheme碼進入的小程序頁面路徑，必須是已經發布的小程序存在的頁面，不可攜帶query。path為空時會跳轉小程序主頁。
   query	string		是	通過scheme碼進入小程序時的query，最大128個字符，只支持數字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

   請求示例：

   {
   	"jump_wxa": {
   		"path": "/pages/index/index",
   		query": ""
   	},
   	"is_expire": true,
   	"expire_time": 1606737600
   }
   

   返回結果：

   {
   	"errcode": 0,
   	"errmsg": "ok",
   	"openlink": Scheme,
   }
   

   openlink就是我們最終需要的URL Scheme啦~

二、雲調用

雲調用是小程序·雲開發提供的在雲函數中調用微信開放接口的能力，需要在雲函數中通過 wx-server-sdk 使用

請求參數：

屬性	類型	默認值	必填	說明
access_token	string		是	接口調用憑證
jump_wxa	Object		否	跳轉到的目標小程序信息。
isExpire	boolean	false	否	生成的scheme碼類型，到期失效：true，永久有效：false。
expireTime	number		否	到期失效的scheme碼的失效時間，為Unix時間戳。生成的到期失效scheme碼在該時間前有效。最長有效期為1年。生成到期失效的scheme時必填。

注意和HTTPS中參數名大小寫不一致的情況

jump_wxa 的結構

屬性	類型	默認值	必填	說明
path	string		是	通過scheme碼進入的小程序頁面路徑，必須是已經發布的小程序存在的頁面，不可攜帶query。path為空時會跳轉小程序主頁。
query	string		是	通過scheme碼進入小程序時的query，最大128個字符，只支持數字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

請求示例：

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.urlscheme.generate({
        jumpWxa: {
          path: '/pages/index/index',
          query: ''
        },
        isExpire: true,
        expireTime: 1606737600
      })
    return result
  } catch (err) {
    return err
  }
}

返回結果：

{
	"errcode": 0,
	"errmsg": "ok",
	"openlink": Scheme,
}

openlink就是我們最終需要的URL Scheme啦~

小程序URL Scheme的使用

小程序URL Scheme的結構是：weixin://dl/business/?t= *TICKET*，那我們拿到這個scheme之后如果使用呢。

在IOS系統下是支持直接識別URL Scheme的，所以可以直接將URL Scheme發送到短信、郵件中，提供給用戶使用。但是在Android系統不支持直接識別URL Scheme，用戶無法Scheme正常打開小程序，所以需要開發者自行使用H5頁面進行中轉，再跳轉使用Scheme方式打開微信小程序。

端	使用方式	備注
Android	location.href='weixin://dl/business/?t= *TICKET*'	只有一種方式
IOS	直接識別URL Scheme 或使用location.href方式	兩種方式

But, 我們要注意一個問題，當我們進行短信觸達時，無法確定用戶所使用的的手機設備是IOS還是Android，

So, 我們從實際的業務觸發，都需要一個H5頁面進行中轉處理。

小程序喚起業務流程圖

當當當，綜合兩種打開小程序的方式（URL Scheme和 <wx-open-launch-weapp>），完整版的小程序喚起業務流程圖來啦~

后記

以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得點贊、收藏呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...

胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！