uniapp專案實踐總結(二十)URLScheme 協議知識總結

發表於2023-09-26
APPScheme協議
導語：在日常開發過程中，我們經常可以碰到很多的調起某個應用，開啟喚醒某個 APP，鏈式啟動 App 等場景，背後就涉及到了 URLScheme 協議的相關知識，下面就簡單介紹一下。

目錄

  • 簡介
  • 常見 URL Scheme
  • 跳轉方法
  • 實戰演練
  • 案例展示

簡介

URL Scheme是一個可以讓 APP 之間互相跳轉的協議，每個 APP 都有自己的 URL Scheme，如果存在相同的 URL Scheme，會先跳轉先安裝的 APP，後面安裝的會被覆蓋掉。

協議格式

[scheme]://[host][:port]/[/path]?[query]

  • scheme:協議名稱，由開發人員自定義
  • host:域名
  • port:埠
  • path:頁面路徑
  • query:請求引數

例如淘寶：taobao://

裝置判斷

// 遊覽器標識
const ua = navigator.userAgent.toLowerCase();

// 是否微信內
const isWeixin = ua.indexOf("micromessenger") !== -1;

// 是否android終端
const isAndroid = /(Android)/i.test(ua);

// 是否ios終端
const isIOS = /(iPhone|iPad|iPod|iOS|Mac)/i.test(ua);

常見 URL Scheme

應用市場

  • market 谷歌應用商店
  • tmast 應用寶
  • mimarket 小米
  • samsungapps 三星
  • huawei 華為
  • oppomarket oppo
  • vivomarket vivo
  • itms-apps ios

電商

  • taobao 淘寶
  • tmall 天貓
  • jdlogin 京東
  • pinduoduo 拼多多
  • kaola 網易考拉
  • yanxuan 網易嚴選
  • vipshop 唯品會
  • suning 蘇寧
  • mishopv1 小米商城
  • wireless1688 阿里巴巴

社交、社群

  • weibo 微博
  • zhihu 知乎
  • xhsdiscover 小紅書
  • momochat 陌陌
  • blued blued
  • mqzone QQ 空間
  • mqq QQ
  • tantanapp 探探
  • huputiyu 虎撲
  • com.baidu.tieba 貼吧
  • tianya 天涯社群
  • douban 豆瓣
  • jike 即刻

短影片

  • snssdk1128 抖音
  • snssdk1112 火山
  • snssdk32 西瓜影片
  • gifshow 快手

影片/直播

  • tenvideo 騰訊影片
  • youku 優酷
  • bilibili B 站
  • imgotv 芒果 TV
  • qiyi-iphone 愛奇藝
  • hanju 韓劇 TV
  • douyutv 鬥魚
  • yykiwi 虎牙

圖片處理

  • mtxx.open 美圖秀秀
  • faceu faceu 國內
  • ulike 輕顏國內

資訊

  • snssdk141 今日頭條
  • newsapp 網易新聞
  • qqnews 騰訊新聞
  • iting 喜馬拉雅
  • weread 微信讀書
  • jianshu 簡書
  • igetApp 得到
  • kuaikan 快看漫畫

財經

  • sinanews 新浪財經
  • amihexin 同花順炒股

音樂

  • orpheus 網易雲音樂
  • qqmusic qq 音樂
  • kugouURL 酷狗
  • qmkege 全民 K 歌
  • changba 唱吧

工具

  • iosamap 高德地圖
  • baidumap 百度地圖
  • baiduyun 百度網盤
  • rm434209233MojiWeather 墨跡天氣

辦公

  • wxwork 企業微信
  • dingtalk 釘釘

生活

  • imeituan 美團
  • dianping 點評
  • cainiao 菜鳥裹裹
  • wbmain 58 同城
  • mihome 米家

美食佳飲

  • xcfapp 下廚房
  • sbuxcn 星巴克中國
  • meituanwaimai 美團外賣

運動健康

  • fb370547106731052 小米運動
  • meetyou.linggan 美柚
  • babytree 寶寶樹
  • keep keep

旅行

  • CtripWireless 攜程
  • diditaxi 滴滴
  • taobaotravel 飛豬
  • travelguide 馬蜂窩

遊戲

  • tencent1104466820 王者榮耀
  • tencent100689805 天天愛消除
  • tencent382 QQ 鬥地主

跳轉方法

應用程式互相跳轉方法

以下是 uniapp 跳轉應用的開啟通用方法。

// 啟動app
function startApp(url) {
  // #ifdef H5
  window.open(url);
  // #endif
  // #ifdef APP-PLUS
  if (plus) {
    plus.runtime.openURL(url, (res) => {
      console.log("res:", res);
    });
  }
  // #endif
}

uniapp 應用可以在manifest.json配置檔案中設定：

