一、準(zhǔn)備

1.uni-app開發(fā)官網(wǎng)下載HBuilder開發(fā)工具，直接下載解壓即可使用

s 3360//uniapp . dcloud . io/quick start

2.HBuilder插件安裝：工具——插件安裝——APP實(shí)機(jī)運(yùn)行/uni-app編譯/stylelint/eslint-js/es6編譯

其次，創(chuàng)建一個(gè)uni-app項(xiàng)目

1.創(chuàng)建一個(gè)新的uni-app項(xiàng)目并命名它將生成一系列文件。

2.項(xiàng)目框架結(jié)構(gòu)

3、pages.json

包括所有頁(yè)面和全局樣式。

4、manifest.json

視覺(jué)界面設(shè)置

5.vue文件格式模板(僅包含一個(gè)視圖)

腳本

風(fēng)格

三、實(shí)機(jī)調(diào)試

1.樣式庫(kù)參考

4.1介紹官方css樣式庫(kù)

將Hellouni-app項(xiàng)目中的common/uni.css文件復(fù)制到自己的項(xiàng)目中(創(chuàng)建相同的文件路徑)，并在樣式標(biāo)簽下添加相應(yīng)的路徑作為介紹官方css樣式庫(kù)。導(dǎo)入——參考演示介紹圖片資源

4.3 CSS動(dòng)畫庫(kù)介紹

在Animatorcss中下載相應(yīng)效果的css文件，復(fù)制到公共目錄。就像引入樣式庫(kù)一樣，通過(guò)調(diào)整style中路徑對(duì)應(yīng)的價(jià)格來(lái)導(dǎo)入動(dòng)畫庫(kù)文件，在對(duì)應(yīng)的組件中添加動(dòng)畫對(duì)應(yīng)動(dòng)畫效果的名稱來(lái)顯示動(dòng)畫。

4.4設(shè)置全局屬性globalStyle

uni app開發(fā)準(zhǔn)備工作及環(huán)境配置

2.使用圓角矩形工具創(chuàng)建圓角為10px的360*446px圓角矩形，并添加圖層樣式。

計(jì)算器的總體框架已經(jīng)設(shè)計(jì)出來(lái)了。

3.然后使用圓角矩形工具制作一個(gè)326*66px的顯示窗口，圓角5px，填充1A1A1A的顏色，添加圖層樣式的內(nèi)部陰影。

4.繼續(xù)使用圓角矩形工具制作一個(gè)68*48px按鈕，圓角為4px，并復(fù)制4個(gè)按鈕到右邊。快捷鍵CTRL G建立4個(gè)按鈕為組1，然后向下復(fù)制4個(gè)組，分別命名為組2、組3、組4、組5。

5.雙擊組1，依次添加以下圖層樣式，右鍵單擊要復(fù)制圖層樣式的圖層，然后右鍵單擊組2、組3和組4，依次粘貼圖層樣式。

6.將圖層樣式粘貼在右鍵組5的右三個(gè)關(guān)鍵圖層上，較后一個(gè)關(guān)鍵疊加的顏色改為18D516。

7.將圖層樣式添加到第5組左側(cè)的為數(shù)不多個(gè)按鈕。

8.此時(shí)，計(jì)算器已經(jīng)完成了整體外觀，然后在按鍵上添加數(shù)字和符號(hào)，使其更加逼真！