uni-app跨端開發框架介紹

uni-app

一套代碼，多端運行

使用vue的語法 + 微信小程序的標籤和API的跨平臺前端框架

框架簡介：

• 可編譯到iOS、Android、H五、微信/支付寶/百度/小程序

• 將經常使用的組件和API進行了跨平臺的封裝，可覆蓋大部分的業務需求

• 平臺能力不受限：經過條件編譯+平臺特有的API調用，能夠優雅地在爲某平臺寫個性化代碼,調用專有能力而不影響其餘平臺。

• 插件豐富，推出插件市場，可以提供較多的組件和模板

開發工具：

• HBuilderX : 內置uni-app編譯器

• 微信/百度/支付寶小程序開發工具 ：編譯調試小程序

• 安卓/IPHONE手機+數據線

開發規範：

• 頁面文件遵循Vue 單文件組件 (SFC) 規範

• 組件標籤靠近小程序規範

• 使用upx做爲默認的尺寸單位，可根據屏幕寬度進行自適應

• 接口能力（JS API）靠近微信小程序規範，但需將前綴 wx 替換爲 uni

• 數據綁定及事件處理同 Vue.js 規範，補充了App及頁面的生命週期

• 爲兼容多端運行，建議使用 Flex 佈局進行開發

• 優先使用基礎組件，不知足的地方，用擴展組件補充，不要把整個項目所有都構建在某個ui框架下。

• 須要瞭解的原生安卓、IOS開發流程

開發流程：

1，建立uni-app

1.1 目錄結構

┌─components            uni-app組件目錄
│  └─comp-a.vue         可複用的a組件
├─hybrid                存放本地網頁的目錄，詳見
├─platforms             存放各平臺專用頁面的目錄，詳見
├─pages                 業務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用引用靜態資源（如圖片、視頻等）的地方，注意：靜態資源只能存放於此
├─main.js               Vue初始化入口文件
├─App.vue               應用配置，用來配置App全局樣式以及監聽
├─manifest.json         配置應用名稱、appid、logo、版本等打包信息
└─pages.json            配置頁面路由、導航條、選項卡等頁面類信息
複製代碼

2.運行uni-app （瀏覽器、真機、小程序）

（第一次運行小程序時須要在mainfest.json配置小程序的appid）

運行模式編譯出的各平臺代碼存放於根目錄下的 /dist/dev/目錄

鏈接到ios設備常常失敗，最好是安裝一個【愛思助手】

第一次運行小程序時須要在 mainfest.json配置小程序的 appid

3.發佈uni-app

• 發佈模式編譯出的各平臺代碼存放於根目錄下的 /dist/build/ 目錄

• 發佈到每一個小程序時都必須填寫對應的名稱和 appid

• 發佈到 H5 須要在 在 manifest.json 的可視化界面，進行應用基礎路徑的配置 （好比配置了 /test/ ,此時發行網站路徑是 www.XXX.com/test/ ）

• 發佈打包原生APP，須要填寫ios或安卓開發者證書等信息

點擊查看具體詳情 uniapp.dcloud.io/quickstart

小知識點：

條件編譯：一個項目裏能夠分別調用不一樣平臺的特點功能

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>只會編譯到微信小程序</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>只會編譯到app</view>
  <! -- #endif -->
</view>
複製代碼

若須要禁止蒙版下的頁面滾動，可以使用 @touchmove.stop.prevent="moveHandle"，moveHandle 能夠用來處理 touchmove 的事件，也能夠是一個空函數。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
複製代碼

scroll-view 不適合放長列表，有性能問題。長列表滾動和下拉刷新，應該使用原生導航欄搭配頁面級的滾動和下拉刷新實現。 使用 scroll-view 會和原生下拉刷新形成衝突，因此在使用 scroll-view 的地方不建議使用下拉刷新，也不建議監聽 onPullDownRefresh 事件。

若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view 。

使用羅盤、地理位置、加速計等相關接口須要使用https協議，本地預覽（localhost）能夠使用 http 協議。

PC 端 Chrome 瀏覽器模擬器設備測試的時候，獲取位置 API 須要鏈接谷歌服務器。

組件內（頁面除外）不支持onLoad生命週期。

uni-app 能夠根據 uni.getSystemInfoSync().platform 判斷客戶端環境是 Android、iOS 仍是小程序開發工具

微信、百度小程序和App去除原生導航欄

{  
    "path": "pages/log/log",  
    "style": {  
        "navigationBarTitleText": "hello",  
        "navigationStyle": "custom",  //小程序去除原生導航
        "app-plus": {  
            "titleNView": false   // app去除原生導航
        }  
    }  
}  
複製代碼

建議性：

• 推薦的開發流程是在PC的Chrome下開發測試，基本完成後運行到微信工具測試，最後再上真機運行看兼容性問題。

• 使用 uni-app 的 onReady代替 vue 的 mounted。

• 使用 uni-app 的 onLoad 代替 vue 的 created。

• 使用代碼塊直接建立組件模板，好比快速生成新聞列表 ulistMedia @tap表示綁定點擊事件。由於是在移動端，避免用@click，由於它在移動端會有大約300ms的延遲

填坑之路：

• 支付寶/百度/字節跳動小程序工具，不支持直接指定項目啓動並運行。所以開發工具啓動後，請將 HBuilderX 控制檯中提示的項目路徑，在相應小程序開發者工具中打開

• 當設置 "navigationStyle":"custom" 後能夠使用固定一個高度爲 var(--status-bar-height) 的 view 放在頁面頂部，使得狀態欄不遮蓋內容裏

• 不能使用 v-html 指令，能夠使用rich-text組件代替。或者第三方組件wxparse

• 使用本地路徑背景圖片需注意：

  1. 圖片小於 40kb，uni-app 會自動將其轉化爲 base64 格式；
  2. 圖片大於等於 40kb， 需開發者本身將其轉換爲base64格式使用，或將其挪到服務器上，從網絡地址引用。
  3. 本地背景圖片的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）。

.test2 {
     background-image: url('~@/static/logo.png');
 }
複製代碼