//...
{
  "app-plus": {
    "distribute": {
      "android": {
        "schemes": "hello"
      }
    }
  }
}
//...

跳轉到微信小程式

  • URL Scheme：用於獲取小程式 scheme 碼，適用於簡訊、郵件、外部網頁、微信內等拉起小程式的業務場景，目前僅針對國內非個人主體的小程式開放；
  • URL Link：獲取小程式 URL Link，適用於簡訊、郵件、網頁、微信內等拉起小程式的業務場景，目前僅針對國內非個人主體的小程式開放；
  • Short Link：獲取小程式 Short Link，適用於微信內拉起小程式的業務場景。目前只開放給電商類目(具體包含以下一級類目：電商平臺、商家自營、跨境電商)。透過該介面，可以選擇生成到期失效和永久有效的小程式短鏈；
  • wx-open-launch-weapp：用於頁面中提供一個可跳轉指定小程式的按鈕。使用此標籤後，使用者需在網頁內點選標籤按鈕方可跳轉小程式；已認證的服務號和已認證的非個人主體的小程式；

微信開放標籤

  • 繫結域名：登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS 介面安全域名”。
  • 引入 JS 檔案：在需要呼叫 JS 介面的頁面引入如下 JS 檔案https://res2.wx.qq.com/open/js/jweixin-1.6.0.js，支援使用 AMD/CMD 標準模組載入方法載入。
  • 透過 config 介面注入許可權驗證配置並申請所需開放標籤，所有需要使用開放標籤的頁面必須先注入配置資訊，並透過 openTagList 欄位申請所需要的開放標籤，否則將無法使用（同一個 url 僅需呼叫一次）；
  • 獲取配置
function getConfig () {
  wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有 api 的返回值會在客戶端 alert 出來，若要檢視傳入的引數，可以在 pc 端開啟，引數資訊會透過 log 打出，僅在 pc 端時才會列印
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [], // 必填，需要使用的 JS 介面列表
    openTagList: [] // 可選，需要使用的開放標籤列表，例如['wx-open-launch-app']
  });

  // 驗證透過
  wx.ready(function () {
    // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中

  });

  wx.error(function (res) {
    // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名
  });
}
  • 頁面嵌入標籤
<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc">
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">開啟小程式</button>
  </script>
</wx-open-launch-weapp>
// 點選跳轉操作
let btn = document.getElementById("launch-btn");
btn.addEventListener("launch", function (e) {
  console.log("success");
});
btn.addEventListener("error", function (e) {
  console.log("fail", e.detail);
});

注意：有時候報錯，可以採用判斷是否微信內建遊覽器環境，然後動態新增 script 標籤方式進行嵌入網頁。

async function addOpenScript() {
  const ua = navigator.userAgent.toLowerCase();
  const isWxwork = ua.match(/wxwork/i) == "wxwork";
  const isWeixin = !isWxwork && ua.match(/micromessenger/i) == "micromessenger";
  if (isWeixin) {
    const wxOpen = document.createElement("script");
    wxOpen.type = "text/javascript";
    wxOpen.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js";
    wxOpen.onload = getConfig;
    document.body.appendChild(wxOpen);
  }
}

URL Scheme

  • 呼叫介面
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
  • 成功返回
{
 "errcode": 0,
 "errmsg": "ok",
 "openlink": Scheme,
}

URL Link

  • 呼叫介面
POST https://api.weixin.qq.com/wxa/generate_urllink?access_token=ACCESS_TOKEN
  • 成功返回
{
  "errcode": 0,
  "errmsg": "ok",
  "url_link": "URL Link"
}

Short Link

  • 呼叫介面
POST https://api.weixin.qq.com/wxa/genwxashortlink?access_token=ACCESS_TOKEN
  • 成功返回
{
  "errcode": 0,
  "errmsg": "ok",
  "link": "Short Link"
}

實戰演練

下面就寫一個簡單的頁面來看一下效果。

模板部分

<view class="openapp-box">
  <!-- #ifdef H5 -->
  <button class="openapp-item" @click="openApp">開啟谷歌應用市場</button>
  <!-- #endif -->
  <!-- #ifdef APP-PLUS -->
  <button class="openapp-item" @click="openApp">開啟谷歌應用市場</button>
  <!-- #endif -->
</view>

樣式部分

.openapp-box {
  box-sizing: border-box;
  padding: 30rpx;
  .openapp-item {
    margin-bottom: 30rpx;
  }
}

指令碼部分

// 開啟app
function openApp() {
  let url = "market://details?id=dev.hello";
  proxy.$apis.utils.startApp(url);
}

案例展示

  • H5 端

如果 URL Scheme 協議地址不存在，則會報錯。

  • APP 端

最後

以上就是 URLScheme 協議知識總結的主要內容，有不足之處，請多多指正。

相關文章