我的wepy初始化模板和一个指南,欢迎提建议和意见

前言

距离上次初了解小程序结束已经20天了,因为公司项目催的急,所以会再安排一个前端来和我一起做项目。

所以为了让他快速上手小程序,并对项目结构有所了解,我写了一个开发指南。后来一想,顺便再把项目的初始化模板再做出来。

在这个新开的项目里,有一些初次尝试的东西。如eslintpugBEM,尽量将项目规范、严谨、整洁(即便只有自己一个人在开发。。。)。

模板下载

wepy-cli 版本 1.7.0 及以上

    # 推荐
    wepy init qianzhaoy/simple-wepy project-name
    
    # or
    
    git clone https://github.com/qianzhaoy/simple-wepy.git

github地址(如果有帮到你欢迎Star)

开发指南

Git分支

日常开发分支请在 origin/dev 分支下开发

编辑器

建议使用 Visual Studio Code,将.wpy文件关联Vue,并利用好代码片段,快速生成页面初始模板,并开启ESLint代码风格检查。

目录结构

开发前请先了解所有目录结构

│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  .prettierrc
│  .wepycache
│  .wepyignore
│  CONTRIBUTING.md
│  min.config.json // minui 组件配置文件
│  package.json
│  project.config.json
│  README.md
│  wepy.config.js
│
└─src
    │  app.wpy
    │
    ├─api // 接口地址
    │
    ├─components // wepy 静态组件
    │  ├─tabbar
    │
    ├─images // 图片
    │
    ├─mixins // page 的 mixins
    |      validation.js
    │
    ├─pages // 所有页面
    |  |
    ├─style
    │  │  app.less // 全局样式(引入了公共样式和所有组件样式)
    |  |
    │  ├─common // 公共样式 以及 变量
    |  |
    │  ├─components // 静态组件样式
    |  |
    │  ├─home // 页面样式
    │
    └─util // 工具类
        │  created.js // 页面全局功能,需在页面引入并调用,参考现有页面 ( 注意,component无法使用全局方法,建议用event或者$parent )
        |  fly.config.js // 请求拦截器配置
        │  template.js
        │  tool.js // 工具
        │  wx.umd.min.js // fly.js源码,对标Vue的axios
        │
        └─wxs
                filter.wxs // 过滤器

created.js

在这个js内,封装全局的使用方法,比mixins更加灵活,但更麻烦。

  • 内部增加了一个onBack生命周期,可以用在navigateBack时来传递数据。但是同样必须要用js内部封装的navigateBack方法来回退页面。为了API使用一致性,同样增加了navigateToredirectTo方法。
  • 为了方便RESTful使用场景和接口请求。增加了四个全局方法。reqGetreqPostreqPutreqDel
  • 还有自定义转发onShareAppMessage

环境变量

新增全局变量 __isProd__isProd ? '生产环境' : '开发环境'

开发规范

预编译

  • html -> Pug
  • css -> Less (建议使用BEM命名规范)
  • js -> ES6

class Page

// script 模板

<script>
import wepy from 'wepy'
import created from '../../util/created.js'

// 类名首字母大写
class Login extends wepy.page {
    // 每个属性之间空一行, 并严格按照以下顺序书写
    config = {}

    mixins = []

    data = {}

    ...自定义属性

    computed = {}

    watch = {}

    ...生命周期钩子

    methods = {}

    events = {}

    ...内部函数方法

    wxs = {}

    components = {}
}

// 直接 export default created(Login) 编译后会报错
const HOC = created(Login)
export default HOC
</script>

class Component

与Page一样,多了一个 props 属性并且没有 config, 把 props 放置顺序代替 config 即可。

class Mixins

参考Page

ESLint

本项目使用了 ESLint 来做代码规范校验,写代码时需要严格执行该规范。.eslintrc.js 文件为规范的配置文件。
官方代码规则文档

组件

现在 wepy 不支持原生组件,所以使用wepy编译组件的时候的一些注意事项。

  • 父组件传值时,使用 .sync 同步组件数据时,父组件的数据必须放在 data 下一级,不能放在 data 下的对象内。
  • wepy 组件为静态组件,故使用时若要循环,要放在 repeat 标签内,若要用多个就要在 components 再加一个ID
  • 项目使用了第三方组件库(minui),此组件库为原生组件,所以不适用以上注意点。
  • 关于编译的问题,因为公共和组件样式是在 app.less 内引入的,所以直接修改组件样式不会立即更新,需要再修改 app.less 保存,才行(如打个空格保存)。

表单验证

写了一个简单的表单验证方法放在了 mixins/vuelidation.js , 需要页面内引入并加入 mixins: [ vuelidation ] , 然后在 Class 内增加一个 自定义属性 vuelidation 来配置校验方法。例:

    class Login extends wepy.page {
        vuelidation = {
            username: [
                { type: 'required', msg: '请输入账号' },
                { type: 'username' }
            ],
            password: [
                { type: 'required', msg: '请输入密码' }
            ]
        }
    }

关于 type,可以在 mixins/vuelidation.js 内的 methods 对象里添加验证方法

最后

参考了一下react的高阶组件的想法,增加了一个created.js的全局继承类。实验一下。现在唯一感觉还可以的是增加了一个onBack生命周期。

还有在项目里规范了写法和class命名。重点推荐使用 BEM 的class命名规范,我觉得小程序非常适合BEM的使用场景,虽然一开始对这个规范不太感冒,觉得类名太长了,不过用了之后幸福感还是有明显提升的(不说别的,光光清一色的规范命名也能使强迫症心情舒畅)。配合lessPug 非常实用和整洁。

    原文作者:凉凉凉凉
    原文地址: https://segmentfault.com/a/1190000014960309
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