【小程序专栏】总结uniapp开发小程序的开发规范_uniapp开发规范(1)

{{title}}

* 一个vue的文件中只能包含一个**顶级的**`<template></template>`模板
* 一个vue文件只能包含一个`<script></script>`脚本定义
* 一个vue文件可以包含一个或多个`<style></style>`样式定义


uniapp的页面开发遵循 [Vue 单文件组件 (SFC) 规范](https://bbs.csdn.net/topics/618545628)。另外，uniapp不能使用js进行html文档的DOM操作，请严格遵循vue的MVVM的数据绑定开发方式。


#### 组件及接口规范


需要注意的是，在uniapp中不能使用标准的html标签，uniapp组件名称及使用方式的定义更贴近微信小程序，优先参考：[uni-app 组件文档](https://bbs.csdn.net/topics/618545628)，可以辅助参考微信小程序组件文档。比如：


* `<view>`标签在uniapp中的含义与标准html中的`<div>`标签能力相当
* 如果你希望定义图片，不能直接使用html中的img，你应该使用uniapp的组件标签image


uniapp的接口能力（JS API）非常接近微信小程序规范，但需将前缀 `wx` 替换为 `uni`，详见[uni-app接口规范](https://bbs.csdn.net/topics/618545628)


### 三、css样式规范


#### 全局样式与局部样式


`uni.scss`文件中预置了一些全局样式scss变量，这些变量用于定义应用的整体样式风格，比如：文字颜色、背景颜色、边框颜色等等。 需要注意的是这个文件不要随意修改，如果要更改的话只能修改变量的值，不要修改变量的名。那么如果我们希望增加一些自定义的全局样式，应该怎么去做呢？参考下面的方法：


* 首先，自己写一个样式文件，比如:app.scss ，该文件中自定义样式书写。将该文件放置于`/static/style`目录下
* 其次在app.scss文件的开头，引入`uni.scss`文件，引入语句为：`@import '~@/uni.scss';`
* 最后在App,vue的样式中，引入这个自定义全局样式文件

uniapp的局部样式实现是以vue文件为单位的，在某个vue文件内定义的样式，只在该vue的渲染范围内生效。


#### 尺寸响应式


uniapp框架为了更好的适配不同的移动端屏幕，设置了750rpx为屏幕的基准宽度。如果屏幕宽度小，rpx显示效果会等比缩小；如果屏幕宽度大，rpx显示效果会等比例放大。**举例说明：** 如果设计稿的元素宽度是600px，某元素X的宽度是100px，那么该元素X在uniapp里面设置的宽度应该是：750 \* 100 /600 = 125rpx。


如果大家觉得自己手动计算比较麻烦，可以在文件`manifest.json`中设置`transformPx`的值为true，项目会自动将`px`转换为`rpx`。


#### 字体的使用


uniapp支持字体的引用方式分为2种情况，如果字体文件小于 40kb，uniapp会**自动将其转化**为 base64 格式；将字体文件放置到static目录下，然后通过font-face定义字体。

@font-face {
font-family: ‘test-icon’;
src: url(‘~@/static/iconfont.ttf’);
}

如果字体文件大于等于 40kb， 需开发者自己转换将字体文件转换成Base64字符串，否则使用将不生效；将转换之后的Base64字符串粘贴到下文的位置，完成字体的定义。

@font-face {
font-family: ‘test-icon’;
font-weight: normal;

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

618545628)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！