E企盈营销工具技术服务商 热线:4006-838-530

微信小程序中webview的使用,实现小程序与h5页面间跳转

E企盈直播平台营销卖货系统

微信小程序文档中提到,web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。web-view的出现,可以缓解小程序size告急的问题。web-view的使用方法:<!– wxml –><!– 指向微信公众平台首页的web-view –><web-view src=”https://mp.weixin.qq.com/”></web-view>src是一个网站的url,默认值是none,webview指向网页的链接。web-view是如何进行小程序和h5通信的:1. 小程序到web-view:本质上WEB-VIEW也是小程序的一个页面,所以小程序到web-view是正常的小程序间的通信,通过wx.navigateTo、wx.redirectTo,带上url参数,query参数就像正常url的参数一样跟着后面,然后在web-view的页面的Page实例里面通过onLoad的方法的参数来获取url的值,设置给web-view的src属性为改值即可。// 点击banner进入页面详情goPageDetail(e) {    const { url, h5 } = e.currentTarget.dataset;    if (url !== ‘/’) {      wx.navigateTo({        url      });    } else {      wx.navigateTo({        url: `/pages/article/webview/index?h5=${h5}`      });    }}, 2.web-view到小程序:由于在web-view的跳转通常是在src对应的网页中的操作来处理的,所以需要结合jssdk来处理,不需要wx.config配置,直接通过script标签来引入https://res.wx.qq.com/open/js/jweixin-1.3.0.js,就可以使用wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo接口,就像小程序之间的跳转一样,单是只能在当前小程序页面内跳转。<!DOCTYPE html><html lang=”en”><head>    <meta charset=”UTF-8″>    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>    <title>h5跳转到小程序页面</title></head><body>  <div class=”app”>    <p>this is h5页面。</p>    <button type=”button” id=”btn”>返回小程序</button>  </div>  <script src=”https://test.com/jquery.js”></script>  <script src=”https://res.wx.qq.com/open/js/jweixin-1.3.0.js”></script>  <script>      /* eslint-disable */    $(function(){      $(‘#btn’).on(‘click’,function(s) {        wx.miniProgram.navigateTo({          url:’/pages/index/index?id=xxx’,          success: function(){              console.log(‘success’)          },          fail: function(){              console.log(‘fail’);          },          complete:function(){              console.log(‘complete’);          }          });      });    });  </script></body></html>web-view中踩的坑:1.打开的域名没有在小程序管理后台设置业务域名(注意是业务域名,不是服务器域名)2.打开的页面必须为https服务3.打开的页面302过去的地址也必须设置过业务域名4.web-view空白问题,请升级微信客户端到 6.5.165.页面可以包含iframe,但是iframe的地址必须为业务域名6.web-view不支持支付能力,web-view的API能力见web-view的文档说明7.开发者自己检查自己的https服务是否正常,测试方法:普通浏览器打开对应的地址8.如果web-view使用了公众号授权的服务,开发者工具提示网页开发者的问题,请见:公众号开发 微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序中webview的使用,实现小程序与h5页面间跳转
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