首页 > 其他分享 >uniapp项目实践总结(二十)URLScheme 协议知识总结

uniapp项目实践总结(二十)URLScheme 协议知识总结

时间:2023-09-22 21:15:13浏览次数:62  
标签:总结 uniapp URL 微信 URLScheme 接口 Link 跳转 Scheme

导语:在日常开发过程中,我们经常可以碰到很多的调起某个应用,打开唤醒某个 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,
}
  • 调用接口
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 端
    image

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

  • APP 端
    image

最后

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

标签:总结,uniapp,URL,微信,URLScheme,接口,Link,跳转,Scheme
From: https://www.cnblogs.com/guanqiweb/p/17723357.html

相关文章

  • LCT的简陋总结
    不想了解基础知识的可以直接从\(LCT\)基础操作部分开始,前面不是很重要目录\(LCT\)基础知识实链剖分辅助树一些性质\(LCT\)基础操作函数定义函数实现主要参考oi-wiki\(LCT\)基础知识树上操作是算法竞赛中重要的操作由于树的特殊性,使得维护一些子树信息和路径信息变得较为困......
  • 封装总结
    封装就是把public的类变成private的类(个人理解)露出该露的,封装该封装的定义一个私有类以后可以用ALT+INSERT快捷生成get和set方法get方法主要是为了拿到私有类set是为了设置私有类的值,以及在set方法中写一些判断条件,以防止出现一些不合理的值构造器,就是一个无参的一旦有了有......
  • 2023.9.22——每日总结
    学习所花时间(包括上课):9h代码量(行):0行博客量(篇):1篇今天,上午测试,下午做任务。我了解到的知识点:1.echarts结合mysql、javaweb实现大数据的可视化;明日计划:1.完成任务;2.尽力完成测试;......
  • [一些总结]php中的弱相等和强相等
    PHP中的弱相等和强相等相关知识网络上有太多人总结了,但还是想自己动动手写点东西加深加深印象,哈哈。先看下GPT对弱相等和强相等的解释:在PHP中,弱相等(==)和强相等(===)是用于比较两个值的操作符,它们有以下区别:1.弱相等(==):弱相等用于比较两个值是否相等,不考虑值的数据类型。如......
  • 考试程序语句总结
    1、导csv文件到hive数据库建表便于接收数据:createtabletest1(day_idvarchar(30),sale_nbrvarchar(30),buy_nbrvarchar(30),cntvarchar(30),roundvarchar(30))rowformatserde'org.apache.hadoop.hive.serde2.OpenCSVSerde'WITHSERDEPROPERTIES("separatorChar......
  • 数字和模拟后仿总结
    1      网表数字芯片设计一般将布局布线前的工作称之为数字前端(FrontEnd)设计,而将布局布线之后的工作称为数字后端(BackEnd)设计 Ø  按照芯片后端流程,门级网表主要分为综合网表,DFT网表,PR网表,其中PR网表是包含SDF的最终版网表。Ø  网表验证一般有三种形式:仿真......
  • dockerfile编写总结
    编写Dockerfile文件1.dockerfile结构介绍  from基础镜像  maintainer维护者信息  run命令前加run  CMD容器启动时执行的操作,可以自定义脚本,也可执行系统命令  ENTRYPOINT容器启动时执行的操作,设置指令指定容器启动时执行的命令,可以追加命......
  • 总结,知识的结构性
    一门程序设计语言的基本要素和技能可以概括为以下几点:语法和语义:每门语言都有自己的语法规则和语义理解,比如操作符的使用、变量的定义,如何创建和使用函数等。数据类型和数据结构:理解基本的数据类型(例如整数、浮点数、字符串等)和数据结构(例如数组、列表、字典、集合等)。控......
  • 2023-09-22 uniapp之canvas调用api【uni.canvasToTempFilePath】报错返回:canvasToTemp
    canvasToTempFilePath:失败-失败画布为空一般的解决方案就是查看uni.canvasToTempFilePath的传参是否正确,一个是canvasId必须正确,另一个就是第二个参数为this;但事情显示没那么简单,这二者我都有填写,却仍旧报这个错,我把canvasid换成别的,最后我想起了一件事情,就是canvas为空是因为......
  • 基于Kubernetes的Serverless PaaS稳定性建设万字总结
    作者:许成铭(竞霄)数字经济的今天,云计算俨然已经作为基础设施融入到人们的日常生活中,稳定性作为云产品的基本要求,研发人员的技术底线,其不仅仅是文档里承诺的几个九的SLA数字,更是与客户切身利益乃至身家性命息息相关,稳定性压倒一切。本文将侧重于实际落地而非方法论,阐述云产品SAE......