标题: 微信小程序承载网页 web-view [打印本页]

---

作者: vicky.yu    时间: 3 天前 10:29     标题: 微信小程序承载网页 web-view

web-view
基础库 1.6.4 开始支持，低版本需做兼容处理
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

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

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/" rel="external nofollow" ></web-view>
相关接口 1
<web-view/>网页中可使用JSSDK 1.3.0提供的接口返回小程序页面。 支持的接口有：

接口名        说明        最低版本
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
示例代码：

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

// javascript
wx.miniProgram.navigateTo({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下的页面内
wx.ready(function() {
    console.log(window.__wxjs_environment === 'miniprogram') // true
})
Bug & Tip
网页内iframe的域名也需要配置到域名白名单。
开发者工具上，可以在 <web-view/> 组件上通过右键 - 调试，打开 <web-view/> 组件的调试。
每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件。
<web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。
在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个#wechat_redirect解决。

---

欢迎光临 赛捷软件论坛 (http://www.sagesoft.cn/bbs/)

Powered by Discuz! 7.2