微信小程序webview内嵌h5页面

微信官方文档web-view | 微信开放文档

正式上线前准备(前期开发调试可以忽略)

  • 首先登录小程序管理后台,把 web-view 直连的 h5 页面地添加到配置域名白名单中
  • 比如我想要小程序直连地址为https://me.csdn.net/weixin_39550080的页面,那就应该把https://me.csdn.net添加到 webview 业务域名白名单中 (注意不是 request 的域名白名单)。配置完成后,在微信开发者工具配置详情可以看到,如下图

具体实现

  • 使用 web-view 组件时,最好在小程序上单独配置一个页面路由,比如:pages/webview/index。该页面只有一个组件就是 web-view,link就是对应的 h5 页面地址。域名配置完成后,进入小程序pages/webview/index路径,页面就会打开 web-view 从而直连link对应的 h5 页面了。
  • bindmessage用于监听 web-view 的 h5 页面向小程序发送信息的,对应的处理函数就是在小程序里自己自定义的getMessage。这是 h5 页面向小程序通信的唯一手段,后面会再做介绍
  • web-view 目前只有 src 和 bindmessage 两个属性。
<web-view src="{{link}}" bindmessage="getMessage"></web-view>

在开发环节,做调试

  • 小程序工具——详情(右上角)——本地设置——勾选 不校验合法域名、web-view、TLS版本以及HTTPS证书
  • 在微信开发者中,打开一个 web-view 页面之后,单击鼠标右键会出现一个 "调试" 按钮,点击会弹出另一个调试窗口。(可以使用本地的地址,例:http://192.168.0.179:8080/)
  • h5 页面的代码以及调取接口的信息会在新的调试窗口里展示,包括 h5 页面的 debug 断点也要在新的调试窗口里添加,该 web-view 关闭后对应的调试窗口也跟着关闭。

h5 页面与小程序之间通信

  • 首先,在 h5 页面要引入微信的 JSSDK 文件,引入完成后可以调用 wx.miniProgram 暴露的一些接口。
// 导入依赖包
npm i -S weixin-js-sdk 
//或
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// 页面使用
import wx from 'weixin-js-sdk'
  • 在H5内可通过window.__wxjs_environment变量判断是否在小程序环境,建议在WeixinJSBridgeReady回调中使用,也可以使用 JSSDK 1.3.2 提供的getEnv接口。
// web-view下的H5页面内
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

// 或者
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})
  • 确认在 web-view 环境之后,可以调用wx.miniProgram.postMessage(data{...})接口来向小程序传递数据,调用后会在小程序触发bindmessage的监听。
// H5页面:通过 wx.miniProgram.postMessage 可以向小程序传值
wx.miniProgram.postMessage({
    data: 'foo'
})
// 小程序页面:接收 h5 页面传递过来的参数
getMessage: function (e) {
  const data = e.data;
  console.log(data);
}
  • wx.miniProgram 还有其他一些接口,比如wx.miniProgram.navigateTo({url: '...'}),wx.miniProgram.switchTab({url: '...'})就可以直接从当前 web-view 跳转到小程序的其他页面。
wx.miniProgram.navigateTo({url: '...'}), // 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
wx.miniProgram.switchTab({url: '...'}), // 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  • 而小程序向 h5 通信,就只能刚打开 web-view 时,把参数从 url 上带过去。
// demo,通过url把小程序token带到H5页面
 link:'http://192.168.0.179:8080/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.KKKsiM'

注意事项

  1. 网页内 iframe 的域名也需要配置到域名白名单。
  2. 开发者工具上,可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。
  3. 每个页面只能有一个 web-viewweb-view 会自动铺满整个页面,并覆盖其他组件。
  4. web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
  5. 在 iOS 中,若存在 JSSDK 接口调用无响应的情况,可在 web-view 的 src 后面加个 #wechat_redirect 解决。
  6. 避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent。
以下是微信小程序webview嵌入h5页面调用微信支付的完整代码: HTML页面: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信支付demo</title> </head> <body> <button onclick="callPay()">微信支付</button> <script type="text/javascript"> function callPay() { // 构造支付参数 var params = { appId: '你的appId', timeStamp: '时间戳', nonceStr: '随机字符串', package: '预支付交易会话标识', signType: 'MD5', paySign: '支付签名' }; // 调用微信支付接口 WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res){ // 支付结果处理 if(res.err_msg == "get_brand_wcpay_request:ok"){ // 支付成功 }else{ // 支付失败 } }); } // 判断是否在微信内置浏览器中打开 if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', callPay, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', callPay); document.attachEvent('onWeixinJSBridgeReady', callPay); } }else{ callPay(); } </script> </body> </html> ``` 小程序页面: ``` <web-view src="https://你的H5页面地址"></web-view> ``` 小程序JS代码: ``` Page({ onReady: function () { // 获取web-view组件 var webview = this.selectComponent("#webview"); // 监听web-view中的页面加载完成事件 webview.onMessage(function(e){ if(e.detail == 'loadFinish'){ // web-view中的页面加载完成后,调用支付接口 wx.request({ url: 'https://你的支付接口地址', method: 'POST', data: { // 构造支付参数 appId: '你的appId', timeStamp: '时间戳', nonceStr: '随机字符串', package: '预支付交易会话标识', signType: 'MD5', paySign: '支付签名' }, success: function(res){ // 将支付参数传递给web-view中的页面 webview.postMessage({type: 'pay', data: res.data}); } }) } }) } }) ``` 需要注意的是,在小程序中调用微信支付接口需要在小程序后台配置支付授权目录,否则会出现调用失败的情况。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

回忆哆啦没有A梦

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值