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

导语：在日常开发过程中，我们经常可以碰到很多的调起某个应用，打开唤醒某个 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);
1
2
3
4
5
6
7
8
9
10
11

常见 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13

uniapp 应用可以在manifest.json配置文件中设置：

//...
{
  "app-plus": {
    "distribute": {
      "android": {
        "schemes": "hello"
      }
    }
  }
}
//...
1
2
3
4
5
6
7
8
9
10
11

跳转到微信小程序

• 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可以在这里更新签名
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 页面嵌入标签

<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>
1
2
3
4
5
6
7
8
9

// 点击跳转操作
let btn = document.getElementById("launch-btn");
btn.addEventListener("launch", function (e) {
  console.log("success");
});
btn.addEventListener("error", function (e) {
  console.log("fail", e.detail);
});
1
2
3
4
5
6
7
8

注意：有时候报错，可以采用判断是否微信内置游览器环境，然后动态添加 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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

URL Scheme

• 调用接口

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

• 成功返回

{
 "errcode": 0,
 "errmsg": "ok",
 "openlink": Scheme,
}
1
2
3
4
5

URL Link

• 调用接口

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

• 成功返回

{
  "errcode": 0,
  "errmsg": "ok",
  "url_link": "URL Link"
}
1
2
3
4
5

Short Link

• 调用接口

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

• 成功返回

{
  "errcode": 0,
  "errmsg": "ok",
  "link": "Short Link"
}
1
2
3
4
5

实战演练

下面就写一个简单的页面来看一下效果。

模板部分

<view class="openapp-box">
  
  <button class="openapp-item" @click="openApp">打开谷歌应用市场button>
  
  
  <button class="openapp-item" @click="openApp">打开谷歌应用市场button>
  
view>
1
2
3
4
5
6
7
8

样式部分

.openapp-box {
  box-sizing: border-box;
  padding: 30rpx;
  .openapp-item {
    margin-bottom: 30rpx;
  }
}
1
2
3
4
5
6
7

脚本部分

// 打开app
function openApp() {
  let url = "market://details?id=dev.hello";
  proxy.$apis.utils.startApp(url);
}
1
2
3
4
5

案例展示

• H5 端

如果 URL Scheme 协议地址不存在，则会报错。

• APP 端

最后

以上就是 URLScheme 协议知识总结的主要内容，有不足之处，请多多指正。