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

前言

千呼萬喚始出來，微信小程序終於支持以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調用和雲開發調用。

1、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啦~

2、雲調用

雲調用是小程序·雲開發提供的在雲函數中調用微信開放接口的能力，須要在雲函數中經過 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>），完整版的小程序喚起業務流程圖來啦~

小程序喚起業務流程圖

後記

本文分享自微信公衆號 - 前端壹棧（Ecmscript）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。