<web-view />
组件用于承载 H5 网页,自动铺满整个小程序页面。
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
src | String | 无 | web-view 要渲染的 H5 网页 URL |
onMessage | EventHandle | 无 | 网页向小程序 postMessage 消息。e.detail = { data } |
每个页面只能有一个<web-view />
,请不要渲染多个<web-view />
,会自动铺满整个页面,并覆盖其它组件。
<!-- axml -->
<!-- 指向支付宝首页的web-view -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>
<web-view />
H5页面可以使用手动引入 https://appx/web-view.min.js
(此链接仅支持在 mPaaS 客户端内访问), 提供了相关的接口返回小程序页面。支持的接口有:
接口类别 | 接口名 | 说明 |
---|---|---|
导航栏 | my.navigateTo | 保留当前页面,跳转到应用内的某个指定页面 |
导航栏 | my.navigateBack | 关闭当前页面,返回上一级或多级页面 |
导航栏 | my.switchTab | 跳转到指定 tabBar 页面,并关闭其他所有非 tabBar 页面 |
导航栏 | my.reLaunch | 关闭当前所有页面,跳转到应用内的某个指定页面 |
导航栏 | my.redirectTo | 关闭当前页面,跳转到应用内的某个指定页面 |
图片 | my.chooseImage | 拍照或从手机相册中选择图片 |
图片 | my.previewImage | 预览图片 |
位置 | my.getLocation | 获取用户当前的地理位置信息 |
位置 | my.openLocation | 使用内置地图查看位置 |
交互反馈 | my.alert | alert 警告框 |
交互反馈 | my.showLoading | 显示加载提示 |
交互反馈 | my.hideLoading | 隐藏加载提示 |
缓存 | my.setStorage | 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的数据 |
缓存 | my.getStorage | 获取缓存数据 |
缓存 | my.removeStorage | 删除缓存数据 |
缓存 | my.clearStorage | 清除本地数据缓存 |
缓存 | my.getStorageInfo | 异步获取当前storage的相关信息 |
网络状态 | my.getNetworkType | 获取当前网络状态 |
向小程序发送消息 | my.postMessage | 向小程序发送消息,自定义一组或多组key、value数据,格式为JSON,如:my.postMessage({name:”测试web-view”}) |
监听小程序发过来的消息 | my.onMessage | 监听小程序发过来的消息, webview 组件控制 |
获取当前环境 | my.getEnv | 获取当前环境 |
<web-view />
H5页面:
<!-- html -->
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// 如该 H5 页面需要同时在非 mPaaS 客户端内使用,为避免该请求404,可参考以下写法
// 请尽量在 html 头部执行以下脚本
<script>
if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
// javascript
my.navigateTo({url: '../get-user-info/get-user-info'});
// 网页向小程序 postMessage 消息
my.postMessage({name:"测试web-view"});
// 接收来自小程序的消息。
my.onMessage = function(e) {
console.log(e); //{'sendToWebView': '1'}
}
// 判断是否运行在小程序环境里
my.getEnv(function(res) {
console.log(res.miniprogram) // true
});
my.startShare();
</script>
my.postMessage
信息发送后,小程序页面接收信息时,会执行 onMessage
配置的方法:
// 小程序页面对应的 page.js 声明 test 方法,
// 由于 page.axml 里的 web-view 组件设置了 onMessage="test",
// 当网页里执行完 my.postMessage 后,test 方法会被执行
Page({
onLoad(e){
this.webViewContext = my.createWebViewContext('web-view-1');
},
test(e){
my.alert({
content:JSON.stringify(e.detail),
});
this.webViewContext.postMessage({'sendToWebView': '1'});
},
)};
my.getEnv
示例代码:
// 判断是否运行在小程序环境里
my.getEnv(function(res){
console.log(res.miniprogram); //true
});
用户分享时可获取当前<web-view />
的 URL,即在 onShareAppMessage
回调中返回 webViewUrl
参数。
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
});
请使用 my.postMessage
接口来传递数据,代码示例如下:
my.postMessage({key1:"value1",key2:"value2"});
<web-view />
目前已支持了双向通信能力,更多细节参见 webview 组件控制 一节。
<web-view />
H5 页面可以使用手动引入 https://appx/web-view.min.js
(此链接仅支持在 mPaaS 客户端内访问),再调用 my.navigateTo 接口即可。
可将获取到的图片路径通过 my.postMessage()
将相关数据传递给小程序后进行上传。
在文档使用中是否遇到以下问题
更多建议
匿名提交