位置: IT常识 - 正文

实现H5和小程序之间相互跳转(h5与小程序交互)

编辑:rootadmin
实现H5和小程序之间相互跳转  功能描述:

推荐整理分享实现H5和小程序之间相互跳转(h5与小程序交互),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:实现h5和小程序的区别,h5与小程序交互,h5与小程序交互,实现h5和小程序的区别,实现h5和小程序的区别,h5与小程序,实现h5和小程序的关系,实现h5和小程序的区别,内容如对您有帮助,希望把文章链接给更多的朋友!

        1、 当点击理赔服务的时候,跳转到小程序页面

        2、 当点击返回的时候,从小程序跳回H5页面(内嵌H5以及关闭小程序)

 功能1:H5跳转小程序

 vue中实现步骤

           == 在 template 标签中写html 

<wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID(gh_ 开头的)" path="要跳转到的页面路径"> <!-- replace --> <script type="text/wxtag-template"> <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button> </script></wx-open-launch-weapp>

注意事项:

username:小程序的id,gh开头的;path:要跳转的小程序路径,后面可以加上 .htmlwx.config 初始化完成之后,wx-open-launch-weapp 这个标签才会显示出来,根据需求尽可能应该在进入页面之后就初始化,一般都放在 mounted 中wx-open-launch-weapp 这个标签相当于一个跳转小程序的出口,就是点击他的时候会跳转小程序设置样式,如果样式跳转按钮的样式比较复杂,可以写成两个按钮叠加,将 wx-open-launch-weapp 按钮设置成透明的,叠加在另一个按钮上,实现跳转在设置样式时,发现设置 wx-open-launch-weapp 的样式的时候,设置宽度生效,设置高度不生效,这里解决的时候是在 weapp 按钮里面的字写多一点,让他超过下面的盒子,然后weapp外卖包裹一个盒子来设置 overflow:hidden

         == 在 script 中的js 

