最近負責開發的【廣州醫保查詢】小程序已經發布上線，其中使用web-view組件完成的【在線綁定社保卡】核心流程，遇到了一些坑，現總結如下：
首先，讓我們一起看看什么是web-view ？
小程序api定義：
web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面。個人類型與海外類型的小程序暫不支持使用。
1# 開發賬號一定要是公司類型賬號；個人類型和海外類型暫不支持！
只有公司賬號才可以看到業務域名添加入口；且業務域名只支持https，需要備案；
域名格式只支持英文大小寫字母、數字及“- ”，不支持IP地址及端口號。
配置前：
配置成功后：
2# 第三方網頁以及網頁iframe涉及到的所有域名，都要是https,並且要加域名校驗；
這里要注意，即使是用來做頁面跳轉用的過渡域名，也要加域名校驗！
第三方域名校驗是我認為使用web-view的開發小程序最大的風險點！
如果在需求評審階段，沒辦法避免使用第三方的開放能力或調用第三方的服務，第一步就要想辦法讓對方配合做域名校驗；
校驗成功后，再進入其他流程的開發。
校驗注意事項：
保證校驗文件有效地放在域名的根目錄，比如要對https://www.xxx.968309.com 做校驗，那么 就要使得：https://www.xxx.968309.com/校驗文件名 是可以被有效訪問的！
校驗前：
校驗后：
3# web-view 組件內包含的網頁支持跳轉返回小程序
首先引入小程序官方提供的基本js庫
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
其次，根據api，在網頁上加上相關處理代碼,，比如：
var miniAppcode = $('#appCode').val();
if(miniAppcode == 'miniProgram'){
$('#backToListBtn').removeAttr('onclick').text('返回首頁');
$('#backToListBtn').click(function(){
wx.miniProgram.reLaunch({url: '/pages/index/index'})
})
}
4# 通過web-view ，我們能解決什么問題？
場景一：必須要使用的第三方的開發能力，且對方只能提供H5網頁的方案；
場景二：完全通過使用web-view嵌套也有的H5產品方案，來實現對應小程序產品的發布；
場景三：因為目前wx.navigateTo 支持的頁面路徑最多只能十層；web-view也可以解決頁面層級比較深的業務流程；
場景四：因為目前小程序要求代碼包大小不超過2MB，針對一些業務復雜，功能繁多的小程序產品，也可以通過web-view把一些流程用通過嵌套網頁的形式實現。
當然，肯定也有其他更多的場景；這里我只列出我大概想到的，算是拋磚引玉，大家仁者見仁！
隨着像美團前端團隊的mpvue（基於Vue），已經京東凹凸實驗室的Taro（基於React ）等優秀的支持小程序的多端開發框架的出現；
小程序和H5網頁的邊界會漸漸模糊，一套代碼，支持多端，會讓web-view的使用場景越來越少！
最后，附上【廣州醫保查詢】，歡迎大家體驗！
