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

42次阅读

共计 4840 个字符，预计需要花费 13 分钟才能阅读完成。

导语：在日常开发过程中，咱们常常能够碰到很多的调起某个利用，关上唤醒某个 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">
  <!-- #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
发表至： uni-app
2023-09-22
 0
关于uni-app:拥抱简洁代码vue3中的script-setup最强解析
关于uni-app:uni-引入-animatecss-v4版本教程
关于uniapp:Uniapp-小程序开发完美适配刘海屏的Appbar方案
关于uni-app:UNIAPP-实践问题记录