位置: 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)

  • 计提税金会计分录怎么算
  • 青岛山公寓二手房出售
  • 开发成本需要结转到存货吗
  • 药店的主营业务是什么
  • 食堂买菜费用如何做会计
  • 生产企业的基础设施是指
  • 对公账户汇款方式
  • 小规模增值税附加税税率
  • 存货占营业收入的意义
  • 房产税从价计征的计税依据
  • 劳务公司发放农民工工资的三种形式
  • 公司出售房产缴纳什么税
  • 计件工资的计算
  • 日常生活中各种仪式
  • 政府专项补助购置固定资产进项税可以抵扣吗?
  • 会计上的未达账项是什么
  • 汽车进口税率表
  • 海关进口增值税专用缴款书图片
  • 开了增值税发票不确认收入可以吗
  • 发票上单价可以开0吗
  • 关联企业借款利息扣除
  • 应收账款的周转率怎么算
  • 写着个人的发票能下账吗
  • 提供服务的发票可以抵扣税款吗?
  • 收取现金后的收入怎么算
  • 净利润和毛利润的计算公式
  • 企业接收股东划入资产作为收入处理有所得税差异吗
  • 什么叫递延所得税费用?
  • 给子公司员工发放奖金合法吗
  • 在线测网速准吗
  • 企业三大期间费用是什么
  • windows10 电脑
  • php可以连接access吗
  • i911900k与10900k
  • win11预览版怎么变回正式版
  • 固定资产减值如何确定
  • PHP:iterator_count()的用法_spl函数
  • PHP:getimagesizefromstring()的用法_GD库图像处理函数
  • 基金会债券收入吗
  • 商誉准则最新修订时间
  • 自动驾驶的时候可以睡觉吗
  • php lcg_value与mt_rand生成0~1随机小数的效果对比分析
  • 企业的安全费用怎么弄
  • 个税率是多少
  • 工业企业应收应付会计怎样
  • pyqt5 pycharm
  • 财务负责人和法人可以一个人吗
  • 社会团体费用报销制度
  • 什么是全面一次性奖金
  • 代理费属于
  • 坏账准备是资产减值损失吗
  • 购买花卉
  • 退休人员基本养老金计发表
  • 行政事业单位福利费提取比例
  • 工程款结清确认书
  • 期末存货采用成本与什么孰低法计价
  • 设备的折旧费怎么算
  • 启动mysql1067错误
  • sqlserver数据库怎么导出
  • 最新版的win10
  • win8关机立马自动重启
  • 老毛桃U盘启动盘工具安装Win8的详细图文教程
  • win10装老版本
  • sqlagent.exe - sqlagent是什么进程
  • windows8.1开始
  • 红石怎么启动
  • 十个常用linux脚本命令
  • 中小型企业的认定标准2023
  • win10预览在哪
  • opengl transform
  • nodejs获取当前路径
  • unity自动寻路插件
  • js中的!
  • unity3d从入门到精通
  • 一般纳税人开租赁费发票税率是多少
  • 个人外汇收入申报
  • 芜湖买房退契税在哪里退
  • 手撕发票查询真伪平台
  • 供热用地规划指标
  • 公司收购农民的农产品能贴我公司标签吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设