微信小程序开发规范文档
微信小程序开发规范文档
摘自: https://shimo.im/docs/EZKacqyM018gmopv/read
目录规范
1.目录概述
组件文件
所有组件相关文件统一放在components目录下。
图片文件
项目图片文件放置于根目录的images文件夹下,组件独有的图片放在当前组件images目录下
模型文件
模型文件主要用于编写各类业务模型。项目模型文件放置于根目录的models文件夹下,组件相关模型放置于components目录下的models文件夹中。
行为文件
行为文件放在所引用的组件目录下。
WXML规范
1. WXML规范
wxml标签可以单独出现的情况,尽量单独出现,如。
<input />
控制每行HTML的代码数量在50个字符以内,方便阅读浏览,多余的代码进行换行处理,标签所带属性每个属性间进行换行。
<v-musicwx:if="{{classic.type===200}}"img="{{classic.img}}"content="{{classic.content}}"
>
</v-music>
合理展现分离内容,不要使用内联样式。
//推荐使用
<image class="tag"></image>
2. 注释规范
除组件外的其他块级元素,均需注释出其功能,并在其上下空出一行与其他代码进行区分。
<view>...</view>//导航栏
<view>...</view><view>...</view>
CSS规范
1. CSS规范
在开发过程中rpx和px均可能用到,如通常情况下间距使用rpx,字体大小和边框等使用px,开发者根据实际情况而定。
width: 100rpx;
font-size: 14px;
CSS代码需有明显的代码缩进。每一个样式类之间空出一行。
.v-tag{width: 100%;
}.v-container{width: 100%;
}
尽量使用简写属性,并且同一属性放置在一起,避免散乱。
/**使用简写属性**/
.v-image{margin: 0 auto;
}/**同一属性放在一块**/
.v-tag{margin-left: 10rpx;margin-right: 10rpx
}
采用flex进行布局,禁止使用float以及vertical-align。
.container{disaplay: flex;flex-dirextion: row
}
2. 注释规范
成组的wxss规则之间用块状注释。请勿在代码后面直接注释。
/** 修改button默认的点击态样式类**/.button-hover {background-color: red;
}
JS规范
1. JS规范
命名规范
变量名以及函数名统一采用驼峰命名法,正常情况下函数名前缀需加上清晰的动词表示函数功能,私有函数或者属性以下划线开头表明。常量需用const 声明。
类的命名首字母需大写。
采用ES6 关键字let定义变量,尽量不使用var
//定义常量
const a = 1//定义变量
let imageContent = res.data//函数命名
getInfo:function(){return '';
}//私有函数
_getInfo:function(){return '';
}
回调函数规范
回调函数统一使用Promise函数的方式进行编写,回调成功的参数统一为res,错误参数为err。
// promise 处理回调
let back = new Promise((resolve, reject) => {if (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});back.then((res) => {console.log('成功回调!', res);
}).catch((err) => {console.log('失败回调!', error);
});
私有函数以及回调函数统一放置在生命周期函数后。
删除js文件中未用到的生命周期函数,保持代码的整洁。
Pages({data:{},onLoad:function(event){},_self:function(){}
})
每个函数之间用一个空行分离结构。
数据绑定变量定义规范
所有涉及到数据绑定的变量均需在data中初始化。禁止在不定义的情况下直接setData。
Pages({data:{id : null},onLoad:function(event){let id = event.target.dataset.idthis.data.id = id}
})
点击事件规范
点击事件函数命名方式为 on + 事件名 或者业务名。
onLike: function(event){}
组件规范
组件名命名规范
组件在使用时命名以 “v-”为开头的组件名,若组件名称为多个单词名拼接而成,采用 ’ - ’ 连接。组件标签在page页面使用时推荐使用单闭合标签(此条约束对于包含有slot的组件无效)
v 来源于法语 单词 ‘vent’ @林间有风<v-movies />
触发事件规范
组件点击触发事件建议用冒号分隔开
<v-component-tag-name bind:myevent="onMyEvent" />
externalClasses命名规范
命名格式采用如下形式:v-class-{name},name可自行定义
v-class-icon
组件样式规范
**林间有风团队所产出的所有组件样式均应采用类的写法,且命名必须以 v- 开头,不允许使用内联样式以及id样式
.v-container{disaplay: flex;flex-dirextion: row
}
标点规范
JS语句无需以分号结束,统一省略分号
JS中一致使用反引号 ``或单引号’ ’ , 不使用双引号。
WXML、CSS、JSON中均应使用双引号。
CSS属性中冒号中后面用一个空格分隔开。
执行一致的缩进(4个空格)
执行一致的换行样式(‘unix’)
微信小程序开发规范文档相关推荐
- 微信小程序开发学习文档(万字总结,一篇搞定前端开发)
一.微信小程序简介 与网页开发不同,小程序有自己的一套标准开发模式:-申请小程序开发账号-安装小程序开发工具-创建和配置小程序项目 1.1 创建第一个小程序 1.2 主界面的5个组成部分 1.3小程序 ...
- 微信小程序开发教程手册文档
微信小程序开发教程文档 微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程 ...
- node.js 微信小程序 部署服务器_微信小程序开发入门(一),Nodejs搭建本地服务器...
1. 如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下 ...
- 微信小程序游戏开发文档以及开发工具地址
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 微信官方于 2017 - 12 - 28 日 开发微信小程序 开发小游戏 , 微信小程序小游戏开发官方 ...
- ui测试怎么做?依据文档有哪些_微信小程序开发流程有哪些?各个环节注意事项...
微信小程序开发流程有哪些?各个环节注意事项是什么?微信小程序开发有哪些注意事项,开发流程是怎样的?下面就一起来看看吧. 1.微信小程序开发之注册小程序 在开发小程序之前,首先就是要注册一个小程序.不过 ...
- 微信小程序开发页面总结-文档(ing)
公共样式定义 /* 公共样式 */ page{height: 100%;background: #f7f7f7; } view,image,input,text,button,textarea {bo ...
- 微信小程序开发(2)_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序 首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
- python开发微信小程序-Python 开发者的微信小程序开发实践
导读 在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
- 与张小龙同行:微信小程序开发
与张小龙同行:微信小程序开发 概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...
最新文章
- 利用CNN来检测伪造图像
- 湖南网络推广浅析外链怎么发才会更快的收录?
- github中origin和upstream的区别(转)
- eclipse基本断点调试
- Tomcat - 都说Tomcat违背了双亲委派机制,到底对不对?
- 使用Eclipse进行PHP的服务器端调试
- 前端做CRM管理系统是做什么_代办行业的CRM客户关系管理系统应该是什么样子的?...
- SQL 2008下载安装及问题解决
- c语言第九章课后作业答案,C语言课后习题部分答案
- c#winform单表生树
- CAN通讯程序C语言,AT90CAN单片机CAN通信模块介绍及软件编程
- between and 用法
- 英语谚语大全(3267条)
- excel查询oracle数据库,用Excel直接查询Oracle中的数据
- 微信聊天记录丢失后的记录
- mysql count统计
- 微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式(最最最优版)
- 大数据集群扩容机架分配
- 【工具类-- posman导出的接口JSON 转为 jmx】
- 游戏中的弹道学手册(转)
热门文章
- 如何抵制消费主义与诈骗
- 血色先锋队(dfs)
- 这是个很有趣但是一般没什么卵用的技巧
- 上海公安出入境管理 攻略 2016
- PO设计模式在 UI 自动化中的实践
- mysql8.0安装,data目录下面err文件出现Can‘t find error-message file
- c语言的数据类型有什么 long int,C语言的三种整型数据类型:INT SHORT INT和LONG INT...
- 站长探讨说说之SEO文章关键词精准优化布局
- 百度推广的投放策略有哪些?
- week_03_常用类以及接口