一、準備

1.uni-app開發官網下載HBuilder開發工具，直接下載解壓即可使用

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

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

其次，創建一個uni-app項目

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

2.項目框架結構

3、pages.json

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

4、manifest.json

視覺界面設置

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

腳本

風格

三、實機調試

1.樣式庫參考

4.1介紹官方css樣式庫

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

4.3 CSS動畫庫介紹

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

4.4設置全局屬性globalStyle

uni app開發準備工作及環境配置

1.打開PS，新建一個800*600px的畫布，填充C7FDC6。

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

計算器的總體框架已經設計出來了。

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

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

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

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

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

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