关于uniapp: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);

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);
  }
}

调用接口

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

胜利返回

{
 "errcode": 0,
 "errmsg": "ok",
 "openlink": Scheme,
}

调用接口

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

胜利返回

{
  "errcode": 0,
  "errmsg": "ok",
  "url_link": "URL 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 协定常识总结的次要内容，有不足之处，请多多斧正。

关于uniapp:uniapp项目实践总结二十URLScheme-协议知识总结

目录

简介

协定格局

设施判断

常见 URL Scheme

利用市场

电商

社交、社区

短视频

视频 / 直播

图片解决

资讯

财经

音乐

工具

办公

生存

美食佳饮

静止衰弱

旅行

游戏

跳转办法

应用程序相互跳转办法

跳转到微信小程序

微信凋谢标签

URL Scheme

URL Link

Short Link

实战演练

模板局部

款式局部

脚本局部

案例展现

最初