微信小程序开发

微信小程序开发教程--承载网页的容器web-view

2018/7/28 23:29:29 人评论 次浏览

web-view

基础库 1.6.4 开始支持,低版本需做兼容处理

web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

属性名类型默认值说明
srcString
webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。
bindmessageEventHandler
网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }

示例代码:

<!-- wxml --><!-- 指向微信公众平台首页的web-view --><web-view src="https://mp.weixin.qq.com/"></web-view>
相关接口 1

<web-view/>网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有:

接口名说明最低版本
wx.miniProgram.navigateTo参数与小程序接口一致1.6.4
wx.miniProgram.navigateBack参数与小程序接口一致1.6.4
wx.miniProgram.switchTab参数与小程序接口一致1.6.5
wx.miniProgram.reLaunch参数与小程序接口一致1.6.5
wx.miniProgram.redirectTo参数与小程序接口一致1.6.5
wx.miniProgram.postMessage向小程序发送消息1.7.1
wx.miniProgram.getEnv获取当前环境1.7.1

示例代码:

在开发者工具中预览效果

<!-- html --><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })
相关接口 2

<web-view/>网页中仅支持以下JSSDK接口

接口模块接口说明具体接口
判断客户端是否支持js
checkJSApi
图像接口拍照或上传chooseImage

预览图片previewImage

上传图片uploadImage

下载图片downloadImage

获取本地图片getLocalImgData
音频接口开始录音startRecord

停止录音stopRecord

监听录音自动停止onVoiceRecordEnd

播放语音playVoice

暂停播放pauseVoice

停止播放stopVoice

监听语音播放完毕onVoicePlayEnd

上传接口uploadVoice

下载接口downloadVoice
智能接口识别音频translateVoice
设备信息获取网络状态getNetworkType
地理位置使用内置地图getLocation

获取地理位置openLocation
摇一摇周边开启ibeaconstartSearchBeacons

关闭ibeaconstopSearchBeacons

监听ibeacononSearchBeacons
微信扫一扫调起微信扫一扫scanQRCode
微信卡券拉取使用卡券列表chooseCard

批量添加卡券接口addCard

查看微信卡包的卡券openCard
长按识别小程序圆形码
相关接口 3

用户分享时可获取当前<web-view/>的URL,即在onShareAppMessage回调中返回webViewUrl参数。

示例代码:

Page({
  onShareAppMessage(options) {    console.log(options.webViewUrl)
  }
})
相关接口 4

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境,建议在WeixinJSBridgeReady回调中使用,也可以使用JSSDK 1.3.2提供的getEnv接口。

示例代码:

// web-view下的页面内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})
Bug & Tip
  1. 网页内iframe的域名也需要配置到域名白名单。

  2. 开发者工具上,可以在 <web-view/> 组件上通过右键 - 调试,打开 <web-view/> 组件的调试。

  3. 每个页面只能有一个<web-view/><web-view/>会自动铺满整个页面,并覆盖其他组件。

  4. <web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。

  5. 在iOS中,若存在JSSDK接口调用无响应的情况,可在<web-view/>的src后面加个#wechat_redirect解决。