1.uni-app
解析：uni-app是一個使用Vue.js開發小程序、H5、App的統一前端框架。開發者使用Vue語法編寫代碼，uni-app框架將其編譯到小程序[微信/支付寶/百度/字節跳動/QQ/釘釘]、App[iOS/Android]、H5等多個平臺，保證其正確運行并達到優秀體驗。

2.H5和小程序組件/標簽的變化
解析：
[1]div改成view
[2]span、font改成text
[3]a改成navigator
[4]img改成image
[5]input還在，但type屬性改成了confirmtype
[6]form、button、checkbox、radio、label、textarea、canvas、video還在。
[7]select改成picker
[8]iframe改成web-view
[9]ul、li沒有了，都用view替代

3.uni-app框架手機端常用的新組件
解析：
[1]scroll-view可區域滾動視圖容器
[2]swiper可滑動區域視圖容器
[3]icon圖標
[4]rich-text富文本
[5]progress進度條
[6]slider滑塊指示器
[7]switch開關選擇器
[8]camera相機
[9]live-player直播
[10]map地圖
[11]cover-view可覆蓋原生組件的視圖容器

4.uni-app工程目錄結構
解析：默認目錄及文件，如下所示：

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

5.HTML5Plus
解析：跨iOS、Android的JS增強引擎。

6.MUI框架
解析：最接近原生APP體驗的高性能前端框架。

7.9種應用平臺類型
解析：
[1]Android版本
[2]iOS版本
[3]H5版本
[4]微信小程序版本
[5]支付寶小程序版本
[6]百度小程序版本
[7]頭條小程序版本
[8]QQ小程序版本
[9]釘釘小程序版本

8.GraceUI
解析：基于uni-app及小程序的優秀前端框架。
說明：通常開發SaaS系統使用Vue，而其它應用使用uni-app。

9.TypeScript教程
解析：TypeScript是JavaScript的一個超集，支持ECMAScript6標準。TypeScript設計目標是開發大型應用，它可以編譯成純JavaScript，編譯出來的JavaScript可以運行在任何瀏覽器上。

10.nvue
解析：nvue相當于給weex補充了大量uni-app的組件和api，以及豐富的PlusAPI、Native.js、原生插件。

11.uni-app組件
解析：uni-app的組件與HTML不同，而是與微信小程序相同，更適合手機端使用。
[1]視圖容器
[2]基礎內容
[3]表單組件
[4]導航
[5]媒體組件
[6]地圖
[7]畫布
[8]webview
[9]小程序開放能力組件
[10]App nvue專用組件
[11]擴展組件[uni ui]

12.uni-app API
解析：uni-app的js API由標準ECMAScript的js API和uni擴展API這兩部分組成。
[1]基礎
[2]網絡
[3]路由與頁面跳轉
[4]數據緩存
[5]位置
[6]媒體
[7]設備
[8]Worker
[9]鍵盤
[10]界面
[11]頁面和窗體
[12]文件
[13]繪畫
[14]第三方服務
[15]平臺擴展
[16]其它

13.在WebStorm中開發uni-app
解析：

npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project npm run dev:%PLATFORM% npm run build:%PLATFORM% npm i @types/uni-app @types/html5plus -D

其中，%PLATFORM%可取值如下所示：
[1]h5：H5
[2]mp-alipay：付寶小程序
[3]mp-baidu：百度小程序
[4]mp-weixin：微信小程序
[5]mp-toutiao：頭條小程序
[6]mp-qq：qq小程序

14.uni-app小程序組件支持
解析：uni-app支持在App和小程序中使用小程序自定義組件。
[1]H5：不支持
[2]App[不含nvue]：支持微信小程序組件：wxcomponents
[3]微信小程序：支持微信小程序組件：wxcomponents
[4]支付寶小程序：支持支付寶小程序組件：mycomponents
[5]百度小程序：支持百度小程序組件：swancomponents
[6]頭條小程序：支持頭條小程序組件：ttcomponents
[7]QQ小程序：支持QQ小程序組件：wxcomponents

15.uniapp-admin
解析：uniapp-admin是基于uni-app開發的管理系統模板。

16.pages.json
解析：pages.json文件用來對uni-app進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar等。它類似微信小程序中app.json的頁面管理部分。注意定位權限申請等原屬于app.json的內容，在uni-app中是在manifest中配置。如下所示：
[1]globalStyle：設置默認頁面的窗口表現
[2]pages：設置頁面路徑及窗口表現
[3]tabBar：設置底部tab的表現
[4]condition：啟動模式配置
[5]subPackages：分包加載配置
[6]preloadRule：分包預下載規則
[7]workers：Worker代碼放置的目錄
說明：通過uni-app將公眾號、小程序[微信]和App[Android和iOS]打通，通過Vue和ElementUI將SaaS系統打通，通過Cocos2d-x將小游戲打通。

