?????? 隨著小程序支持HTTPS網頁嵌入，小程序與H5頁面混合開發將是大勢所趨，就如同現在APP開發一樣亦是混合開發，部分功能使用H5頁面實現，至少有如下2個好處：

??????? 1）、解決小程序審核等待問題：只要修改WEB頁面即可，無需發布審核，這里需要注意小程序Web-View組件的緩存問題。如果不做特殊處理，即使WEB頁面已經更新，可能看到的還是老頁面。

??????? 2）、解決頁面公用問題：尤其當小程序調用一部分已有功能時、或多個小程序需要重用模塊時，使用Web-View組件調用WEB頁面是個好選擇。

??????? 另外，騰訊已經為小程序混合WEB頁面開發提供了2件利器：WEUI和微信JSSDK。那么，小程序與WEB頁面如何有效混合開發呢？個人認為無非解決2個問題：

??????? 1）、了解小程序和H5差異，明確哪些功能用小程序實現，哪些功能用H5開發；

??????? 2）、統一認證及統一UI問題。

???????

??????? 一、小程序與H5開發差異及小程序和H5功能劃分問題

??????? 1、小程序與H5開發差異

??????? 1）js使用限制

??????? 處于安全考慮，凡是通過傳入字符串來執行代碼都被禁用了，具體有：new Function, eval, Generator，如常用的通過eval把json字符串轉json對象就不行啦。當然直接好處是基本上可以規避html頁面由于動態執行js導致的xss安全問題啦。

??????? 由于小程序并非運行在瀏覽器中，因此不能操作document, window等瀏覽器對象，當然也不能操作cookie。

??????? 2）小程序相比H5的改進優化

??????? 小程序提供storage支持同步、異步，比H5的localstorage、sessionstorage跟好用。由于js使用限制，安全性較H5頁面高，由于不能使用cookie因此也無需考慮瀏覽器禁用cookie問題。

??????? 3）小程序相比H5的劣勢

?????? 打開的頁面有5個限制，鏈接深度為5個頁面，超過5個頁面，后續頁面跳轉不會響應。不能操作dom，頁面靈活性差。WXSS較原生CSS而言做了一定程度的閹割，如沒有*，:link, :visited, :hover, :not等選擇器，不支持運算符等。

??????? 2、小程序與H5的功能取舍

??????? 這個很難統一定論，不同項目應有不同取舍標準，關鍵在于我們是否明確小程序與H5各自的長短處。

??????? 二、統一認證及統一UI問題

????????統一認證無非就是WEB服務器如何識別來自小程序的URL請求是合法請求問題，諸如accessToken認證等已有很多實現，本文不再贅述。至于UI統一問題，UI前端團隊不是很強的話，強烈建議使用WEUI，一貫的微信體驗，并有Toast、Loading框等常用的JS組件。

??????? WEUI，是騰訊提供的一套微信風格的UI框架，包括：WEUI-CSS和部分組件JS。

??????? 1、WEUI-CSS

??????? 1）github地址：https://github.com/Tencent/weui，WEUI相關資源都可以在此處獲取；

??????? 2）WEUI-wiki：https://github.com/Tencent/weui/wiki，weui文檔，內含Cell，Flex等常用CSS說明；

??????? 3）WEUI-DEMO：https://weui.io，建議使用Chrome、火狐等瀏覽器瀏覽，方便查看元素；

??????? 相比較Bootstrap而言，WEUI文檔有點不足，建議大家先閱讀wiki，對其常用的CSS組件有些認識，然后再花點時間分析DEMO，最后直接查看weui.css源文件。

????????2、WEUI-JS?

??????? 1）github地址：https://github.com/Tencent/weui.js，wiki、代碼等都可以在此處獲取；

??????? 2）文檔：https://github.com/Tencent/weui.js/blob/master/docs/README.md，有ActionSheet等常用組件的調用說明；

??????? 3）DEMO：https://weui.io/weui.js/，建議使用Chrome、火狐等瀏覽器查看，方便查看元素、跟蹤代碼；

??????? 相比較WEUI-CSS而言，個人覺得WEUI-JS更容易上手，2步：

??????? 1）頁面引入weui.css, weui.js文件；

??????? 2）通過weui全局調用即可，如下：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"> <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script> <script type="text/javascript">weui.alert('alert'); </script>

??????? 3）更多組件使用說明，大家參考https://github.com/Tencent/weui.js/blob/master/docs/README.md文檔，另外大家也可以參考DEMO中的example.js文件，如顯示loading框

/* loading */document.querySelector('#loadingBtn').addEventListener('click', function () {var loading = _weui2.default.loading('loading');??? // _weui2.default 替換成weui即可setTimeout(function () {loading.hide();}, 3000);});

????????

總結

以上是生活随笔為你收集整理的小程序与H5如何混合开发及WEUI那些事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。