程序內嵌網頁能力開放

2017-11-02 微信公眾平臺

“ 為便于開發者靈活配置小程序，小程序現開放內嵌網頁能力。”

開發者登錄小程序后臺配置業務域名后，即可實現小程序內嵌網頁。

詳情請看：小程序支持內嵌網頁文檔說明；https://kf.qq.com/touch/sappfaq/171102ue6viI171102jm63uy.html

從移動平臺崛起以來，HTML5移動應用開發迅速變成了熱門話題，開發者們被各種開發HTML5移動應用的方法搞得暈頭轉向，今天請到了金山云基礎架構部研發負責人柴春燕給大家分享如何避免HTML5移動應用最容易踩的那些坑。

柴春燕－－

微軟社區精英計劃博客組負責人，HTML5研究小組成員，擅長HTML5及移動應用開發；

具有多年Web開發經驗，曾參與開發微軟Visual Studio 2010中文學習平臺，基于SaaS模式的E-Learning系統；

曾負責當當網Web前端開發及移動應用開發，擔任百度音樂高級研發工程師；

目前就職于金山云，初期負責金山云前端架構，現任基礎架構部研發經理。

01/移動應用中HTML5的新特性

工欲善其事，必先利其器。我比較推崇的學習技術的方式，是先整體了解，然后結合實際需求，再做針對性的學習。整體了解的方式，比較建議是直接看官網的API文檔，這里可以推薦幾個網站： http://www.w3school.com.cn/html5/index.asp, https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5, http://www.html5rocks.com， http://caniuse.com/

其中，特別說明下http://caniuse.com/，通過這個網站，我們可以非常快速的查詢到你所想使用的html5的特性在各個瀏覽器，包括不同終端的瀏覽器的兼容性情況。

HTML5 在移動應用開發上面能夠利用的特性主要有：

1. form input type

表單是我們在開發中經常會遇到的，如果按照傳統的方式，要介入jquery validate或者自己寫正則進行判斷，但是其實html5的form表單新增的input type屬性，能夠快速幫我們實現所需要的功能。

2. video & audio

移動瀏覽器是不支持flash的，在一些微信專題活動中，經常會看到嵌入音頻，那么audio標簽就是比較適合的應用場景，html5中audio提供的api attr還是比較全面的。

視頻格式一般有mp4和webm兩種格式，在使用的時候，一般建議同時生成兩種，根據瀏覽器兼容性，進行相應的選擇。音頻audio，一般會同時制作mp3 ogg格式。

3. storage

關于web storage，大家可以參考我之前分享的一篇內容：

http://www.chaichunyan.com/topics/html5-training/5.html5_storage/#/

重點是localstorage，尤其是我們在做移動應用的性能優化時，localstorage能夠發揮很大的作用。

學習的時候，建議大家帶著問題去學習，比方說“localstorage最大的存儲容量是多少？”“有沒有有效期？”“cookie是有域的概念的，那么localstorage呢？”

4. css3

html5其實更多的是一個web標準，這個標準里邊，包含了html、JavaScript api、css。css3是我們在移動應用中要重點學習和掌握的。

1.選擇器

2.自定義字體

3.多欄布局

4.文字,容器陰影

5.圓角

6.漸變效果

7.動畫 ...

大家可以通過下面一個例子有一個直觀的印象：

http://www.chaichunyan.com/topics/html5-training/7.css3_summary/demos/index.html

之前很多我們需要通過js或者切圖實現的效果，在移動端，就可以直接通過css3實現。

這里特別強調下關于布局，css3彈性布局，希望大家能夠仔細去了解，我在面試時候，必問的一道題，當然，面試只是手段，更重要的是希望能夠學以致用，真正在實際工作中發揮作用。

flexbox布局的兼容性，彈性盒模型實現的原理，這些我們在做移動終端調試時候，如果只是靠反復試錯，那么效率是非常低的。

了解了html5的特性，開發者就會在移動應用上一展身手了。

02/HTML5移動應用中踩過的那些坑

1.布局

