uni-app跨端開發框架介紹

tenyiyi發表於2019-04-18
APP跨端框架

uni-app

一套程式碼，多端執行

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

框架簡介：

  • 可編譯到iOS、Android、H5、微信/支付寶/百度/小程式

  • 將常用的元件和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）

uni-app跨端開發框架介紹

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

連線到ios裝置經常失敗，最好是安裝一個【愛思助手】

第一次執行小程式時需要在 mainfest.json配置小程式的 appid

3.釋出uni-app

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');
 }
複製程式碼

相關文章