簡單介紹下UniApp框架結構

什麼是uni-app

uni-app 是一個使用vue的語法 + 微信小程式的標籤和API的跨平臺前端

框架

，開發者編寫一套程式碼，可編譯到iOS、Android、H5、小程式等多個平臺

為了更好的跨端開發， 參考uni-app 統一規範：

1，頁面元件我們要遵循Vue 單檔案元件 （SFC） 規範

2，元件標籤靠近微信小程式規範

3，介面能力（JS API）靠近微信小程式規範

4，資料繫結及事件處理靠近Vue。js 規範，同時補充了App及頁面的生命週期

5，為相容多端執行，建議使用flex佈局進行開發

開發工具

HBuilderX

框架目錄：

如果要開發小程式，我們需要知道不同平臺下的小程式規範的 。規範瞭解之後，我們開發起來就相對來說比較簡單一些。uni-app 幫我們把不同平臺的小程式API 幾乎都封裝了 ，只需要將字首替換為uni 即可 例如：

這是微信小程式程式碼請求：

接下來使用uniapp封裝的相容多平臺小程式請求程式碼：

除了字首wx 替換為uni之外，其他與原規範機會保持一致。uni-app 會最大程度的抹平不同小程式平臺之間的差異。

注意事項

非H5 端，不能使用瀏覽器自帶物件，比如document、window、localstorage、cookie 等，更不能使用jquery 等依賴這些瀏覽器物件的框架。因為各家小程式快應用都不支援這些物件。沒有這些瀏覽器自帶物件並不影響業務開發，uni 提供的api 足夠完成業務。

uni-app 的tag 同小程式的tag，和HTML 的tag 不一樣，比如div 要改成view，span 要改成text、a 要改成navigator。

快速建立一個uni-app專案

1，安裝hbuilderx工具

2，新建專案

3，

選擇uni-app，輸入工程名

4，

專案目錄

5，

改寫index頁面，渲染 logo 以及 Hello App

6，

執行專案 可以依次執行到瀏覽器、真機、小程式

7，最後釋出專案：

出現如下介面，點選打包即會生成一個apk包，然後釋出到各大應用廠商