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);
常见 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">
<button class="openapp-item" @click="openApp">打开谷歌应用市场button>
<button class="openapp-item" @click="openApp">打开谷歌应用市场button>
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 协议知识总结的主要内容，有不足之处，请多多指正。