uniapp项目实践总结(二十)URLScheme 协议知识总结

导语：在日常开发过程中，我们经常可以碰到很多的调起某个应用，打开唤醒某个 APP，链式启动 App 等场景，背后就涉及到了 URLScheme 协议的相关知识，下面就简单介绍一下。

简介

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 协议知识总结的主要内容，有不足之处，请多多指正。