一、服务器域名以及web-view配置
小程序后台 --> 开发 --> 开发管理 --> 开发设置
服务器域名可以直接扫码新增，如果是web-view里的域名（假设：www.a.com），需要在根目录上传xxxxxxx.txt文件，能通过https://www.a.com/xxxxxxxxxxxx.txt访问成功代表配置成功
二、项目发包
距离上次做小程序有一年多了，发包流程还是有一些改变，平台性的公司越来越注重隐私安全问题了，所以目前发包流程是得提前提审用户隐私协议，通过后方可提审小程序代码，具体操作指引可依照如下流程：
小程序后台 --> 设置 --> 用户隐私保护指引设置
指引：mp.weixin.qq.com/wxamp/wadev…
三、目录规范
|-- miniprogram # 小程序源码目录
|-- miniprogram_npm # 构建后的npm依赖包
|-- components # 组件目录
|-- config # 配置文件
|-- assets # 静态资源
|-- pages # 页面目录
|-- home # 页面文件夹
|-- index.wxml # 页面wxml结构
|-- index.json # 页面json
|-- index.js # 页面js
|-- index.less # 页面样式
|-- other
|-- index.wxml
|-- index.json
|-- index.js
|-- index.less
...
|-- utils # 工具方法文件夹
|-- app.js
|-- app.json
|-- app.less
|-- sitemap.json # 小程序检索相关配置
|-- node_modules # 依赖包
|-- .gitignore # git相关配置
|-- package.json # 项目依赖json
|-- project.config.json # 项目配置文件
注意需要修改的几个项：
{
...
"miniprogramRoot": "miniprogram/",
...
"setting": {
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
"useCompilerPlugins": [
"less"
]
}
}
以上就是小程序项目的目录结构模板，按照这个模板的好处：
- 1、可以方便新人熟悉项目
- 2、增强项目的可读性
- 3、方便依赖管理
新增页面一定要以 功能语义化作为文件夹名称 + 内容用index
|-- home
|-- index.js
|-- index.less
|-- index.json
|-- index.wxml
四、WXML规范
1.WXML规范
wxml标签可以单独出现的情况，尽量单独出现，如<input />。
控制每行HTML的代码数量在50个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。
<c-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}">
</c-music>
合理展现分离内容，不要使用内联样式。
//推荐使用
<image class="tag"></image>
图片尽量放 CDN 管理，可有效的降低包的占用内存
2.注释规范
除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。
<view>...</view>
//导航栏
<view>...</view>
<view>...</view>
五、CSS规范
1、css规范
在开发过程中rpx和px均可能用到，如通常情况下间距使用rpx，字体大小和边框等使用px，开发者根据实际情况而定。
width: 100rpx;
font-size: 14px;
CSS代码需有明显的代码缩进。每一个样式类之间空出一行。
.c-tag{
width: 100%;
}
.c-container{
width: 100%;
}
尽量使用简写属性，并且同一属性放置在一起，避免散乱。
/**使用简写属性**/
.c-image{
margin: 0 auto;
}
/**同一属性放在一块**/
.c-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、命名规范
变量名以及函数名统一采用驼峰命名法，正常情况下函数名前缀需加上清晰的动词表示函数功能，私有函数或者属性以下划线开头表明。常量需用const 声明。类的命名首字母需大写。
采用ES6 关键字let定义变量，尽量不使用var
//定义常量
const a = 1
//定义变量
let imageContent = res.data
//函数命名
getInfo:function(){
return '';
}
//私有函数
_getInfo:function(){
return '';
}
2、回调函数规范
回调函数统一使用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);
});
3、数据绑定变量定义规范
所有涉及到数据绑定的变量均需在data中初始化。禁止在不定义的情况下直接setData。
Pages({
data:{
id : null
},
onLoad(event){
let id = event.target.dataset.id
this.data.id = id
}
})
点击事件规范，点击事件函数命名方式为 on + 事件名 或者业务名。自动检测
onLike: () => {
}
七、组件规范
1、组件名命名规范
组件在使用时命名以 “c-”为开头的组件名，若组件名称为多个单词名拼接而成，采用 ' - ' 连接。
<c-movies />
2、触发事件规范
组件点击触发事件建议用冒号分隔开
<c-component-tag-name bind:myevent="onMyEvent" />
3、externalClasses命名规范
命名格式采用如下形式：c-class-{name}，name可自行定义
c-class-icon
4、组件样式规范
命名必须以 c- 开头，不允许使用内联样式以及id样式
.c-container{
disaplay: flex;
flex-dirextion: row;
}
八、请求体封装
请求体统一封装，下面这个为示例，可以自行拦截参数做自定义的改造
// http.js
const app = getApp()
const hostname = require('./config')
module.exports = {
http({url, method, data, config}) {
return new Promise((resolve, reject) => {
// 基础参数
let params = {
}
params = {...params, ...data}
wx.request({
url: hostname[app.globalData.env || 'default'].host + url, // 就是拼接上前缀,此接口域名是开放接口，可访问
method: method == 'post' ? 'post' : 'get', // 判断请求类型，除了值等于'post'外，其余值均视作get
data: params,
header: {
'content-type': 'application/json'
},
...config,
success(res) {
resolve(res.data)
},
fail(err) {
reject(err)
}
})
})
}
}
接口统一管理
// api.js
const { http } = require('./http')
const pre = '/cb-wechat'
module.exports = {
checkCode(param) {
return http({
url: `${pre}/wechat/check-code`,
method: 'post',
data: param,
})
},
login(param) {
return http({
url: `${pre}/wechat/login`,
method: 'post',
data: param,
})
},
}
页面调用
// page
const api = require('../../config/api')
getData() {
api.getData({
a: 1,
b: 2
}).then(() => {
}).catch(() => {
}).finally(() => {
})
}
九、内存优化
目前小程序分包大小有以下限制：
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
当小程序体积过大时，怎么来优化内存？
分包加载
// app.json
{
// 主包
"pages":[
"pages/index",
"pages/logs"
],
// 分包
"subpackages": [
{
// 分包A
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
// 分包B
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
独立分包
// app.json
{
// 主包
"pages":[
"pages/index",
"pages/logs"
],
// 分包
"subpackages": [
{
// 分包A
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
// 分包B
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
],
// 代表分包B为独立分包
"independent": true
}
]
}
分包预加载
预加载规则
{
...
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["important"]
},
"sub1/index": {
"packages": ["hello", "sub3"]
},
"sub3/index": {
"packages": ["path/to"]
},
"indep/index": {
"packages": ["__APP__"]
}
}
...
}
了解更多关于分包的官方文档：developers.weixin.qq.com/miniprogram…
