uni-app 使用webview加载H5打开微信小程序

这篇具有很好参考价值的文章主要介绍了uni-app 使用webview加载H5打开微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。

毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,很好,需求满足,但是收费,那能不能自己做呢,可以,研究了一下天天外链生成的链接,发现是个html结尾的,那么正好H5里可以直接使用location.href去加载外链的,思路有了,开始动手。

1,首先使用uni的webview去加载一个H5页面,这个页面需放在自己公司的测试服务器上哦

uni-app 使用webview加载H5打开微信小程序

 2,html文件写入location,href = '小程序的链接',就会实现自动跳转,也可以加一个按钮防止跳转失败,让用户点击按钮跳转

uni-app 使用webview加载H5打开微信小程序

 3,最重要的一步,如何生成这个小程序的链接

        (1),登录微信开放平台

        (2),点击小程序,点击服务端,点击获取scheme码,点击调试工具

                uni-app 使用webview加载H5打开微信小程序        (3)在线生成scheme码

uni-app 使用webview加载H5打开微信小程序

       (4),请求成功之后在在线调用这里可以看到,如果失败请按照文档检查一下参数

uni-app 使用webview加载H5打开微信小程序

4,这个就是你小程序的码了,复制到你的html文件里用location,href就可以跳转啦,看上面第二步。

注意:

注意:

注意:

为确保小程序链接合理使用,自 2022 年 4 月 11 日起,URL Scheme 和 URL Link (以下统称为 “链接” )接口能力规则将进行以下调整:

  1. 每个 URL Scheme 或 URL Link 有效期最长 30 天,均不再支持永久有效的链接、不再区分短期有效链接与长期有效链接;
  2. 链接生成后,若在微信外打开,用户可以在浏览器页面点击进入小程序。每个独立的链接被用户访问后,仅此用户可以再次访问并打开对应小程序,其他用户无法再次通过相同链接打开该小程序;
  3. 单个小程序每天生成链接数(URL Scheme 和 URL Link 总数)上限为 50 万条。

对于上述 1,在开发层面,相应的服务端接口 urlscheme.generate 和 urllink.generate 将进行以下调整:

  1. is_expire 值固定为 true,可不再传该值,若传值为 false 也与 true 一样会生成到期失效链接;
  2. 若 expire_type 传值为 0,需注意 expire_time 传值的时间戳不超过 30 天,即该参数最长传值有效期为 30 天;若 expire_type 传值为 1,需注意 expire_interval 传值范围为 [1, 30],即该参数最长传值间隔天数为 30。

也就说一个链接只能被一个人跳转,要想实现每个用户都可以跳转,可让后端配合写接口动态生成链接,前端需在跳转之前调用接口,实现每个用户下发不同H5链接。

详情请看官网小程序链接生成与使用规则调整公告:

小程序链接生成与使用规则调整公告 | 微信开放社区各位开发者:为确保小程序链接合理使用,自 2022 年 4 月 11 日起,URL Scheme 和 URL Link (以下统称为 “链接” )接口能力规则将进行以下调整:每个 URL Scheme 或 URL Link 有效期最长 30 天,均不再支持永久有效的链接、不再区分短期有效链接与长期有效链接;链接生成后,若在微信外打开,用户可以在浏览器页面点击进入小程序。每个独立的链接被用户访问后,仅此用户可以再次访问并打开对应小程序,其他用户无法再次通过相同链接打开该小程序;单个小程序每天生成链接数(URL Scheme 和 URL Link 总数)上限为 50 万条。 对于上述 1,在开发层面,相应的服务端接口 urlscheme.generate 和 urllink.generate 将进行以下调整:is_expire 值固定为 true,可不再传该值,若传值为 false 也与 true 一样会生成到期失效链接;若 expire_type 传值为 0,需注意 expire_time 传值的时间戳不超过 30 天,即该参数最长传值有效期为 30 天;若 expire_type 传值为 1,需注意 expire_interval 传值范围为 [1, 30],即该参数最长传值间隔天数为 30。详细对比见下表:已使用该后端接口的开发者可以不进行任何修改,不会出现返回异常。若传值超过新规则合法值,或声明使用永久有效的链接,则均会被赋最长有效期值(30天);需注意以上新规则生效后的有效期和访问规则变化。在本次规则调整生效前已经生成的链接,也将自动生效以下规则:如果有效期超过30天或长期会被降级为30天有效,开始时间从调整日期开始计算;在调整生效后,只能被1个用户访问。当前已使用微信云开发 静态网站H5跳小程序 与 短信跳小程序、微信服务平台短信服务为用户提供链接的功能不受影响,但同样适用以上规则。 微信团队 2022年3月9日相关QAQ1:每天下发的短信量级超过50万条,不够用怎么办?A1:可将生成 scheme 的时机改为在用户打开 H5 时再生成:https://developers.weixin.qq.com/community/develop/doc/000aeab88a4ea0c5c89d81fde5b801服务端调取微信接口请看官网:

后端 API | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/backend-api.html文章来源地址https://www.toymoban.com/news/detail-416993.html

到了这里,关于uni-app 使用webview加载H5打开微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app微信小程序打开第三方地图

    小程序中有个按钮点击以后会调用手机中第三方地图进行导航。 参数 位置信息 经度 与纬度。 原本以为一切顺利,结果在微信开发者工具中显示如下: location参数格式错误,请正确填写 经过测试发现,因为我在微信小程序中使用,所以默认会使用腾讯地图来显示。 而我的经

    2024年02月06日
    浏览(40)
  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(30)
  • uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑

    1.checkbox样式

    2024年02月11日
    浏览(28)
  • uni-app打开外部链接方式汇总(h5&app)

    问题描述 在应用中打开一个外部的html页面,即完整http链接的页面。h5通过window.open或是内嵌iframe基本都没有问题,本文主要针对app端的方法进行汇总,不涉及到小程序端。 方案1 使用uni-app的扩展组件 uni-link ,使用参考文档uni-app官网 该组件的行为是在app内打开外部浏览器,

    2024年02月01日
    浏览(19)
  • uni-app vue3 封装socket 兼容微信小程序 钉钉小程序 H5 App 全局唯一

    前端小伙伴使用uni-app开发长连接通信的时候都会有以下疑问 在网上搜到的封装socket都没讲怎么全局公用一个呢? 同一个 子协议或者我我们叫type类型型我想在两个页面都接受使用怎么做呢? 目前能搜到的socket 封装好像都没讲清楚这个东西,或者压根没考虑 下面给大家详细

    2024年02月13日
    浏览(24)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(35)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?

    1)找到企业ID,登录 企业微信 企业微信 https://work.weixin.qq.com/wework_admin/loginpage_wx  2)找到接入链接  功能-客服-微信客服 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/

    2024年02月11日
    浏览(30)
  • uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器(H5上传-微信小程序上传)

    前言 最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能。 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseImage,uni.uploadFile H5上传时它和pc端原理差不多,都是file对象上传,PC端是通过new file对象,uni-app是直接提供了 微信

    2024年02月15日
    浏览(30)
  • 不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

    人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧!   事情前情概述,昨天IBM的同事前来咨询我怎样实现微信分享功

    2024年02月15日
    浏览(28)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包