轻校通开发规范文档
2020-05-27 本文已影响0人
ltz就是我
目录结构概况
目录结构.png
- images 图片文件夹，图片压缩上线到cdn，统一采用cdn线上路径，更换路径后删除本地图片，由localImageRoot替换为imageRoot。
wxml规范
- wxml标签可以单独出现的情况，尽量单独出现，如<input />。
- 删除无效无用的标签属性。
<input type="text"/>
- 控制每行HTML的代码数量在50个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。
<clock-item
clock="{{item}}"
bind:delClock="delClock"
bind:expandAccessment="expandAccessment"
bind:fingureUp="fingureUp"
cindex="{{index}}"
tid="{{tid}}"
cid="{{item.class_id}}"
bind:expandLikes="expandLikes"
bind:expandContent="expandContent"
type="{{0}}"
othertype="{{1}}"
headerclick="{{true}}"
data-bigindex="{{bigindex}}"
data-index="{{index}}"
>
</clock-item>
- 尽可能不要使用内联样式
css规范
- 在开发过程中rpx和px均可能用到，如通常情况下间距使用rpx，字体大小和边框等使用px，开发者根据实际情况而定
- 强烈推荐采用flex进行布局，禁止使用float以及vertical-align。
- 尽可能不要给元素定宽定高，考虑元素增删。
- 注释：成组的wxss规则之间用块状注释。勿在代码后面直接注释。
/* 单个按钮 悬浮页面底部 */
.form-fixbtn{
width: 365rpx;
height: 80rpx;
}
js规范
- 命名：变量名以及函数名统一采用驼峰命名法。
- 回调函数统一使用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文件中未用到的生命周期函数，保持代码的整洁。
- 所有涉及到数据绑定的变量均需在data中初始化。禁止在不定义的情况下直接setData。
- 点击事件函数命名方式推荐为 on + 事件名 或者业务名。
- JS语句需以分号结束。
组件规范
- 命名：推荐以 “c-”为开头，若组件名称为多个单词名拼接而成，采用 ' - ' 连接。
<c-clock/>
<!--或-->
<c-clock-item/>
配置及主要文件说明
app.js 小程序主入口文件
- onShow(){ } 页面来源判断 + 设置小程序分享等链路
- business/pages/loginregistermgt/login（公众号登录）-> this.canEnterSystem(path)
不是wechatinfoget/index（非授权页面）且 页面不包含business/（非b端页面）- 非ucenter/index -> this.canEnterSystem(path)
- canEnterSystem(path){ }
- if(!visitor || !visitor.id || !visitor.token || visitor.version != constants.storageVersion) ->'/wechatinfoget/index'
- if ((path.indexOf('business/') != -1 && path != 'business/pages/loginregistermgt/login' && path != 'business/pages/loginregistermgt/register') || path == 'ucenter/index') -> (个人中心B端business文件夹下所有的页面只要有缓存丢失 跳转到ucenter/index)
- setGlobalData (isOnLunch, params){} 设置小程序分享等链路
app.json 小程序主入口json配置文件
分包预加载 注：新增页面时注意新增位置，必要情况才新增文件夹
- pages 页面路径列表，主包
- 因为分包处理了，这里只有 "ucenter/index"
- subpackages 分包结构配置，每个分包的配置如下
| 字段 | 类型 | 说明 |
|---|---|---|
| root | String | 分包根目录 |
| name | String | 分包别名，分包预下载时可以使用 |
| pages | StringArray | 分包页面路径，相对与分包根目录 |
| independent | Boolean | 分包是否是独立分包 |
- preloadRule 分包预下载规则
- 同一个分包中的页面享有共同的预下载大小限额2M，会在工具打包时校验。
- key 是页面路径， value 是进入此页面的预下载配置，每个配置如下：
| 字段 | 类型 | 必填 | 默认 | 说明 |
|---|---|---|---|---|
| packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。APP 表示主包。 |
| network | String | 无 | WiFi | 在指定网络下预下载，可选值为：all: 不限网络 wifi: 仅wifi下预下载 |
- tabBar 轻校通因为需求（b/c端tab不统一） 需要全自定义，所以不需要
constants 文件夹
-
activityconfig.js 活动校区配置
- dailysignSchool 打卡生成日签 sid=[825]
-
api.js 所有接口api放置文件
-
blacklist.js 违规检查
-
constants.js
- host: 'https://clock.wp53.cn' (开发环境) -> 'https://qxapi.qingxiao.online/daka'，（线上）
- host2: 'https://test.wp53.cn' (测试环境) -> 'https://wx.m.shangjiadao.cn'，（线上）
- dailyPoster（日签背景图）
- dailytext（每日一句）
- dailyPosterNew（日签背景图 新）
- dailytextNew（每日一句 新）
- month（月份 显示用）
-
message.js 商家岛接口返回code提示文字
-
parameter.js 页面路径埋点
-
regexp.js 正则验证规则
filter 文件夹
- index.wxs
service文件夹 （接口请求函数方法，在需要相应接口的页面 import)
import {
circleEditor
} from '../../../service/business/circleeditor.js';
说明：导入utilities/request.js文件以及constants/api.js，务必export每个调用方法，例如
import {
wxRequest
} from '../../utilities/request.js';
import apis from '../../constants/api.js';
function circleEditor (data) {
let url = data.id == 0 ? apis.business.circleEditor.circleCreate : apis.business.circleEditor.circleUpdate;
if (data.id == 0) {
delete data.id;
}
return wxRequest({
role: '2b', //b端请求必填 role:'2b' 字段
url,//api地址
data,//请求携带参数
method: 'POST',//请求方法
errorresolve: 1, //在返回code不为200的时候：1.自动弹窗 2.自定义处理
needToken: true，//是否需要token
})
}
export {
circleEditor
}
utilities 文件夹
- generatePoster.js 生成海报
- index.js 通用方法，包括LocalStorage、登录授权检测、图片视频格式转换、日期格式转换、下载文件、文本复制等
- request.js ajax请求通用函数
- screenshot.js 图片裁剪工具
- wxApi.js 调用微信方法
- wxchart-min.js 图表插件
