微信支持H5跳轉App、跳轉小程序

繼小程序灰度測試分享朋友圈刷屏後，滴滴滴，這...

閒着也閒着，順藤摸瓜點了進去，好傢伙，產品小姐姐寫這個文案仍是太含蓄了，我猜有多是老乾媽還沒吃夠

根據刀哥多年寫代碼要看文檔的經驗來看，證明了此次更新不只支持了打開小程序，連app也順帶支持了，這個信息量着實有點大

下面讓咱們一塊兒來看文檔

新增開放標籤

定義: 微信開放標籤是微信公衆平臺面向網頁開發者提供的擴展標籤集合。經過使用微信開放標籤，網頁開發者可安全便捷地使用微信或系統的能力，爲微信用戶提供更優質的網頁體驗

有哪些開放標籤?

• <wx-open-launch-weapp> 打開小程序
• <wx-open-launch-app> 打開app

接入要求

• 主體要求: 僅開放給已認證的服務號

• 系統要求：
  微信版本要求爲：7.0.12及以上。系統版本要求爲：iOS 10.3及以上、Android 5.0及以上

接入方法

打開小程序使用步驟與微信JS-SDK相似，須要綁定安全域名、引入JS文件等步驟

打開app須要前往微信開放平臺的管理中心-公衆帳號或小程序詳情-接口信息-網頁跳轉移動應用-關聯設置中綁定所須要跳轉的App

示例:

1. 配置最新JSSDK

wx.config({
  // 其它配置不變， openTagList配置可以使用的開放標籤, 
  openTagList: ['wx-open-launch-app, wx-open-launch-weapp']
})

2. 頁面使用開放標籤

• 打開小程序

<wx-open-launch-weapp
  id="launch-btn"
  // 小程序id
  username="gh_xxxxxxxx"
  // 小程序路徑
  path="/a/b/c?d=1&e=2#fg"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打開小程序<button>
  </template>
</wx-open-launch-weapp>

• 打開app

<wx-open-launch-app
  id="launch-btn"
  // 移動應用appid
  appid="your-appid"
  // 額外信息, 客戶端自行解析
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App內查看</button>
  </template>
</wx-open-launch-app>

• 回調

<script>
  var btn = document.getElementById('launch-btn');
  // 調起成功回調
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  // 調起失敗回調
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

結語

怎麼樣，看完文檔後是否是感受很easy，

老闆: 今晚上線

參考: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

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