淺談如何在微信內外調起小程序

背景

北京時間2021年05月21日14:52:02，本靚仔正用心的耍着掘金前端板塊。此時微信頭像閃動，一位僅次於我顏值的未成謀面的網頁在羣裏艾特我：javascript

mp://xxxx, 看上去一個簡單的微信協議，點擊直接打開小程序。html

這是何時出現的？仍是有點點懵逼。不過仍是挺有意思的。前端

瞬間感受本身脫離隊伍，仍是決定研究一下。java

小程序連接

如何生成協議

上天再給你打開一扇門的同時，就會爲你關閉一扇窗，就像咱們搞前端的雖然都有帥氣的臉龐，可是仍是花了幾分鐘的時間纔在百度裏面找到了答案。react

安卓灰度功能，IOS目前暫未上架小程序

使用安卓手機，右上角膠囊處三個點，點擊複製連接功能，便可獲得當前小程序的連接。應該也是微信新出的一種營銷方式。api

這好像也沒有什麼難的啊？瀏覽器

是否能在H5中使用超連接打開？

奇奇怪怪的一個鏈接，這發出去了誰知道是什麼啊，每一個小程序長得又差很少？安全

那咱們能不能在微信中使用超連接的形式讓他喚起小程序呢？這樣的話不就又能夠在其餘方面去擴寬咱們的業務線了嗎？微信

<a class="yupao-footer-item" href="mp://Guxz6Z1Jxxxxxxx">
  <span>打開小程序</span>
</a>
複製代碼

你有多大的指望，就會有多少的失望。這多麼好的一個功能啊，結果就這樣以失敗了結了。不行，應該是我寫的方式不對。雖然我沒過520，可是在521我仍是得多解鎖幾個姿式。

// html
<a class="yupao-footer-item" href="javascript:void(0);" onClick="openMiniProgram">
 <span>打開小程序</span>
</a>

// script
function openMiniProgram() {
  window.location.href = "mp://Guxz6Z1Jxxxxxxx"
}
複製代碼

好吧當我放屁。無效。

微信內喚起小程序

細想，從入行到如今，咱們曾被多少產品與測試摧殘，這小小的挫折又算的了什麼？在回顧一下他給出的連接吧，應該就是別人的先例。

微信開放標籤

經過地址進去找到了以下有效信息。18🈲 ，未成年請在父母的陪同下進行觀看

很絲滑，由於不想大家嫉妒個人顏值與才華並存我就直接總結。

微信SDK >= 1.6.0 , 微信提供了兩個開放標籤，分別是打開小程序與APP。

wx-open-launch-weapp (老司機專線1-VIP通道)

使用過程當中簡單的幾步，我直接列出來吧。

升級微信sdk

先將sdk 調整到 1.6.0 ，點擊預覽sdk文件

配置開放標籤

配置wx.config 文件，容許使用微信內置的開放標籤

wx.config({
  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印
  appId: '', // 必填，公衆號的惟一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，須要使用的JS接口列表
  openTagList: ['wx-open-launch-app'] // 可選，須要使用的開放標籤列表
});
複製代碼

服務號必須認證，且添加js安全域名

登陸服務號，右上角，點擊進去認證

添加js安全域名步驟：左側菜單設置 -> 公衆號設置 -> 功能設置 -> JS接口安全域名

注意事項

微信版本要求爲：7.0.12及以上

系統版本要求爲：iOS 10.3及以上、Android 5.0及以上

書寫代碼

// html -> 微信開放標籤包裹 username = 小程序原始id 
<wx-open-launch-weapp username="gh_aaaaaaaaaaa" id="launch-btn">
  <!-- 樣式文件 -->
  <style></style>
  <!-- 內容節點 -->
  <script type="text/wxtag-template">
   <span>打開我高貴的小程序</span>
  </script>
</wx-open-launch-weapp>

// javascript

var launchbtn = document.getElementById('launch-btn');

// 標籤初始化完畢，能夠進行點擊操做
launchbtn.addEventListener('ready', function (e) {
      console.log('ready',e)
});
// 用戶點擊跳轉按鈕並對確認彈窗進行操做後觸發
launchbtn.addEventListener('launch', function (e) {
    console.log('success',e)
  });
// 用戶點擊跳轉按鈕後出現錯誤
launchbtn.addEventListener('error', function (e) {
    console.log('error',e)
  });

複製代碼

效果預覽

課後做業

wx-open-launch-app

差點已經這樣就完了，@郭源潮在評論中提到，微信外均可以打開小程序了...

不得不認可本身的掉隊呀。

不過男人嘛，就應該迎男而上。

微信外開小程序

urlscheme

面向於百度開發的精華就在於，拿到問題點後能高效的找到問題結果。

點擊收看 urlscheme.generate 官方文檔

獲取小程序 scheme 碼，適用於短信、郵件、外部網頁、微信內等拉起小程序的業務場景。經過該接口，能夠選擇生成到期失效和永久有效的小程序碼，目前僅針對國內非我的主體的小程序開放

直接上貨。

基本準備

非我的小程序
postman / other request tool

實現方式

先獲取當前小程序的 ACCESS_TOKEN

這一步是十分簡單的, 直接瀏覽器訪問一下也能夠

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

拿到 ACCESS_TOKEN 以後，咱們還須要使用post請求另外一個接口，來獲取小程序 scheme 協議。

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

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

不必在意這麼多，若是你僅僅只是測試，那麼久只須要記住一句話。使用post 請求一下該接口。

ok, 協議到手，趕快將其加入到咱們的代碼中進行測試。

<a  href="weixin://dl/business/?t=kJxxxxxxxx">
    <span>打開個人小程序</span>
</a>
複製代碼

業務忽然變得，好安靜~！

這樣的話，咱們基本上在微信內外，APP中都能打開小程序了。足以知足咱們絕大部分的營銷需求。

結語

禮畢，全體起立。

感謝@郭源潮提出的微信外打開小程序觀點。
解釋一下，我是一個清純的boy, 有些東西是我朋友告訴個人。
若是你有什麼新鮮的玩法，歡迎留言，咱們一塊兒研究。
JavaScript水軍+v = zzxxzxxx，備註掘金
誠聘高級react，有能力+責任感推管理職位哦。