移動瀏覽器訪問的web站點，后面稱為mobile webapp哈（泛指移動終端瀏覽器訪問的web站點），能不能使用傳統的流式布局？答案是可以，但是要慎用。

mobile webapp對css3的彈性布局支持還是比較給力的，iOS Safari還好，但是Android的碎片化非常嚴重，尤其是Android上面各種第三方瀏覽器會做各種各樣的定制化，使用flexbox比float能夠減少你在布局調試上的時間，而且兼容性有保證。

2.圖片適配

這里邊要提供一個概念，是屏幕分辨率和物理分辨率，為什么我們使用ios看到的圖片清晰度那么高，原因是普通的手機屏幕，一點顯示一個像素，但是iphone4s 以后是一個點四個像素。

那按照320的設計稿切出來的圖片，在iphone上面顯示肯定是有鋸齒的。

處理方法可以參見我之前分享的一篇文章：圖片的適配與清晰度

http://blog.csdn.net/spring21st/article/details/7513906

3.字體

我把字體的處理分為兩類，一種是藝術字體、icon，另一種是我們在頁面中的字體。

移動終端對網絡的要求是比較高的，我們要盡可能減少網絡請求，圖片是非常大的網絡開銷，當然，我們可以用合并圖片的方式減少請求數，但是請求量變大了。

css3支持web fonts，所以，我們可以引入字體文件，而不是所有的字體都是通過切圖的方式來實現。對于icon，一種方式是base64處理，但是現在更常見的做法，是轉換成矢量字體。

這里推薦一個網站：font awesome http://fortawesome.github.io/Font-Awesome/icon/css3/

這里邊涵蓋了大部分我們會用到的圖標，當然，公司有精力和人力的情況下，建議可以維護自己的矢量字體庫。

4.橫豎屏

我們可以通過css 的media query 判斷橫豎屏。

但是這種只能控制樣式展現，當我們需要監聽橫豎屏變化的時候，就只能通過js監聽window.onorientationchange事件的方式實現。

但是，下面這種情況會讓你很無語：

那我們推薦下面這種實現方案：

相比較pc web，mobile webapp的調試更復雜，而且未知的問題更多，遇到問題，我們要有耐心去跟蹤定位，就像之前我們遇到iscroll性能問題、fast-click穿透的問題，都是一點一點排查處理的。

03/混合應用（Hybrid）的注意事項

現在“快速迭代，敏捷開發，低成本上線“基本上是每家公司都追求的目標，混合應用就是在這種場景下應運而生。

Hybrid App優點眾多，Web前端工程師0成本介入，不依賴版本的實時更新，快速實現跨平臺需求，等等。但是，我對混合的看法是，根據實際情況合理使用，因地制宜。

那么什么樣的場景適合混合應用開發？

1. 快速原型，驗證產品功能。我們之前開發過一個app，Android和iOS提供宿主環境，webview展現內容都是通過html5實現的，半個月就開發上線了，較之傳統應用開發人員成本和時間成本都縮短很多。

2. 內容類的應用，比如csdn的app，就是采用hbuilder混合方案實現的，對性能要求沒有那么高。

在考慮hybird的時候，要避免以下幾個誤區：

（1）為了HTML 5而Hybrid App

html5只是技術實現手段而已，要根據公司的實際業務場景，以及人員配比，綜合考慮，不能因為react native比較火，就必須要在公司推行這種實現方案，我覺得為技術而技術是不可取的。

（2）忽略移動應用中的關鍵因素

mobile webapp本質上還是基于PC的一種開發模式，開發者使用PC瀏覽器模擬App中的webview進行調試。PC瀏覽器與手機webview的區別是巨大的，包括能支配的CPU資源，最大占有的內存，運行的網絡環境，click和touch事件的區別，瀏覽器對CSS/JS的解析和對事件處理等等。

