* [uni使用规范](https://www.kancloud.cn/wangking/uniapp/1618273#uni_1) * [uniapp以750rpx屏幕宽度为基准](https://www.kancloud.cn/wangking/uniapp/1618273#uniapp750rpx_3) * [定义公共类](https://www.kancloud.cn/wangking/uniapp/1618273#_6) * [template结构体常识](https://www.kancloud.cn/wangking/uniapp/1618273#template_10) * [css 的引用](https://www.kancloud.cn/wangking/uniapp/1618273#css__15) * [js的引用](https://www.kancloud.cn/wangking/uniapp/1618273#js_28) * [iconfont](https://www.kancloud.cn/wangking/uniapp/1618273#iconfont_39) * [使用sass编写样式](https://www.kancloud.cn/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> ~~~