小程序：web-view採坑指南

 

最近負責開發的【廣州醫保查詢】小程序已經發布上線，其中使用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的使用場景愈來愈少！

 

 

最後，附上【廣州醫保查詢】，歡迎你們體驗！