移动端开发规范

1、遵循 vue 官方风格指南

vue 风格指南

2、必须

style 标签必须加上 scoped

style 标签不加上 scoped 会导致不同页面之间的样式互相影响

好例子

<style lang="less" scoped>
    .a {
        /deep/ .b {
            background: red;
        }
    }
</style>

反例

<style lang="less">
    .b {
        background: red;
    }
</style>

引入图片文件必须使用线上路径

在vue 文件里面引入本地文件的方式在 App 中无法打开

3、强烈推荐

请求接口尽量使用 this.$req.post() 方法

好例子 laiketuiCommon.vue 文件

Vue.prototype.$req.post({data})

反例

uni.request({
    url: me.$store.state.url,
    data,
    success: function (res) {
        resolve(me)
    },
    fail (res) {
        reject(res)
    }
})

使用公共方法进行页面的跳转

参考 doc/navigator.md 文件

好例子

<text @click="navTo('/pagesB/setUp/paymentPassword')">{{language.paymodel.forgot}}</text>

反例

<text @click="forgetPW">{{language.paymodel.forgot}}</text>
.
.
.
forgetPW: function () {
    uni.navigateTo({
        url: '../../pagesB/setUp/paymentPassword'
    })
}

4、推荐

尽量使用 async 函数来代替原来的 Promise 语法

好例子

class Demo {
    async index () {
        await this.f1();
        await this.f2();
        await this.f3();
        console.log('f1 f2 f3 都执行完了')
    }
    async f1 () {
        return new Promise.resolve()
    }
    async f2 () {
        return new Promise.resolve()
    }
    f3 () {
        return new Promise.resolve()
    }
}

反例

class Demo {
    async index () {
        this.f1().then(() => {
            this.f2().then(() => {
                this.f3().then(() => {
                    console.log('f1 f2 f3 都执行完了')
                })
            })        
        })
    }
    async f1 () {
        return new Promise.resolve()
    }
    async f2 () {
        return new Promise.resolve()
    }
    f3 () {
        return new Promise.resolve()
    }
}

函数命名如非必要不要使用 _xxx 函数命名

目前的项目没有使用 class 的继承特性，用 mixins 的地方也比较少，_函数一般都是只在当前类当中生效，privite 方法，目前的vue文件基本每个文件都是独立的每个方法都是方法没有继承关系，就不要用下划线加函数名称的方式命名了

封装的组件在时间允许的情况下尽量把原来需要更换的也换了

时间不允许就另说了

一个列表页应包含以下组件

1. toload
2. heads
3. uni-load-more
4. 为空判断

5、不推荐

不要在 vue 文件里面写存纯js

components/laiketuiCommon.vue` 应该拆分成 `config.js` 和 `common.js

lktauthorize 验证登录的使用

请谨慎使用验证登录功能，无效的校验只会白白的消耗请求资源，例如在个人中心已经登录了。在进订单的时候校验了用户是否登录，进了订单页面再校验一次，到了订单详情再校验一次。这就是属于无效的校验

推荐：在已经登录了的页面就不进行校验，过期了通过接口来进行判断。

如非必要请不要使用 let me = this 这样的语法

作用域的问题使用箭头函数

好例子

class Demo {
    constructor() {
        this.a = ''
    }
    async index () {
        this.f1(() => {
            this.a = 'xx'
        })
    }
    f1 (callback) {
    }
}

反例

class Demo {
    constructor() {
        this.a = ''
    }
    async index () {
        let me = this;
        this.f1(function () {
            me.a = 'xx'
        })
    }
    f1 (callback) {
    }
}

如需引入外部的js，需要共享当前对象使用 mixins

less 语法尽量使用嵌套特性，不要和css一样写less

最后更新：2022年12月30日