导语:在日常开发过程中,我们经常可以碰到很多的调起某个应用,打开唤醒某个 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可以在这里更新签名
});
}
- 页面嵌入标签
// 点击跳转操作
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"
}
实战演练
下面就写一个简单的页面来看一下效果。
模板部分
样式部分
.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);
}
案例展示
最后
以上就是 URLScheme 协议知识总结的主要内容,有不足之处,请多多指正。