[TOC] ## uni使用規范 > 寫頁面代碼時，盡量以封裝組件的思路進行設計，參考《[仿轉轉源碼](https://ext.dcloud.net.cn/plugin?id=1531)》 ## uniapp以750rpx屏幕寬度為基準 > rpx 實際顯示效果會等比放大，剩下的元素根據情況定義大小 > 如果ui設計出圖后，有個設計技巧就是使用photoshop將圖片寬度設置為750px后，然后以后每個元素的大小，間距等就可以定位了，比如頭像是50px，那么代碼中我們可以設置成50rpx ## 定義公共類 ``` font-size:28rpx; ``` ## template結構體常識 > root節點只能包含一個view標簽  ## css 的引用 > 如創建 `/common/main.css` > 1. 在App.vue中全局引用，每個頁面都可以使用該樣式 > 2. 在`/components/xx.vue` 或 `/pages/xx.vue`中局部引用 > 可以使用官方hello-demo css作為公共css > 也可以使用colorUI作為公共css ``` <style> @import "/common/main.css"; </style> ``` ## js的引用 > 如創建 `/common/music.js` > 1. 在App.vue中全局引用，每個頁面都可以使用該函數 > 2. 在`/components/xx.vue` 或 `/pages/xx.vue`中局部引用 ``` <script> import music from './common/music.js' </script> ```  ## iconfont > 1. 到https://www.iconfont.cn/ 將喜愛的圖標加入到購物車，創建文件夾（一般為項目名稱），然后即可下載代碼 > 2. 應用到uniapp中，僅保留`iconfont.css`和`iconfont.ttf`即可，`iconfont.ttf`需在iconfont**項目**中獲取在線資源文件地址，“加入購物車 -> 添加到項目” > 3. 注意：每次iconfont平臺項目中新增了圖標后，都需要對其進行更新圖標代碼，重新生成對應的在線資源地址； > main.css ``` @font-face { font-family: "iconfont"; /* 小于 40kb 的字體文件可以直接本地引用 src: url('~@/common/iconfont.ttf'); */ src: url('https://at.alicdn.com/t/font_42467_u3l1wf3roda.ttf'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-sousuo:before { content: "\e66d"; } ``` > test.vue中應用 ``` <view class="content"> <view class="iconfont icon-sousuo"></view> </view> ``` ## 使用sass編寫樣式 > 在 style 中 添加`lang`屬性，這樣 uniapp 就支持 scss 樣式編譯了 > scss更多知識參考：https://www.jianshu.com/p/a99764ff3c41 ~~~ <template> <view class="content"> <view class="item"> <view class="title">這是我的標題</view> <view class="count">222</view> </view> </view> </template> <style lang="scss"> .item{ background-color: red; } .item{ .title{ background-color: #0066CC; } .count{ background: black; color: #FFF; } } </style> ~~~