微信小程序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'

注意事项

网页内 iframe 的域名也需要配置到域名白名单。
开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
在 iOS 中，若存在 JSSDK 接口调用无响应的情况，可在 web-view 的 src 后面加个 #wechat_redirect 解决。
避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。

微信小程序webview内嵌h5页面相关推荐

微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
【愚公系列】2022年09月微信小程序-webview内嵌网页的授权认证
文章目录前言一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面二.web端相关函数 1.判断是否是小程序环境前言随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...
微信小程序web-view内嵌公众号网页分享功能实现
web-view嵌入网页分享,有二种分享情况 1.小程序分享出当前打开的页面 2.部分页面要求,分享指定页面,而不是当前的页面以下是代码部分一.web-view内嵌公众号网页 ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
微信小程序中内嵌一个h5页面
1.写好要嵌入的html页面 PS:我是用sublime编辑器编写的html页面,从后台服务器上面读取数据(富文本的内容),追加到body里面,再上传到前端服务器上面 2.把h5文件夹(包括多个需要内 ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...

微信小程序webview内嵌h5页面

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

具体实现

在开发环节，做调试

h5 页面与小程序之间通信

注意事项

微信小程序webview内嵌h5页面相关推荐

最新文章

热门文章