[TOC] > 技術邊界: uniapp 需要掌握 Vue、Vuex、Vue Router 等 Vue 全家桶技術,以及微信小程序自定義組件和事件機制。同時需要了解 Android/iOS 原生開發以解決uniapp在這兩端的差異。 > 特點: 1. 跨三端 - 一套代碼編譯到小程序、H5和App 2. 熱更新 - 支持小程序和App熱更新,開發效率高 3. 生態豐富 - 擁有Vue及其生態支持 4. 組件豐富 - 提供豐富的UI組件 5. 一致的API - 小程序、H5和AppAPI盡量保持一致 6. 免費開源 - uniapp框架免費并開源 > 使用場景: - 中小型應用 - 適用于要求不高的輕量級應用開發 - 企業應用 - 用于企業內部管理應用、OA應用等 - 電商應用 - 用于商品展示和交易的應用 - 教育應用 - 用于在線教育、問答和交流的應用 > 應用方法: 1. 安裝HBuilderX和uni-cli 2. 創建uniapp項目 3. 設計pages目錄結構和頁面路由 4. 編寫Vue頁面 and 組件 5. 使用uniapp API和組件 6. 添加平臺專有代碼(如支付寶支付) 7. 編譯運行到H5/小程序/App 8. 發布和更新 > 與項目的關系: uniapp框架與項目的關系主要體現在: - 提供項目基本結構和規范 - 實現跨三端編譯和運行 - 封裝各端API和組件實現最大一致 - 支持熱更新提高開發效率 > 關鍵流程: 1. 學習Vue和uniapp框架 2. 設計應用 pages 目錄和結構 3. 編寫Vue頁面和組件 4. 使用uniapp API和組件 5. 添加端專有實現(如支付) 6. 編譯預覽調試 7. 發布上線 8. 維護更新 >## uniapp 的原生 API: 1. 網絡 API 用于網絡請求,包含 request、uploadFile、downloadFile、WebSocket 等。 2. 登錄 API 用于微信/支付寶/QQ 等平臺的登錄,包含 login、getUserInfo、share 等。 3. 支付 API 用于微信/支付寶支付,包含 requestPayment、pay 等。 4. 文件 API 用于本地文件讀寫,包含 saveFile、getFileInfo、removeSavedFile 等。 5. 數據緩存 API 用于數據存儲,包含 setStorage、getStorage、removeStorage 等。uniapp 支持本地緩存、微信小程序緩存和 MemoryCache。 6. 推送 API 用于消息推送,包含 onPush、offPush 等。 7. 設備 API 用于訪問設備信息,包含 getSystemInfo、onAccelerometerChange、scanCode 等。 8. 地理位置 API 用于訪問地理位置,包含 getLocation、chooseLocation 等。 9. 媒體 API 用于錄音、拍照和視頻,包含 chooseVideo、saveVideoToPhotosAlbum、startRecord 等。 10. 其它 API 還包含設置 API(setNavigationBarTitle)、界面 API(showToast)、日志 API(setEnableDebug)等。 ## uniapp的推送API: 1. onPush() 用于監聽推送消息,接收 pushMessage 參數,包含: - title:消息標題 - content:消息內容 - payload:自定義內容 - badge: App角標數 - sound:消息音頻文件路徑 例如: ``` js uni.onPush(function(res) { console.log(res) // { // title: '您有一條新消息', // content: '內容內容內容內容內容內容', // payload: '{"from": "Lisa", "time": "2020-10-10 10:10:10"}' // } }) ``` 2. offPush() 用于取消 onPush() 監聽,例如在離開當前頁面時調用。 3. setBadge() 用于設置 iOS/Android 應用圖標右上角的角標,接收數字類型參數。 例如: ``` js uni.setBadge(5) ``` 4. getBadge() 用于獲取 iOS/Android 應用圖標右上角的角標數字,返回數字類型結果。 5. sendNotification() 用于發送推送通知,接收的參數包含: - title:通知標題 - content:通知內容 - payload:自定義內容 - badge:通知角標數字 - sound:通知音頻文件路徑 例如: ``` js uni.sendNotification({ title: '發送推送通知', content: '消息內容', payload: {msg: 'hello'}, badge: 1, sound: 'default' }) ``` ## API用于實現消息推送的發送和接收,開發聊天應用等功能。 1. 語言和框架uniapp 使用 Vue 和 Vue 生態作為開發語言和框架,包括 Vue、Vuex、Vue Router 等。 2. 目錄結構uniapp 項目的目錄結構如下: ~~~ ├── node_modules ├──platforms // 各端專用文件 ├── pages // 業務頁面文件存放的目錄 │ ├── index │ │ └── index.vue ├── static // 靜態資源目錄,圖片、樣式 ├── App.vue // 應用配置,用來配置App全局樣式以及監聽 應用生命周期 ├── main.js // Vue初始化入口文件 ├── manifest.json // 配置應用名稱、appid、logo、版本等打包信息 └── pages.json // 配置頁面路由、導航條、選項卡等頁面類信息 ~~~ 3. 生命周期 uniapp 的生命周期包含:應用生命周期(onLaunch、onShow、onHide等)、頁面生命周期(onLoad、onReady、onUnload等)、組件生命周期。 6. 組件 uniapp 提供豐富的 UI 組件,覆蓋視圖容器、基礎內容、表單組件、媒體組件、地圖組件等。同時還支持使用Vue組件和小程序自定義組件。 7. API uniapp提供常用接口API,包含網絡請求、緩存、日志、ping監測、上傳下載、用戶授權登錄和支付。 8. CLI和HBuilderX uniapp提供命令行工具uni-cli和可視化IDE HBuilderX來搭建項目、編譯運行調試和打包發行。