【web開發 | 移動APP開發】 Web 移動開發指南（2017.01.05更新）

版本記錄

 - 版本1.0 建立文章（2016.12.30）
 - 版本1.1 更正了hybird相關知識；增長了參考文章（2017.01.05）；
        + Web APP更正爲響應式移動站點與頁面，簡稱響應式站點；

　

1、移動APP開發方式

• 響應式移動站點與頁面（M站）
  • 使用HTML+CSS+JS開發運行在移動端瀏覽器中的純Web APP.可經過瀏覽器調用Device API.
• Hybird APP
  • 使用Native + Web（HTML+CSS+JS） 混合開發
  • 主要類型：
    • Native主體型：使用Web View加載web頁（web和Native之間能夠互相調用方法，能夠傳遞參數）；
      • 多View混合型；
        • Native view & Web View 交替出現；
      • 單View混合型；
        • Native view & Web View 在同一個View內出現，相互依賴關聯；
    • Web主體型；
      • 直接使用Web語言構建跨平臺APP，可生成爲APK、IPA格式安裝包；
      • 用js編寫，一些構建工具打包生成跨平臺應用； ★
• Native APP
  • 使用原生程式編寫運行；
  • 主要類型：
    • 純Native APP；
      • 基於Android、iOS、WP等手機本地操做系統，使用原生程式編寫運行的APP；
    • react Native；
      • 用javascript+原生程式編寫原生APP；

2、移動開發方式比較

	響應式站點	Hybird APP	Native APP
開發成本	低	中	高
維護更新	易	易	難
用戶體驗	差	優	優
Store or Market 承認	不承認	承認	承認
安裝	不須要	須要	須要
跨平臺	優	優	差/優（react native）

3、移動開發方式詳解

3.1 響應式移動站點（M站）詳解

3.2 Hybird APP詳解

• Native主體型
  • JS與WebView交互；
    • 傳參；
    • 調用方法；

3.3 Native APP詳解（非使用web技術開發，做爲與web技術的對比）

　
　
　

　
　　

參考資料：

（1）響應式移動站點（M站）、hybirdapp、nativeapp介紹： http://blog.csdn.net/mahoking/article/details/30235243

（2）webview&js基本交互： http://www.jianshu.com/p/6a7c91f1d804

（3）hybird性能優化： http://blog.csdn.net/stpeace/article/details/50279783

★（4）hybird之Web主體型——該種APP開發方式的解釋&ionic佈局入門： http://ionichina.com/topic/551b549e53c5c8f4148ef894

（5）react native中文站： http://reactnative.cn/

★（6）hybird之Web主體型——Web APP在MDN中的學習指南：https://developer.mozilla.org/zh-CN/Apps
　
　
（未完待續……）
　

更新說明：本文采用版本記錄 + 標記更新 的方式進行更新標記。
- 對較爲明顯的改動進行歷史記錄；
- 更新後，最新內容會有 ★號標記；