日本人妻人人人澡人人爽,亚洲精品卡一卡2卡3卡4卡

UNIAPP 技術(shù)分享

2023-02-27 8477 作者:

字號：【小】【中】【大】

分享到：

什么是UNIAPP，介紹UNIAPP 用途和技術(shù)基本原理

1. uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺。

2. 據(jù) DCloud 稱， uni-app 在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發(fā)框架、更好的App跨平臺框架、更方便的H5開發(fā)框架。不管領(lǐng)導(dǎo)安排什么樣的項(xiàng)目，都可以快速交付，不需要轉(zhuǎn)換開發(fā)思維、不需要更改開發(fā)習(xí)慣。

3. 據(jù) DCloud 稱，很多人以為小程序是微信先推出的，其實(shí) DCloud 才是這個(gè)行業(yè)的始作俑者。DCloud于2012年開始研發(fā)小程序技術(shù)，優(yōu)化webview的功能和性能，并加入W3C和HTML5中國產(chǎn)業(yè)聯(lián)盟，推出了HBuilder開發(fā)工具，為后續(xù)產(chǎn)業(yè)化做準(zhǔn)備。2015年，DCloud正式商用了自己的小程序，產(chǎn)品名為“流應(yīng)用”，它不是B/S模式的輕應(yīng)用，而是能接近原生功能、性能的動(dòng)態(tài)App，并且即點(diǎn)即用。

功能架構(gòu)圖

4.編譯到小程序能力通過縫合美團(tuán)前端團(tuán)隊(duì)的mp-vue實(shí)現(xiàn)。

5.原生渲染能力通過縫合阿里巴巴團(tuán)隊(duì)的weex實(shí)現(xiàn)。

6.uniapp提供向微信小程序看齊的內(nèi)置組件和api。

7.得益于雙線程模型導(dǎo)致的渲染性能劣勢，uniapp使用webview渲染APP時(shí)性能亦不如傳統(tǒng)的5+Hybrid模式

創(chuàng)建項(xiàng)目及初始化步驟

啟動(dòng)小程序

最好現(xiàn)在uniapp中配置一下小程序的appid 否則可能會(huì)出現(xiàn)啟動(dòng)不了的情況

步驟：

微信公眾平臺查看自己的小程序id 開發(fā) → 開發(fā)管理 → 開發(fā)設(shè)置 → 找到appid

目錄結(jié)構(gòu)

1)pages

更多詳細(xì)介紹：uni-app官網(wǎng)

每次想要在pages里新加一個(gè)頁面都要在pages.json里配置一下

下面列舉一些常用 style 配置項(xiàng)，一般情況下足以開發(fā)，更多：uni-app官網(wǎng)

2)APP.vue

●onLunch只會(huì)在進(jìn)入程序的時(shí)候執(zhí)行一次，一般搭配搭建或等獲取微信公眾號的code，想要app.vue調(diào)取methods 的方法記得用 getApp.方法名( )。

●globalData：常用于定義一些公共的變量、例如圖片路徑資源、手機(jī)是否是ios或安卓。

使用：現(xiàn)在js中引入

1.import app from ‘@/App.vue’

2.platform: app.globalData.platform

●style 定義公共的全局樣式，例如垂直水平居中、布局、公共類目樣式都可以定義。

3)頁面生命周期

4)組件生命周期

uni-app 組件支持的生命周期，與vue標(biāo)準(zhǔn)組件的生命周期相同。這里沒有頁面級的onLoad等生命周期如果想要發(fā)送請求可以在子組件的生命周期去執(zhí)行

5)底部導(dǎo)航

官方文檔：uni-app官網(wǎng)

uniapp使用的優(yōu)點(diǎn)和缺點(diǎn)

●優(yōu)點(diǎn)：

1)多端支持

當(dāng)然是多端開發(fā)啦，uni-app是一套可以適用多端的開源框架，一套代碼可以同時(shí)生成ios，Android，H5，微信小程序，支付寶小程序，百度小程序等。

2)更新迭代快

用了它的Hbx你就知道，經(jīng)常會(huì)右下角會(huì)彈出讓你更新，沒錯(cuò)，看到它經(jīng)常更新，這么努力的在先進(jìn)與優(yōu)化，還是選良心的了。

