<web-view>概况
使用 <web-view> 标签能在小程序中打开外部网页，但是要打开的网页的域名必须跟小程序的业务域名（业务域名可以在小程序的后台管理界面添加）一致，否则在真机上是打不开的。如果开发工具上勾选了‘不校验域名’，在开发的时候还是能打开的，但也没用，线上是打不开的。
不管有没有内容，<web-view> 会占满整个屏幕。
<web-view> 内嵌H5，更新代码发布上线可以绕过审核。
<web-view>的限制
- 使用限制：对个人类型和海外类型的小程序暂不支持
- 指向域名的限制：域名必须为 https 协议且经过ICP备案
- 域名修改限制：一个小程序最多可添加20个域名，一年可修改50次
- 基础库限制：基础库 1.6.4 以上版本支持这组件
注：配置域名时，需要从配置后台下载校验文件放在域名根目录下，验证通过后才能配置成功。
实例：
1. index.wxml
<web-view src="https://www.baidu.com/"></web-view>
错：
开发的时候有时会遇到如下提示：
原因是内嵌的H5页面也是要通过微信授权才能开发的，像开发小程序一样把自己添加到H5页面的开发者里面去就好了。
小程序和内嵌页面的联系
小程序提供了H5网页中使用的JSSDK文件，如下引用：
<!-- html --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script> // javascript wx.miniProgram.navigateTo({url: '/path/to/page'})
引入SDK后可以调用小程序JSSDK提供的API，虽然不如小程序原生API丰富，但也有获取设备网络状态、地理位置、微信扫一扫、摇一摇、长按识别、拍照等接口。
截止目前为止，小程序基本不能获取网页的数据，只有在用户分享的时候，可以从返回的参数中获取 <web-view> 组件当前显示的页面路径。
注意事项：
1：如果h5页面有请求必须是https请求；
2：如果不是内嵌h5域名不是和当前小程序一样需要在小程序后台配置业务域名；
3：内嵌的h5页面占满了整个屏幕覆盖了原有组件；（通过一下方式可以解决但是在开发者工具上没有效果在真机 上可以显示显示）
1：link.wxml
<web-view src="{{url}}"> <cover-view class="tool-bar"> <cover-image src="../../images/gif/fcv58.gif" class="nav-bg"></cover-image> <cover-view class="tool-btn"> <cover-view > <button plain="true" open-type="contact" session-from="weapp">客服</button> </cover-view> </cover-view> </cover-view> <cover-view class="tool-btn-bar"> <cover-image src="../../images/gif/btnv58.gif" class="nav-btn-bg"></cover-image> <cover-view class="tool-btn-btn"> <cover-view > <button bindtap="sendKey" plain="true" open-type="contact" session-from="weapp">客服</button> </cover-view> </cover-view> </cover-view> </web-view>
2:link.wxss
/* pages/link/link.wxss */ .imgBg{width: 100%;height: 100%;} .tool-bar { color: #fff; position: fixed; bottom: 53%; right: 0rpx; width: 80rpx; height: 80rpx; border-radius: 8rpx; z-index: 999999; /*box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.15);*/ } .nav-bg { width: 80rpx; height: 80rpx; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 8rpx; } .tool-btn { width:80rpx; height: 80rpx; position: absolute; top: 0rpx; left: 0rpx; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .tool-btn button{border:none;height:80rpx;background:none;border-radius:0; line-height:80rpx;color:#333;font-size:20rpx;text-align:center;} .tool-btn button:after{border:none;} .tool-btn-bar { color: #fff; position: fixed; bottom: 0%; right: 0rpx; width: 100%; height: 100rpx; border-radius: 8rpx; z-index: 999999; /*box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.15);*/ } .nav-btn-bg { width: 100%; height: 100rpx; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 8rpx; } .tool-btn-btn { width:100%; height: 100rpx; position: absolute; top: 0rpx; left: 0rpx; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .tool-btn-btn button{border:none;height:100%;background:none;border-radius:0; line-height:100rpx;color:#333;font-size:20rpx;text-align:center;} .tool-btn-btn button:after{border:none;}
3:link.js
// pages/link/link.js const app = getApp(); var api = require('../../utils/api.js'); var request = require('../../utils/request.js'); Page({ /** * 页面的初始数据 */ data: { // url: '/mjob/my/index' url: 'https://m.dajie.com/apps/cyberstar/v58', // url: 'https://www.meishitong168.com/h5/sign/login/index?fromType=3', session_key:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this // console.log("options", options) // if (options.id == 3){ // that.setData({ // url: options.url // }) // } else{ // that.setData({ // // url: 'https://mp.weixin.qq.com/s?__biz=' + options.__biz + '==&mid=' + options.mid + '&idx=' + options.idx + '&sn=' + options.sn + '&chksm=' + options.chksm + '&mpshare=' + options.mpshare + '&scene=' + options.scene + '&srcid=' + options.srcid + '&sharer_sharetime=' + options.sharer_sharetime + '&sharer_shareid=' + options.sharer_shareid + '#rd' // url: 'https://mp.weixin.qq.com/s?__biz=' + options.__biz + '==&mid=' + options.mid + '&idx=' + options.idx + '&sn=' + options.sn + '&chksm=' + options.chksm + '#rd' // }); // } console.log('options') console.log(options) console.log(this.data.url) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { console.log('app') // this.getCodeMsg() }, handleContact(e){ console.log(e) }, // 通过code获取加密字符串 getCodeMsg: function () { var that = this; wx.request({ url: api.API_SESSION_KEY, method: 'GET', data: { code: app.globalData.code }, success: function (res) { // debugger; res = res.data; // wx.showToast({ // title: JSON.stringify(res), // icon: 'success', // duration: 20000000 // }) console.log(res) if (res.statusCode == 0) { console.log('生成third_session成功'); // 设置third_session_key // var thirdSession = res.data.third_session; // that.globalData.third_session_key = thirdSession; // wx.setStorageSync('third_session_key', thirdSession); // // 设置selfOpenId // var selfOpenId = res.data.selfOpenId; // that.globalData.selfOpenId = selfOpenId; // wx.setStorageSync('selfOpenId', selfOpenId); // util.isFuction(fn) && fn(); } else { // console.log(res.data.msg); } }, fail: function () { console.log('error111'); }, complete: function () { console.log('error222'); } }); }, // 点击唤起客服信息时候发送加密key sendKey: function (e) { console.log(e) var dataTime = e.currentTarget.dataset['time'] var data = { b: dataTime, r: new Date().getTime() } // 发送pv uv request.sendPvUv(data) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })
4:web-view组件：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html