<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