微信小程序
Native App由安卓和ios開發,可以通過蘋果的App store或者安卓的應用商店直接下載安裝
優點:直接底層開發,客戶端安裝,性能好,效果流暢
缺點:不能跨平臺,開發需要ios和安卓兩撥人,成本較高,發佈的時間審覈時間太長
Web App由HTML5開發,基於瀏覽器運行
優點:跨平臺,開發一套代碼可以在多設備上運行,節約成本,支持熱發佈,應用直接傳到服務器,一刷新頁面直接更新
缺點:做的應用功能受限(不能直接讀取本地資源).性能稍差
Hybird混合開發模式,通過Native開發的js brige,那麼js通過這個橋可以掛起Native的功能
目前企業或者公司的Hybird開發方式:
一:公司有自己的安卓和ios開發人員,完成將H5頁面嵌入
二:通過第三方工具把自己打包cordova或者phonegap直接打包成apk安裝包
三:微信(訂閱號和服務號的開發)
問題:H5的性能稍差的缺點也會帶入到Hybirdf裏面
react的出現就是爲了解決性能問題的
react核心就是虛擬dom(virtual Dom)
因爲H5耗性能的是dom渲染而非js運行
React Native技術:可以不使用瀏覽器,直接利用js代碼或者程序編一個映射接口直接調用底層的安卓.ios的一些東西,那麼不使用瀏覽器,則一些問題就迎刃而解了
React Native的優點:①運行效率上接近Native App
②具備混合開發的兩個優點:熱更新和跨平臺
什麼是微信小程序?
（1）不需要下載安裝即可使用 從技術角度分析：小程序一開始時代碼包限制爲 1MB現在增加到2MB，不需要下載安裝實際上是因爲小程序體積非常小，當用戶在點擊該應用的時候下載安裝的過程已經執行完成了。
（2）用戶“用完即走”，應用將無處不在，隨時可用
微信的發展歷程？
第一階段：IM階段 （語音通信和搖一搖）
第二階段：瀏覽器階段（webview內嵌H5） （訂閱號）
第三階段：OS階段 （小程序） 註解：①IM: InstantMessaging(即時通訊,實時傳訊)
②OS：Operating System（操作系統）
小程序開發
註冊小程序賬號--->激活郵箱--->信息登記--->登錄小程序管理後臺--->完善小程序信息--->綁定開發者
環境搭建以及開發工具介紹
微信公衆平臺—>小程序開發文檔—>安裝開發工具
文件結構介紹
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
1、一個小程序主體部分由三個文件組成，必須放在項目的根目錄
|
文件 |
作用 |
|
app.js |
小程序邏輯 |
|
app.json |
小程序公共設置 |
|
app.wxss |
小程序公共樣式表 |
2、一個小程序頁面由四個文件組成
|
文件 |
作用 |
|
js |
頁面邏輯 |
|
wxml |
頁面結構 |
|
wxss |
頁面樣式表 |
|
json |
頁面配置 |
就近關係：如果一個樣式既在app裏面配置，又在頁面裏面配置了，則以距離這個頁面最近的文件爲準
說明：
（1）應用程序級別的文件名字必須是app.xxx
（2）爲了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名,文件夾的名字不做規定 xxx.wxml/xxx.wxss/xxx.json/xxx.js
（3）QuickStart 項目裏邊的 app.json 配置說明
pages字段 —— 用於描述當前小程序所有頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。 window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這裏的。
（4）每個頁面的.json文件
只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。 注意：頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵，直接配置選項即可
（5）工具配置 project.config.json
說明：小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置
小程序是完全的組件化開發。
思考：什麼叫組件？
官方解釋：組件是對數據和方法簡單的封裝，組件擁有自 己的屬性和方法。屬性是組件數據的簡單訪問，方法是組件簡單可見的功能。
前端組件：組成頁面內容的零件，封裝起來的具有獨立功能的UI部件 並且小的組件通過組合或者嵌套的方式可以構成大的組件
組件化開發思路
對於論界面而言，整個UI是一個通過小組件構成的大組件，每個組件只關心自己部分的邏輯，彼此獨立。 通過這種方式，每個組件的UI和邏輯都定義在組件內部，和外部完全通過API來交互，通過組合的方式來實現複雜的功能。
組件的特徵：
（1）可組合（Composeable）：一個組件易於和其它組件一起使用，或者嵌套在另一個組件內部。如果一個組件內部創建了另一個組件，那麼說父組件擁有（own）它創建的子組件，通過這個特性，一個複雜的UI可以拆分成多個簡單的UI組件
組件化開發思路
（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景
（3）可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護
（4）可測試（Testable）：因爲每個組件都是獨立的，那麼對於各個組件分別測試顯然要比對於整個UI進行測試容易的多
搭建小程序入場頁面
步驟：
①新建應用程序文件 app.js/app.json/app.wxss
②新建頁面文件夾，如：pages
③新建頁面文件（.js/.wxml/.wxss/.json）
④配置啓動頁面（參考文檔框架--配置部分） 注意：不可以在配置文件裏面寫註釋語句 並且需要在該頁面對應的js文件註冊頁面，調用Page()方法，該方法接收一個Object參數
⑤搭建頁面骨架（編寫.wxml文件） 組件使用參考文檔（組件）
⑥樣式設置 可以直接設置style屬性也可以在.wxss文件中設置 一般來說靜態的樣式設置在.wxss文件裏面，需要動態改變的樣式可以設置在style屬性裏面。
注意： 在.wxss文件裏面編寫樣式無需在.wxml頁面引入。因爲app.json文件中註冊頁面的時候不只是註冊一個.wxml文件，而是註冊了以該文件名有關的所有文件，它自動可以將這些文件關聯在一起； 通用樣式可以在app.wxss設置。
⑦頁面整體背景設置
小程序默認在最外邊包了一個page容器，給該容器設置高度100%，在設置背景色。 如果設置頭部導航欄的顏色則需要在app.json文件配置window屬性
導航欄、標題配置
實現方法：
在.json文件裏面配置window選項 （參見文檔—>框架—>配置—>window）
navigationBarBackgroundColor HexColor 配置導航欄背景顏色
navigationBarTextStyle String white 配置導航欄標題顏色 （僅支持 black/white）
navigationBarTitleText String 導航欄標題文字內容
navigationStyle String default 導航欄樣式 （僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕）該屬性只在app.json配置有效
移動設備的分辨率和rpx
就iphone6而言：爲什麼在模擬器下的分辨率是375兒設計圖一般給750呢？
pt:邏輯分辨率（css像素），它的大小隻與屏幕尺寸有關，可以簡單的理解爲是一個長度和視覺單位
px:物理分辨率（設備像素），跟屏幕尺寸沒有關係，簡單的理解爲物理像素點，點是沒有大小的，它不是一個長度單位 pt與px的關係reader（dpr）：1pt的長度裏面可以包含幾個px像素點 ppi(dpi):描述的是每英寸包含幾個物理像素點
如何做不同分辨率設備的自適應？
iPhone6的物理像素750 X 1334的視覺稿進行設計，小程序採用rpx單位 iPhone6下：1px = 1rpx = 0.5pt 那麼,使用rpx，小程序會自動在不同的分辨率下進行轉換，實現自適應
希望能幫助到你!