[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> ~~~