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

2.H5和小程序組件/標(biāo)簽的變化
解析：
[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框架手機(jī)端常用的新組件
解析：
[1]scroll-view可區(qū)域滾動視圖容器
[2]swiper可滑動區(qū)域視圖容器
[3]icon圖標(biāo)
[4]rich-text富文本
[5]progress進(jìn)度條
[6]slider滑塊指示器
[7]switch開關(guān)選擇器
[8]camera相機(jī)
[9]live-player直播
[10]map地圖
[11]cover-view可覆蓋原生組件的視圖容器

4.uni-app工程目錄結(jié)構(gòu)
解析：默認(rèn)目錄及文件，如下所示：

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

5.HTML5Plus
解析：跨iOS、Android的JS增強(qiáng)引擎。

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

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

8.GraceUI
解析：基于uni-app及小程序的優(yōu)秀前端框架。
說明：通常開發(fā)SaaS系統(tǒng)使用Vue，而其它應(yīng)用使用uni-app。

9.TypeScript教程
解析：TypeScript是JavaScript的一個超集，支持ECMAScript6標(biāo)準(zhǔn)。TypeScript設(shè)計目標(biāo)是開發(fā)大型應(yīng)用，它可以編譯成純JavaScript，編譯出來的JavaScript可以運(yùn)行在任何瀏覽器上。

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

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

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

13.在WebStorm中開發(fā)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開發(fā)的管理系統(tǒng)模板。

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

17.navigationBarTitleText
解析：導(dǎo)航欄標(biāo)題文字內(nèi)容。
說明：style用于設(shè)置每個頁面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。頁面中配置項(xiàng)會覆蓋globalStyle中相同的配置項(xiàng)。

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

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

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

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

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

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

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

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

參考文獻(xiàn)：
[1]dcloudio/uni-app：https://github.com/dcloudio/uni-app
[2]在WebStorm中開發(fā)uni-app：https://ask.dcloud.net.cn/article/36307
[3]uni-app如何學(xué)習(xí)：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和微信小程序的區(qū)別、比較：https://segmentfault.com/a/1190000015684864
[7]mpvue項(xiàng)目[組件]遷移指南、示例及資源匯總：https://ask.dcloud.net.cn/article/34945
[8]關(guān)于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中開發(fā)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]多平臺管理系統(tǒng)模板uniapp-admin：https://ext.dcloud.net.cn/plugin?id=909

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。