喜大普奔，微信終於支援外網開啟小程式啦！

胡哥有話說發表於2021-02-03

前言

千呼萬喚始出來，微信小程式終於支援以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>），完整版的小程式喚起業務流程圖來啦~

file

後記

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

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

相關文章