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 端

uniapp项目实践总结(二十)URLScheme 协议知识总结_第1张图片

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

在这里插入图片描述

  • APP 端

uniapp项目实践总结(二十)URLScheme 协议知识总结_第2张图片

最后

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

你可能感兴趣的:(前端框架库,uni-app,vuejs,url,scheme)