app工程師考慮比較多的內存的問題，這些在web開發時候是很少考慮的。另外，就是網絡環境方面，雖然現在3g、4g覆蓋率越來越高，但是移動終端的訪問和pc還是有很大差距，wifi和蜂窩網絡的切換，基站變化等諸多因素都會導致網絡間歇性斷開，web開發對于這種不穩定網絡環境問題的處理上都有所欠缺。

（3）交互體驗一致性

ios和Android的交互設計是兩套規范，雖然有相似的地方，但是從操作習慣上，就已經決定了，我們想用一套交互設計，適配兩個平臺是很難的，包括包括視覺風格，界面切換，操作習慣等。

Hybrid App方案是一把雙刃劍，一方面它平衡了Native App和Web頁面的優缺點，一定程度上解決了Native App開發過程中迭代慢，版本依賴，Native開發資源不足的問題，但另一個方面過度依賴Hybrid方案會造成Web前端開發成本快速上升，甚至造成App整體體驗下降，甚至造成功能缺失。

回到最開始那句話”不要為了Hybrid而Hybrid“，根據實際場景，控制好方案中native和web的邊界。

04/Q&A

Q1：關于響應式開發中對于手機屏幕高度的解決有沒有什么好的解決方案？

響應式開發本質上是移動設計優先的一種開發方式，我沒太明白對于手機屏幕高度的解決，具體的問題是什么樣的，原則上高度是不需要做處理的，除非是你對首屏有要求。關于響應式開發，可以看看我這篇文章http://www.chaichunyan.com/index.php/2016/03/03/html5-wrd/

Q2:對首屏有要求的情況, 除了判斷高度還有沒有其他好的解決方案?如果是flex布局可以解決這個問題嗎？

問題的根本是獲取首屏的高度，（1）如果你是后端渲染的話，可以獲取機型和瀏覽器版本，拿到屏幕分辨率做適配 （2）根據屏幕寬度做適配，但是做不到完全絕對的首屏自適應，如果有更好的方案，我再跟大家分享。

Q3:hybrid開發中，h5頁面太多的話，會不會影響ios發布？

之前有ios對phonegap這種跨平臺的應用審核是不通過，不過現在放開這個限制了。h5頁面過多，會影響應用的性能和體驗，建議可以把h5打包放到ipk里邊，但是要做好靜態資源的版本管理。

Q4：css3 彈性布局中， 由于android碎片化嚴重的問題， 能不能有好的案例指導？ 我們要求支持到android4以上版本。

真的要善用文檔和工具, http://caniuse.com/#search=flex, 我分享時候提到的這個網站，明確說明了flex兼容性。

如果是Android4.4以上機型，基本上可以放心使用，注意的地方有兩個：1. 要記得寫各個瀏覽器的css前綴 2. flex里邊可以嵌套flex.

Q5：hybird開發過程中， 原生代碼登錄權限問題，h5部分的頁面，如何共享登錄相關信息？

這要看你實現的方案，（1）嵌套靜態的h5頁面，那么需要native打開webview的時候，使用js briage調用頁面js的方法，寫入用戶信息，實現登錄共享 （2）如果打開的是動態渲染的頁面（如php輸出的頁面），那么可以在請求的url中攜帶用戶token，php通過query string判斷驗證，這個是native和webview數據交互的問題。

Q6：h5動畫在部分安卓webview中有時候會出現卡頓,這種情況改怎么優化呢?

1. 可以做簡單的測試，看看瀏覽器支持的情況，如果瀏覽器支持不夠好，那么可能要做降級處理。

2. 減少動畫效果，因為動畫是要使用gpu渲染的，原生app能夠流暢，很大程度上是直接調用硬件處理的。

優化的方案我這邊基本上是降級處理，Android低版本不支持的話，就使用基本動畫，比方不會使用3D翻轉。因為h5畢竟受限于webview環境，像jquery 和 zepto都提供對機型和瀏覽器的判斷。

Q7：在移動端瀏覽器上能支持h5離線存儲的性能嗎？

No problem.我們在實際項目中，優化前端性能，曾經用localstorage做靜態資源的版本管理和存儲。

更多技術干貨關注公眾號“極牛”。