一、準(zhǔn)備

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

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

2.HBuilder插件安裝：工具——插件安裝——APP實機運行/uni-app編譯/stylelint/eslint-js/es6編譯

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

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

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

3、pages.json

包括所有頁面和全局樣式。

4、manifest.json

視覺界面設(shè)置

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

腳本

風(fēng)格

三、實機調(diào)試

1.樣式庫參考

4.1介紹官方css樣式庫

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

4.3 CSS動畫庫介紹

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

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

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

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

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

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

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

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

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

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

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