小程序规范

规范细则

单位：rpx
生命周期钩子书写顺序：

- mixin
- components
- props
- data
- computed
- watch
- onLoad
- onShow
- onPullDownRefresh
- onReachBottom
- onHide
- onUnload
- updated
- methods

页面载入存在脏数据，在 onLoad 钩子进行数据初始化：

onLoad () {
    Object.assign(this, this.$options.data())
  }

获取翻页列表格式规范

// 列表只需加载一次用onLoad，返回该页面会导致列表数据改变用onShow
onLoad/onShow () {
    wx.startPullDownRefresh()
}
// 下拉刷新
onPullDownRefresh () {
    this.getXxxList(true, false).then(() => {
      wx.stopPullDownRefresh()
    })
},
// 上拉翻页
onReachBottom () {
    this.getXxxList(false, true)
},
// 获取xxx列表
async getXxxList (isRefresh, isLoading) {
    if (isRefresh) {
        this.pageNo = 1
        this.mainList = []
    } else {
        this.pageNo++
    }
    await this.$post({
        isLoading: isLoading,
        loadingText: '加载中...',
        url: this.$apis.list,
        param: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          ...
        }
    }).then(res => {
        this.mainList.push(...res.data.list)
        this.nodata = this.$util.switchNodata(this.mainList)
    }, () => {
        isRefresh && this.nodata = true
    })
},

van-ui 组件中，动画效果有两个组件，popup 和transition

1）折叠展开之类，用 transition

2）城市下拉树之类，用 popup

van-ui 组件中的以下情况，样式需要另起一个 style，不加 scoped，必要的话对页面根元素加命名空间

1）单页面重写组件样式

2）custom-class自定义的样式

上传图片并提交的一般的逻辑是，提交的时候再做上传操作，上传成功之后调提交的接口

// common.js
/**
 * 上传图片
 * @param {String} url 接口路径
 * @param {Array} fileArr 图片文件数组
 * @param {String} belong 唯一标识
 * @param {Number} index 索引，默认从0开始递归
 * @return promise异步方法
 */
const uploadOneImg = (url, fileArr, belong, index = 0) => { // wx.uploadFile只能一张一张传
  return new Promise((resolve, reject) => {
    if (fileArr.length === 0) {
      return resolve('complete')
    }
    wx.uploadFile({
      url: url,
      filePath: fileArr[index].path,
      name: 'file',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        token: store.state.userInfo.token
      },
      formData: {
        belong: belong,
        type: 2 // 1.一般图片2.咨询图片3.pdf4.pdf图片5.反馈与意见图片 6.历史图片中重复的图片 7.白处方图片
      },
      success: res => {
        if (index < fileArr.length - 1) {
          resolve(uploadOneImg(url, fileArr, belong, ++index))
        } else {
          resolve('complete')
        }
      },
      fail: res => {
        reject(res)
      }
    })
  })
}
// xxx.vue
import { uploadOneImg } from '@/utils/common'
submitFeedBack () {
    uploadOneImg(this.$apis.uploadFeedBackImage, this.fileArr, this.belong).then(res => {
        if (res === 'complete') {
            // 提交操作
            ...
        }
    }, () => {
        // 上传失败
    })
}

按钮统一用小程序原生

html

<button :disabled="!ableSubmit" class="width100 bgcolor-orange color-white" @tap="buy">立即购买</button>

在 GitHub 上编辑此页

上次更新:

小程序规范 ​

规范细则 ​

小程序规范

规范细则