2021-08-25 13:15 來自于 Dreamtizen
一、準備
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
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.此時，計算器已經完成了整體外觀，然后在按鍵上添加數字和符號，使其更加逼真！