一、準備
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.此時,計算器已經完成了整體外觀,然后在按鍵上添加數字和符號,使其更加逼真!