又來需求了:微信支持外網打開小程序!

2021-02-25 小生方勤


前言

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

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

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

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

新品上線

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

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

打開方式適用場景場景值使用方式備註URL Scheme簡訊、郵件、微信外網頁打開小程序1065location.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調用

獲取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
}

獲取URL Scheme

請求地址:

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

請求參數:

屬性類型默認值必填說明access_tokenstring
是接口調用憑證jump_wxaObject
否跳轉到的目標小程序信息。is_expirebooleanfalse否生成的scheme碼類型,到期失效:true,永久有效:false。expire_timenumber
否到期失效的scheme碼的失效時間,為Unix時間戳。生成的到期失效scheme碼在該時間前有效。最長有效期為1年。生成到期失效的scheme時必填。

jump_wxa 的結構

屬性類型默認值必填說明pathstring
是通過scheme碼進入的小程序頁面路徑,必須是已經發布的小程序存在的頁面,不可攜帶query。path為空時會跳轉小程序主頁。querystring
是通過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_tokenstring
是接口調用憑證jump_wxaObject
否跳轉到的目標小程序信息。isExpirebooleanfalse否生成的scheme碼類型,到期失效:true,永久有效:false。expireTimenumber
否到期失效的scheme碼的失效時間,為Unix時間戳。生成的到期失效scheme碼在該時間前有效。最長有效期為1年。生成到期失效的scheme時必填。

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

jump_wxa 的結構

屬性類型默認值必填說明pathstring
是通過scheme碼進入的小程序頁面路徑,必須是已經發布的小程序存在的頁面,不可攜帶query。path為空時會跳轉小程序主頁。querystring
是通過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方式打開微信小程序。

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

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

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

小程序喚起業務流程圖

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

小程序喚起業務流程圖

