当前栏目
h5跳小程序--非微信环境如何跳转/打开小程序【URL Scheme】
很多人还以为小程序只能在微信环境才能相互跳转,不知道其实【URL Scheme】早就可以实现非微信环境跳转,并且比使用微信环境内容的开发标签跳转小程序更简单
有些节假日活动或者业务需求,需要把H5的用户引导到小程序来,这或许就比较麻烦了,
微信环境还好,可以直接使用微信提供的 < wx-open-launch-weapp > 来打开小程序,具体如何实现可以参考这篇文章:
developers.weixin.qq.com/community/d…
现在谈的是非微信环境打开我们自己的小程序,如何实现?
我们可以使用微信提供的【URL Scheme】地址来实现跳转。
具体怎么操作,如下:
如何获取【URL Scheme】地址,获取方法有2种?
1、可以不用通过服务器调接口,通过登录公众平台,小程序管理后台「工具」-「生成URL Scheme」入口可以获取打开小程序任意页面的URL Scheme(位置在登录后右上角),可以填写你需要跳转小程序的页面地址及参数,点击生成即可
2、可以通过微信api接口服务器端调取来生成【URL Scheme】地址,使用一个token就可以实现获取,生成的地址及参数和上面一样的,可以配置对应的参数,地址:developers.weixin.qq.com/miniprogram…
怎么正确使用呢?
iOS系统支持识别URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别URL Scheme,用户无法通过Scheme正常打开小程序,开发者需要使用H5页面中转,再跳转到Scheme实现打开小程序,跳转代码示例如下:
location.href = 'weixin://dl/business/?t= *TICKET*'
复制代码
为了兼容苹果和安卓都能使用,我个人建议统一写成脚本执行跳转locataion.href=‘URL Scheme地址’,这可能会出现,有些浏览器会自动拦截脚本自动执行的内容,导致跳转H5页面不能马上调起跳转小程序,所以页面最好保留一个按钮,标明跳转失败可以点击此按钮跳转小程序。
到此已经可以在非微信环境浏览器打开微信小程序了,祝你代码好运没bug(注:企业微信也支持这种【URL Scheme】调起小程序)。
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?