微信前端代码规范
<h2>目录规范</h2>
<p><strong>组件文件</strong></p>
<ul>
<li>所有组件相关文件统一放在<code>dist</code>目录下。</li>
</ul>
<p><strong>图片文件</strong></p>
<ul>
<li>项目图片文件放置于根目录的<code>images</code>文件夹下，组件独有的图片放在当前组件<code>images</code>目录下</li>
</ul>
<p><strong>命名规范</strong></p>
<ul>
<li>全部采用小写方式， 以下划线分隔。</li>
</ul>
<p>例：<code>my_project_name</code></p>
<h2>WXML规范</h2>
<ul>
<li>wxml标签可以单独出现的情况，尽量单独出现，如<code><input/></code>。</li>
<li>控制每行HTML的代码数量在50个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。
<pre><code><v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
</v-music></code></pre></li>
<li>在属性上，使用双引号，不要使用单引号。</li>
</ul>
<p><strong>注释规范</strong></p>
<ul>
<li>除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。</li>
</ul>
<pre><code><view>...</view>
//导航栏
<view>...</view>
<view>...</view></code></pre>
<h2>CSS规范</h2>
<h4>1.CSS规范</h4>
<ul>
<li>在开发过程中rpx和px均可能用到，如通常情况下间距使用rpx，字体大小和边框等使用px，开发者根据实际情况而定。</li>
</ul>
<pre><code>width: 100rpx;
font-size: 14px;</code></pre>
<ul>
<li>CSS代码需有明显的代码缩进。每一个样式类之间空出一行。</li>
</ul>
<pre><code>.tag{
width: 100%;
}
.container{
width: 100%;
}</code></pre>
<ul>
<li>尽量使用简写属性，并且同一属性放置在一起，避免散乱。</li>
</ul>
<pre><code>/**使用简写属性**/
.image{
margin: 0 auto;
}
/**同一属性放在一块**/
.tag{
margin-left: 10rpx;
margin-right: 10rpx
}</code></pre>
<h4>2、注释规范</h4>
<ul>
<li>成组的wxss规则之间用块状注释。请勿在代码后面直接注释。</li>
</ul>
<pre><code>/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}</code></pre>
<h2>JS规范</h2>
<h4>1.JS规范</h4>
<p><strong>命名规范</strong></p>
<ul>
<li>变量名以及函数名统一采用驼峰命名法，正常情况下函数名前缀需加上清晰的动词表示函数功能，私有函数或者属性以下划线开头表明。常量需用const 声明。</li>
<li>类的命名首字母需大写。</li>
</ul>
<pre><code>//定义常量
const a = 1
//函数命名
getInfo:function(){
return '';
}
//私有函数
_getInfo:function(){
return '';
}</code></pre>
<ul>
<li>私有函数以及回调函数统一放置在生命周期函数后。</li>
<li>删除js文件中未用到的生命周期函数，保持代码的整洁。</li>
</ul>
<pre><code>Pages({
data:{
},
onLoad:function(event){
},
_self:function(){
}
})</code></pre>
<ul>
<li>每个函数之间用一个空行分离结构。</li>
</ul>
<p><strong>数据绑定变量定义规范</strong></p>
<ul>
<li>所有涉及到数据绑定的变量均需在data中初始化。禁止在不定义的情况下直接setData。</li>
</ul>
<pre><code>Pages({
data:{
id : null
},
onLoad:function(event){
let id = event.target.dataset.id
this.data.id = id
}
})</code></pre>
<p><strong>
点击事件规范</strong></p>
<ul>
<li>点击事件函数命名方式为 on + 事件名 或者业务名。</li>
</ul>
<pre><code>onLike: function(event){
}</code></pre>