3)擴(kuò)張強(qiáng)

你可以把輕松的把uniapp編譯到你想要的端，也可以把其它端的轉(zhuǎn)換成uniapp，例如微信小程序，h5等；如果開發(fā)app的時(shí)候，前端表現(xiàn)不夠，你還可以原生嵌套開發(fā)。

4)開發(fā)成本、門檻低

不管你是公司也好，個(gè)人也好，如果你想開發(fā)多終端兼容的移動(dòng)端，那uniapp就很適合你。

5)組件豐富

社區(qū)還是比較成熟，生態(tài)好，組件豐富，支持npm方式安裝第三方包，兼容mpvue，DCloud有大量的組件供你使用。

●缺點(diǎn)：

1)爬坑

每個(gè)程序前期肯定都會(huì)有很多的坑，一般的都有人解決了，沒解決的，你就要慢慢的去琢磨了，官方bug的話，提交反饋，等官方修復(fù)。

2)某些組件不成熟

我說的是某些官方組件，像什么地圖組件，直播組件等，你要在上面開發(fā)一些特別功能的話，可能還要話費(fèi)很多時(shí)間。

3)nvue有點(diǎn)蛋疼

某些組件或某些功能，官方明確說，建議用nvue開發(fā)，那么問題來了，nvue有很多的局限，特別是css，很多都不支持，什么文字只能是text，只支持class樣式，很多都需要看文檔。

開發(fā)規(guī)范

uni-app 使用vue的語法結(jié)合小程序的標(biāo)簽和API。為了實(shí)現(xiàn)多端兼容，綜合考慮編譯速度、運(yùn)行性能等因素，uni-app 約定了如下開發(fā)規(guī)范：

1.uniapp的頁面開發(fā)遵循 Vue 單文件組件 (SFC) 規(guī)范。另外，uniapp不能使用js進(jìn)行html文檔的DOM操作，請嚴(yán)格遵循vue的MVVM的數(shù)據(jù)綁定開發(fā)方式。

●一個(gè)vue的文件中只能包含一個(gè)頂級的模板

●一個(gè)vue文件只能包含一個(gè)腳本定義

●一個(gè)vue文件可以包含一個(gè)或多個(gè)樣式定義

2.組件標(biāo)簽靠近小程序規(guī)范，需要注意的是，在uniapp中不能使用標(biāo)準(zhǔn)的html標(biāo)簽，uniapp組件名稱及使用方式的定義更貼近微信小程序，優(yōu)先參考：uni-app 組件文檔，可以輔助參考微信小程序組件文檔。比如：

●<view>標(biāo)簽在uniapp中的含義與標(biāo)準(zhǔn)html中的標(biāo)簽?zāi)芰ο喈?dāng)

●如果你希望定義圖片，不能直接使用html中的img，你應(yīng)該使用uniapp的組件標(biāo)簽image。

uniapp的接口能力（JS API）非常接近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范

3.Css樣式規(guī)范

uni.scss文件中預(yù)置了一些全局樣式scss變量，這些變量用于定義應(yīng)用的整體樣式風(fēng)格，比如：文字顏色、背景顏色、邊框顏色等等。需要注意的是這個(gè)文件不要隨意修改，如果要更改的話只能修改變量的值，不要修改變量的名。那么如果我們希望增加一些自定義的全局樣式，應(yīng)該怎么去做呢？參考下面的方法：

●首先，自己寫一個(gè)樣式文件，比如:app.scss ，該文件中自定義樣式書寫。將該文件放置于/static/style目錄下；

●其次在app.scss文件的開頭，引入uni.scss文件，引入語句為：@import '~@/uni.scss'；

●最后在App,vue的樣式中，引入這個(gè)自定義全局樣式文件數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了App及頁面的生命周期。

uniapp的局部樣式實(shí)現(xiàn)是以vue文件為單位的，在某個(gè)vue文件內(nèi)定義的樣式，只在該vue的渲染范圍內(nèi)生效。

4.為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開發(fā)

5.字體的使用

uniapp支持字體的引用方式分為2種情況，如果字體文件小于 40kb，uniapp會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式；將字體文件放置到static目錄下，然后通過font-face定義字體。