当前位置: 首页 > news >正文

小程序跳转:h5避免中间页直接打开微信小程序

目录

  • 需求来源
  • 实现步骤
  • 注意事项
  • 更多前端知识

需求来源

最近有个需求:移动端网站某个页面,需要实现点击某个按钮能直接打开微信小程序,避免打开中间页打开小程序的方式,这种方式对用户更友好,避免用户流失。

这时候就得动动自己的小脑筋了,由于该开放能力是微信小程序开放不久,所以网上的相关资料较少。小程序的官方文档肯定是有的,在小程序的开发能力=》获取小程序链接中找到了相关文档。获取 URL Scheme、获取 URL Link、获取 Short Link等等,都是获取打开小程序链接的方案。经过阅读文档,获取 URL Scheme是满足需求的。所以在这里重点整理了下利用获取 URL Scheme方式来打开小程序的方案,亲测有效。

实现步骤

1. 获取 URL Scheme

接口调用方式点击下方的服务端接口进行查看:

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
生成的 URL Scheme 如下所示:

weixin://dl/business/?t= *TICKET*

2. 通过URL Scheme打开小程序

iOS系统支持识别 URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。

Android系统不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,开发者需要使用 H5 页面使用js打开小程序,跳转代码示例如下:

location.href = 'weixin://dl/business/?t= *TICKET*'

或者a标签跳转:

<a href="weixin://dl/business/?t= *TICKET*">打开小程序</a>

注意: 该跳转方法可以在用户打开 H5 时立即调用,也可以在用户触发事件后调用。

注意事项

  1. 该方式在非微信浏览器使用是完全没问题的,但是在微信浏览器,就会跳出一个中间页再提示打开小程序。为了避免这种情况,还是需要判断如果是在微信浏览器中,就使用跳转小程序的开放标签直接去打开小程序,具体使用方式可以参考官方文档静态网站 H5 跳小程序或者我的另一篇博客小程序跳转:云开发之h5跳小程序,这两篇文章都可以找到判断微信浏览器使用开发标签打开的方式。
  2. 该功能基本覆盖当前用户正在使用的微信版本,开发者无需进行低版本兼容。
  3. 只能生成已发布的小程序的 URL Scheme。
  4. 该方式只针对非个人主体小程序开放。
  5. 该方案参考了官方文档获取 URL Scheme,在此基础上做了一定的筛选,更多详细内容请参考官方文档。

更多前端知识

如果案有任何疑问可以留言,更多相关技术也可以加QQ群交流:568984539

更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

觉得有帮助的动动你的小手点个赞吧~

相关文章:

  • 安装windows后grub的恢复
  • uniapp开发:uniapp之切换vue3,一直使用一直爽
  • uniapp开发:uniapp之vue2、vue3运行至h5请求跨域配置
  • PHP从零开始-笔记-面向对象编程的概念
  • 运行环境之小程序环境判断与h5等多平台环境区分汇总
  • Git 简易手册
  • css样式:单行与多行文本溢出显示省略号
  • 启动图制作:Android Studio制作.9.png图亲测详细流程之每步图解
  • Android相机使用(系统相机、自定义相机、大图片处理)
  • vue3.2开发:vuex在vue3与vue2中异同之快速体验
  • uniapp开发:uniapp快速体验vue3.2之setup语法糖,怎么使用怎么爽
  • 解决显示“此图片来自微信公众平台未经允许不可引用”错误图片
  • zabbix安装
  • base64编码:js实现base64编码的3种方式,多场景下分析使用
  • 微信小程序:关注公众号组件自定义样式
  • 10个确保微服务与容器安全的最佳实践
  • Android 架构优化~MVP 架构改造
  • Angular2开发踩坑系列-生产环境编译
  • isset在php5.6-和php7.0+的一些差异
  • java中具有继承关系的类及其对象初始化顺序
  • PhantomJS 安装
  • RxJS: 简单入门
  • scala基础语法(二)
  • spring + angular 实现导出excel
  • 闭包--闭包作用之保存(一)
  • 初识 webpack
  • 给新手的新浪微博 SDK 集成教程【一】
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 前端性能优化——回流与重绘
  • 如何解决微信端直接跳WAP端
  • 深入 Nginx 之配置篇
  • 微信小程序:实现悬浮返回和分享按钮
  • 用Canvas画一棵二叉树
  • Java数据解析之JSON
  • ​configparser --- 配置文件解析器​
  • #NOIP 2014# day.1 T2 联合权值
  • $.ajax中的eval及dataType
  • (175)FPGA门控时钟技术
  • (二)正点原子I.MX6ULL u-boot移植
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (三分钟)速览传统边缘检测算子
  • (五)IO流之ByteArrayInput/OutputStream
  • (转)http-server应用
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .net core 6 集成和使用 mongodb
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .Net Remoting(分离服务程序实现) - Part.3
  • .NET(C#、VB)APP开发——Smobiler平台控件介绍:Bluetooth组件
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • .netcore 如何获取系统中所有session_ASP.NET Core如何解决分布式Session一致性问题
  • .NET的数据绑定
  • :O)修改linux硬件时间
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(白虎组)
  • [2016.7.Test1] T1 三进制异或
  • [2021]Zookeeper getAcl命令未授权访问漏洞概述与解决