相關焦點

  • 小程序開發者功能又更新!聊天素材支持小程序打開
    一起來看看吧l 從基礎庫 2.14.3 開始支持l 支持平臺:Androidl 支持類型:僅小程序,小遊戲暫不支持微信聊天內素材(圖片、視頻和webview)的打開方式增加使用小程序打開的入口。用戶可通過小程序處理聊天內的圖片、視頻和webview。例如用小程序給圖片加濾鏡,進行視頻剪輯或者將webview保存到筆記等。用戶在打開微信聊天內的素材時,如果小程序配置了支持打開該類型的素材並審核通過,而且用戶曾經使用過該小程序,則打開該類型的素材時會出現使用小程序打開的入口。
  • 微信小程序 打開App
    打開 App此功能需要用戶主動觸發才能打開 APP,所以不由 API 來調用,需要用 open-type 的值設置為 launchApp 的 button
  • 我們一起解讀微信小程序:微信小程序是什麼有什麼用怎樣打開進入!
    這幾天的微信朋友圈裡面大家都在討論微信小程序,也有些小夥伴投來愣愣的眼光,弱弱的問微信小程序是什麼鬼,微信小程序在哪裡,怎樣進入,有什麼用,
  • 微信電腦版終於可以打開小程序了
    這個「反人類」即將成為過去,微信電腦版的小程序開放公測:微信電腦版本的新版本,支持開放共享的聊天小程序,它可以說是完美的解決用戶上面的尷尬局面。廢話不多說,讓我們先來看看這個功能強大的特性。微信「PC 小程序」首先,更新微信電腦版本Windows 2.7.0,下載並安裝成功,將不會清除舊版本的聊天記錄,然後我們在微信電腦版的聊天現場收到的小程序的信息,可以直接在電腦端打開,界面和手機端保持不變。
  • 微信應用號?不!微信小程序來了!
    小程序是一種不需要下載安裝即可使用的應用,它實現了應用「觸手可及」的夢想,用戶掃一掃或者搜一下即可打開應用。也體現了「用完即走」的理念,用戶不用關心是否安裝太多應用的問題。應用將無處不在,隨時可用,但又無需安裝卸載。本次內測採用邀請制,其內容客戶端暫時對用戶不可見。之後小程序會全面開放申請,所有小程序將在統一時間向用戶開放。
  • 微信電腦版2.9.0公測:新增小程序面板,支持打開小遊戲!
    新增小程序面板在微信PC新版側欄,新增了「小程序入口」,點擊側欄的小程序按鈕可以看到「最近使用」的小程序和收藏的小程序即「我的小程序」。這樣在電腦上打開小程序就很方便了,不過美中不足的是:「沒有搜索小程序的功能」。
  • URL Scheme-簡訊、郵件、微信外網頁等場景打開小程序
    URL Scheme——主要是為用戶以簡訊、郵件、微信外網頁等場景來打開小程序來提供幫助。
  • 微信小程序 | 微信小程序簡介
    微信小程序也是這麼多年來中國IT行業裡一個真正能夠影響到普通程式設計師的創新成果,已經有超過150萬的開發者加入到了微信小程序的開發,與我們一起共同發力推動微信小程序的發展,微信小程序應用數量超過了一百萬,覆蓋200多個細分的行業,日活用戶達到兩個億,微信小程序還在許多城市實現了支持地鐵、公交服務。微信小程序發展帶來更多的就業機會,2017年小程序帶動就業104萬人,社會效應不斷提升。
  • Mac版微信的小程序支持了哪些功能
    前言:微信 Mac 版新版本中,支持打開聊天中分享的小程序,開發者可下載安裝微信 Mac 版公測版本進行體驗和適配。最新版微信開發者工具新增支持在微信 Mac 版中預覽小程序和進行真機調試。2019年1月10日,微信開放社區已經發布公告「Mac小程序公測」。
  • Taro 1.1 全面支持微信/百度/支付寶小程序了!
    自從微信小程序誕生以來,小程序的優勢大家有目共睹,各大網際網路廠商開始摩拳擦掌,紛紛布局小程序領域,其中勢頭最勁的當屬百度智能小程序和支付寶小程序。對於前端而言,既是機遇,因為平臺愈多,帶來的機會愈多;也是挑戰,因為不同的平臺總會各有差異,為每個平臺維護一份代碼,成本顯然太高。
  • VIDE支持微信和支付寶小程序開發
    微信和支付寶開發工具對調試集成還是不錯的,對於代碼編輯器部分,雖然集成了函數,但是整體對於ide的功能還是非常弱的,而vide則是集成微信和支付寶小程序的接口
  • 微信支持H5跳轉App、跳轉小程序
    順藤摸瓜點了進去,好傢夥,產品小姐姐寫這個文案還是太含蓄了,我猜有可能是老乾媽還沒吃夠根據刀哥多年寫代碼要看文檔的經驗來看,證實了這次更新不僅支持了打開小程序,連app也順帶支持了,這個信息量著實有點大下面讓我們一起來看文檔 新增開放標籤 定義: 微信開放標籤是微信公眾平臺面向網頁開發者提供的擴展標籤集合。
  • App 打開小程序正式開放,我們都猜錯了微信的方向
    2017 年 3 月 27 日,微信支持 app 分享到微信的連結點開就是小程序。2018 年 1 月 5 日,小程序頁面中支持打開 app 分享連結。2018 年 5 月 18 日,app 可以直接打開小程序。
  • 怎麼開發小程序微信?小程序開發流程來了!
    相較於APP高額的開發費用,小程序可以實現基本同樣的功能,且開發和推廣成本要低得多,是現在很多想做移動網際網路營銷的企業的不二選擇。不過很多企業對微信小程序開發費用和製作費用的詳細情況並不了解,下面我就跟大家簡單介紹下怎麼開發小程序微信?小程序開發流程!  小程序的開發分四種情況:  1.自己原始碼開發  這種方式適合資深碼農,需要你下載微信官方開發者工具。
  • 鎖立得微信小程序來啦!
    微信小程序「鎖立得應用」正式上線。鎖匠朋友們使用這個小程序即可正常承接安裝等訂單業務。
  • 一周企微要聞|微信PC端更新:支持小程序之後,也支持小遊戲了
    03朋友圈廣告直播模式內測中,支持三種跳轉鏈路3月26日,微信正在測試朋友圈廣告直達小程序直播,微信團隊也對記者表示:「微信廣告直播模式是微信廣告支持跳轉直播落地頁的能力,暫未大規模開放。」對於普通用戶而言,當用戶刷到一個以直播模式投放的朋友圈廣告,在未直播時,點擊廣告進入小程序直播間,會顯示預約直播頁。
  • 微信小程序來了 美味不用等受邀測試打造經典案例
    有業界評論認為攜帶微信強大的用戶量和社交屬性,微信小程序讓用戶迅速使用、用完即走的無負擔理念將顛覆一切應用APP,並且將構建一個滿足用戶所需的所有服務的閉環。  現在隨著騰訊&微信方面快馬加鞭的研發測試,微信小程序終於陸續揭開了其神秘的面紗。有消息顯示微信小程序邀請了一批能迅速落地其理念的產品參與內測,之前呼聲極高的餐飲O2O服務美味不用等作為了微信小程序首批受邀產品。
  • 用微信小程序實現IP查詢需求
    自從微信推出小程序以來,現在業界炒的非常的火,具說叫微信小程序是因為某公司不讓叫應用號,我在朋友圈也看過pony的和張小龍朋友圈關於名字的討論截圖
  • 微信小程序支持webP的WebAssembly方案
    (本文經授權轉載自前端開發升值記)實踐檢驗真理,讓我們一起動手將 WebAssembly 應用在微信小程序場景中,讓微信小程序環境支持解碼 webP 格式(不了解或沒聽過 webP 的各位同仁,請先移步到 「探究 WebP 的一些事兒」——https://aotu.io/notes/2016/06/23/explore-something-of-webp/index.html)。
  • 溜到飛起·微信電腦端支持打開小程序鳥!【看視頻、聽音樂、點圖片、輸入文案無壓力】
    就在本月,微信悄悄地發布了最新版2.7.0內測版本,就實現了在電腦上打開小程序的功能。點擊對話框中的小程序,即可彈出獨立小程序,並且支持多個小程序一起,還可拖至窗口任意位置,直接點擊使用。而且不是網頁,界面和手機微信小程序差不多。