* [uni使用規范](http://www.hmoore.net/wangking/uniapp/1618273#uni_1) * [uniapp以750rpx屏幕寬度為基準](http://www.hmoore.net/wangking/uniapp/1618273#uniapp750rpx_3) * [定義公共類](http://www.hmoore.net/wangking/uniapp/1618273#_6) * [template結構體常識](http://www.hmoore.net/wangking/uniapp/1618273#template_10) * [css 的引用](http://www.hmoore.net/wangking/uniapp/1618273#css__15) * [js的引用](http://www.hmoore.net/wangking/uniapp/1618273#js_28) * [iconfont](http://www.hmoore.net/wangking/uniapp/1618273#iconfont_39) * [使用sass編寫樣式](http://www.hmoore.net/wangking/uniapp/1618273#sass_71) ## 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](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> ~~~