<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;}View Code
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() {
}
})View Code
4:web-view组件：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