17.navigationBarTitleText
解析：導航欄標題文字內容。
說明：style用于設置每個頁面的狀態欄、導航條、標題、窗口背景色等。頁面中配置項會覆蓋globalStyle中相同的配置項。

18.“enablePullDownRefresh”:true
解析：開啟下拉刷新。

19.manifest.json
解析：該文件是應用的配置文件，用于指定應用的名稱、圖標、權限等。
[1]app-plus：5+App特有配置
[2]h5：H5特有配置
[3]quickapp：快應用特有配置，即將支持

20.iOS應用調用相機等權限時，彈出的提示語如何修改
解析：在manifest.json可視化界面-App模塊權限配置-iOS隱私信息訪問的許可描述。

21.mp-weixin特有配置
解析：
[1]appid：微信小程序的AppID
[2]usingComponents：是否啟用自定義組件模式，v1.8.0+，默認為false
[3]setting：微信小程序項目設置
[4]functionalPages：微信小程序是否啟用插件功能頁，默認關閉
[5]requiredBackgroundModes：微信小程序需要在后臺使用的能力
[6]plugins：使用到的插件
[7]resizable：在iPad上小程序是否支持屏幕旋轉，默認關閉
[8]navigateToMiniProgramAppIdList：需要跳轉的小程序列表
[9]permission：微信小程序接口權限相關設置
[10]workers：Worker代碼放置的目錄

22.mp-weixin setting
解析：編譯到微信小程序平臺下的項目設置。如下所示：
[1]urlCheck：是否檢查安全域名和TLS版本
[2]es6：ES6轉ES5
[3]postcss：上傳代碼時樣式是否自動補全
[4]minified：上傳代碼時是否自動壓縮

23.HTML5plus Runtime
解析：HTML5plus Runtime，簡稱5+ Runtime，是運行于手機端的強化web引擎，除了支持標準HTML5外，還支持更多擴展的js api，使得js的能力不輸于原生。5+ Runtime內置于HBuilder，在真機運行、打包時自動掛載。業內之前有phonegap/Cordova方案，但是它們自帶js api太少了，擴展api需要用原生語言開發，更致命的是這類方案的性能不足。

24.5+App特有相關
解析：
[1]splashscreen：5+App啟動界面信息
[2]modules：權限模塊
[3]distribute：5+App發布信息
[4]usingComponents：是否啟用自定義組件模式，默認為false
[5]nvueCompiler：切換nvue編譯模式，可選值，weex：老編譯模式，uni-app：新編譯模式，默認為weex
[6]renderer：可不加載基于webview的運行框架，減少包體積、提升啟動速度?？蛇x值native
[7]nvue：nvue頁面布局初始配置

25.nvue
解析：nvue頁面布局初始設置。flex-direction：flex成員項的排列方向，支持項，row：從左到右；row-reverse：從右到左；column：從上到下；column-reverse：與column相反，默認值column。

參考文獻：
[1]dcloudio/uni-app：https://github.com/dcloudio/uni-app
[2]在WebStorm中開發uni-app：https://ask.dcloud.net.cn/article/36307
[3]uni-app如何學習：https://uniapp.dcloud.io/resource
[4]Native.js示例匯總：https://ask.dcloud.net.cn/article/114
[5]uni-app插件市場：https://ext.dcloud.net.cn/
[6]vue和微信小程序的區別、比較：https://segmentfault.com/a/1190000015684864
[7]mpvue項目[組件]遷移指南、示例及資源匯總：https://ask.dcloud.net.cn/article/34945
[8]關于uni-app的ui庫、ui框架、ui組件：https://ask.dcloud.net.cn/article/35489
[9]dcloudio/casecode：https://github.com/dcloudio/casecode
[10]dcloudio/hello-uniapp：https://github.com/dcloudio/hello-uniapp
[11]在WebStorm中開發uni-app：https://ask.dcloud.net.cn/article/36307
[12]graceUI：http://grace.hcoder.net/
[13]TypeScript中文手冊：https://typescript.bootcss.com/
[14]TypeScript教程：https://www.runoob.com/typescript/ts-tutorial.html
[15]多平臺管理系統模板uniapp-admin：https://ext.dcloud.net.cn/plugin?id=909

總結

以上是生活随笔為你收集整理的uni-app学习日记1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。