wx.config({ debug: false, // 调试时可开启 appId: "wxbb*********as", // <!-- replace --> timestamp: data.timestamp, // 生成签名的时间戳,必填,填任意数字即可 nonceStr: data.nonceStr, // 生成签名的加密字符串,必填,填任意非空字符串即可 signature: data.signature, // 生成的签名,必填,填任意非空字符串即可 jsApiList: ["chooseImage", "previewImage", "wx-open-launch-weapp"], // 必填,随意一个接口即可(跳转小程序的任意接口即可) openTagList: ["wx-open-launch-weapp"], // 填入打开小程序的开放标签名});

注意事项:

这里的 appid 应该用公众号的 appid 而不是小程序的(因为是在公众号配置的出口)timestamp,nonceStr,signature 应该是由后端生成的(也是通过公众号的信息生成的)

         == 在公众号中配置 js 接口安全域名 

 

实现H5和小程序之间相互跳转(h5与小程序交互)

注意事项:

        公众号必须为服务号,小程序必须已经上线

遇到的问题:

在 wx-open-launch-weapp 这个标签中,设置 button 的样式时,只能用行内样式,且外面要用 template 标签包裹,否则不生效想设置 wx-open-launch-weapp 的样式可以用两个盒子叠加,将 weapp 设置成透明 功能二:小程序跳转到H5中 (两种)

       == 跳转到小程序外的H5 (关闭小程序)

 -- 不是在小程序内部,跳转H5(不是由小程序页面,跳转到H5页面,因此这里不能用 web-view 标签)

        -- 可以理解为,关闭小程序,展示原来的H5页面

        -- 用以下代码,实现关闭小程序

<navigator class="return_btn" open-type="exit" target="miniProgram">返 回</navigator>

       == 小程序内跳转H5(内嵌H5)

         -- 在小程序的一个单独页面内, 用 web-view标签包裹要跳转的地址

         在开发者设置里面配置要打开的域名

         上一个页面的跳转js,后面拼参数

wx.navigateTo({ url: `/disease_management/pages/robot/robot?url=${baseUrl.API2}smart_rui&phone=${this.data.userInfo.phone}`,});

         wxml 文件:

<web-view src="{{url}}" bindmessage=""></web-view>

         js 文件:

Page({ data: { url: "", }, onLoad(options) { // 这里要把参数分解出来,如果参数比较多的话可以用循环 console.log(options); let { url } = options; // url = decodeURIComponent(url) if (options.phone) { url = url + "?phone=" + options.phone; } if (options.from) { url = url + "&from=" + options.from; } this.setData({ url: decodeURIComponent(url), }); },});

注意事项:

web-view 会占据当前整个页面,会整个覆盖,不管是在 web-view 里面或者外面加其他元素都不会展示出来如果你想进去H5之后还能再返回回来,可以在当前 web-view 的上一个页面用 navigateTo 跳转,然后用左上角自带的小箭头返回(显然在当前页面增加一个悬浮的返回按钮这种情况是不成立的) 
本文链接地址:https://www.jiuchutong.com/zhishi/297441.html 转载请保留说明!

上一篇:注册谷歌账户教程--解决注册谷歌账户“此电话号码无法用于进行验证”问题--亲测已解决--谷歌账户注册全流程(2020注册谷歌账号方法)

下一篇:Token详解(tokenall)

  • 苹果刷机(苹果刷机)(苹果刷机苹果id停用了怎么办)

    苹果刷机(苹果刷机)(苹果刷机苹果id停用了怎么办)

  • excel怎么删除空白多余格子呢(excel怎么删除空行批量)

    excel怎么删除空白多余格子呢(excel怎么删除空行批量)

  • 抖音短视频怎么删除已经发布的作品(抖音短视频怎么做)

    抖音短视频怎么删除已经发布的作品(抖音短视频怎么做)

  • iphone怎么恢复微信删除的聊天记录(苹果手机如何恢复微信聊天)

    iphone怎么恢复微信删除的聊天记录(苹果手机如何恢复微信聊天)

  • 手机进水了声音变沙哑怎么办(手机进水了声音滋滋啦啦的)

    手机进水了声音变沙哑怎么办(手机进水了声音滋滋啦啦的)

  • 下载的输入法怎么启用(下载的输入法怎么用)

    下载的输入法怎么启用(下载的输入法怎么用)

  • 网速变慢的原因及解决办法(网速变慢的原因有哪些)

    网速变慢的原因及解决办法(网速变慢的原因有哪些)

  • 苹果7微信闪退是什么原因(苹果手机微信闪退怎么解决)

    苹果7微信闪退是什么原因(苹果手机微信闪退怎么解决)

  • 苹果x要不要升级13.3

    苹果x要不要升级13.3

  • sr号码是什么(sr是干嘛的)

    sr号码是什么(sr是干嘛的)

  • 操作系统的处理器调度程序使用什么技术(操作系统的处理器管理主要解决)

    操作系统的处理器调度程序使用什么技术(操作系统的处理器管理主要解决)

  • 为什么qq文件安全扫描失败(为什么qq文件安全检查未通过)

    为什么qq文件安全扫描失败(为什么qq文件安全检查未通过)

  • iPhone如何拒接所有陌生号码来电(iphone怎么设置拒接所有电话)

    iPhone如何拒接所有陌生号码来电(iphone怎么设置拒接所有电话)

  • 域名系统dns的功能是(域名dns的功能)

    域名系统dns的功能是(域名dns的功能)

  • qq精确查找是怎么加的(qq精确查找怎么知道我名字)

    qq精确查找是怎么加的(qq精确查找怎么知道我名字)

  • wifi设置静态什么意思(wifi设置静态有什么用)

    wifi设置静态什么意思(wifi设置静态有什么用)

  • 华为畅享10plus是闪充吗(华为畅享10plus是什么屏幕)

    华为畅享10plus是闪充吗(华为畅享10plus是什么屏幕)

  • 台式电脑进不了系统怎么办(台式电脑进不了bios怎么办)

    台式电脑进不了系统怎么办(台式电脑进不了bios怎么办)

  • 什么叫免拼成功(免拼成功是不是拼单成功)

    什么叫免拼成功(免拼成功是不是拼单成功)

  • 什么叫反片打印(什么叫反片打印图片)

    什么叫反片打印(什么叫反片打印图片)

  • vnr怎么用(vnr怎么用腾讯翻译)

    vnr怎么用(vnr怎么用腾讯翻译)

  • x27pro什么时候开售(vivox27pro发售时间)

    x27pro什么时候开售(vivox27pro发售时间)

  • oppo手机如何把手机黑名单的手机号拉出来(oppo手机如何把通讯录导入手机卡)

    oppo手机如何把手机黑名单的手机号拉出来(oppo手机如何把通讯录导入手机卡)

  • iphonex停产原因(iphonex停产了没)

    iphonex停产原因(iphonex停产了没)

  • crypserv.exe是什么进程?crypserv.exe是病毒吗?(cryptfunction.exe)

    crypserv.exe是什么进程?crypserv.exe是病毒吗?(cryptfunction.exe)

  • 上个月结余应该做到这个月收入里面吗
  • 销售商品价格含税吗
  • 其他债权投资公允价值变动影响摊余成本吗
  • 房地产企业成本分摊方法整理(附案例分析)
  • 资产划转涉税解读
  • 交易性金融资产公允价值变动计入
  • 短期负债包括哪些债务
  • 支付税收罚款怎么算企业所得税
  • 计提房屋折旧会计分录
  • 设备安装费计入设备成本吗
  • 非正常损失对应的进项税额
  • 春节公司发福利买什么东西
  • 专用发票百万元版申请要求
  • 诊所购药有差价怎么办
  • 注册资本与注册资金的区别
  • 结转出租包装物的成本
  • 受委托研发企业可以享受研发支出吗
  • 分期收款什么是分期还款
  • 汇回投资方的现值怎么算
  • 4s店修车送保养
  • 怎么关闭电量低
  • 成本核算核算要素有哪些
  • packethsvc.exe - packethsvc是什么进程 有什么用
  • 品牌使用费分录
  • 公司购买预付卡送礼怎么入账
  • 反射调用set方法
  • 公司所有费用都让一人报销
  • 长期挂账的在建工程如何处理
  • 目前税收工作中存在的主要问题及对策
  • 毕业证原件掉了可以报考社工证吗
  • uni-app实战教程
  • thinkphp框架结构
  • php连接mysql数据库步骤正确的是
  • docker-p
  • php uniqueid
  • javascripts
  • 蓝桥杯咋样
  • 社会保险基数怎么办
  • 锅炉维修项目
  • 合伙企业个人所得税怎么算
  • phpcms验证码不显示
  • 合并会计报表编制实例
  • 商业承兑汇票在网银上怎么查询
  • sqlserver监视器
  • 免征增值税的会计处理
  • 小规模纳税人开的专票对方可以抵扣吗
  • 转让股权溢价账务处理会计分录
  • 弥补以前年度亏损报表怎么填
  • 政府补助会计处理方法由总额法变为净额法
  • 其他应付款怎么冲平影响会计利润吗
  • 劳动保护费进什么科目
  • 长期股权投资损失可以税前扣除吗
  • 合同分三次付款怎么写
  • 先开收据再打款
  • 没有发票财务报表怎么做
  • 当月发生的费用下月支付
  • 计算机二级考试时间2024
  • 数据库日期要加引号吗
  • linux统计重复次数
  • win7清除usb插拔记录
  • Windows Server 2003下DHCP服务器的安装与简单配置图文教程
  • 在windows七中
  • window系统大全
  • win8怎么设置自动开机
  • windows怎么安装
  • win7系统无法修复怎么办
  • win10如何创建系统分区
  • dpd参数
  • linux卸载repo
  • opengl文档窗口是什么
  • 搞定immutable.js详细说明
  • jQuery Easyui datagrid editor为combobox时指定数据源实例
  • android get
  • android study
  • 安卓开发日记本
  • 22号天蝎座的运势
  • 使用灭火器人要站在上风口还是下风口
  • 如何查询纳税信用级别
  • 中央与地方增值税
  • 公司注销报税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设