小程序<web-view>调研

<web-view>

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

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

属性名 类型 默认值 说明
src String none webview 指向网页的链接。需登录小程序管理后台配置域名白名单。

示例代码:

<!-- wxml -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

相关接口 1

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

接口名 说明 最低版本
wx.miniProgram.navigateTo 参数与小程序接口一致 1.6.4
wx.miniProgram.navigateBack 参数与小程序接口一致 1.6.4
wx.miniProgram.switchTab 参数与小程序接口一致 即将开放
wx.miniProgram.reLaunch 参数与小程序接口一致 即将开放
wx.miniProgram.redirectTo 参数与小程序接口一致 即将开放

示例代码:

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

// javascript
wx.miniProgram.nav  igateTo({url: '/path/to/page'})

相关接口 2

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

接口模块 接口说明 具体接口
判断客户端是否支持js checkJSApi
图像接口 拍照或上传 chooseImage
预览图片 previewImage
上传图片 uploadImage
下载图片 downloadImage
获取本地图片 getLocalImgData
音频接口 开始录音 startRecord
停止录音 stopRecord
监听录音自动停止 onVoiceRecordEnd
播放语音 playVoice
暂停播放 pauseVoice
停止播放 stopVoice
监听语音播放完毕 onVoicePlayEnd
上传接口 uploadVoice
下载接口 downloadVoice
智能接口 识别音频 translateVoice
设备信息 获取网络状态 getNetworkType
地理位置 使用内置地图 getLocation
获取地理位置 openLocation
摇一摇周边 开启ibeacon startSearchBeacons
关闭ibeacon stopSearchBeacons
监听ibeacon onSearchBeacons
微信扫一扫 调起微信扫一扫 scanQRCode
微信卡券 拉取使用卡券列表 chooseCard
批量添加卡券接口 addCard
查看微信卡包的卡券 openCard
长按识别 小程序圆形码

相关接口 3

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

示例代码:

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

相关接口 4

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。

示例代码:

// web-view下的页面内
console.log(window.__wxjs_environment === 'miniprogram') // true

快速接入<web-view>

1. 由于该组件是由基础库1.6.4开始支持,需先更新开发者工具,选择基础库版本1.6.4

屏幕快照 2017-11-08 11.30.05.png

2. 配置业务域名

开发者登录小程序后台mp.weixin.qq.com,选择设置-开发设置-业务域名,新增配置域名模块

业务域名配置

3. wxml中,使用<web-view>组件,并设置src为上面配置的域名

<web-view src="https://tongdulong.cccwei.com/"></web-view>

调研中遇到的问题

问题一 :

屏幕快照 2017-11-08 11.34.53.png

出现该错误是由于域名没有成功配置,或者没有使用https

问题二 :

image.png

问题三 :

image.png

在配置wx.config时url必须为当前页面url
html文件最好直接命名为index.html

相关文档地址

<web-view>官方文档
JSSDK官方文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容