wepy2.x那些坑

1、wepy中不能使用原生的input组件

当开发中需要使用radio或者checkbox时，通常设置input的type类型为radio或者checkbox，但是经过编译后统统会变成text类型，wepy不支持这种用法。我们可以直接使用小程序自带的checkbox组件来代替。

2、wepy2.x中拦截器使用方式与wepy1.x不同，本人使用fly.js代替

wepy1.x拦截器用法：

import wepy from 'wepy';
export default class extends wepy.app {
    constructor () {
        // this is not allowed before super()
        super();
        // 拦截request请求
        this.intercept('request', {
            // 发出请求时的回调函数
            config (p) {
                // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必须返回OBJECT参数对象，否则无法发送请求到服务端
                return p;
            },
            // 请求成功后的回调函数
            success (p) {
                // 可以在这里对收到的响应数据对象进行加工处理
                console.log('request success: ', p);
                // 必须返回响应数据对象，否则后续无法对响应数据进行处理
                return p;
            },
            //请求失败后的回调函数
            fail (p) {
                console.log('request fail: ', p);
                // 必须返回响应数据对象，否则后续无法对响应数据进行处理
                return p;
            },
            // 请求完成时的回调函数(请求成功或失败都会被执行)
            complete (p) {
                console.log('request complete: ', p);
            }
        });
    }
}

本人寻思良久，没有发现wepy2.x使用拦截器的案例，所以“曲线救国”使用fly.js来代替。

//添加请求拦截器
fly.interceptors.request.use((request)=>{
    //给所有请求添加自定义header
    request.headers["X-Tag"]="flyio";
      //打印出请求体
      console.log(request.body)
      //终止请求
      //var err=new Error("xxx")
      //err.request=request
      //return Promise.reject(new Error(""))
  
    //可以显式返回request, 也可以不返回，没有返回值时拦截器中默认返回request
    return request;
})

//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
    (response) => {
        //只将请求结果的data字段返回
        return response.data
    },
    (err) => {
        //发生网络错误后会走到这里
        //return Promise.resolve("ssss")
    }
)

详情参考：https://github.com/wendux/fly#

3、数据渲染

我们通过一个案例来说说wepy数据渲染的问题。

// 假设我们data里面有一个数组arr
data: {
    arr: [1,2,3,4,5]
}
methods: {
    // 将数组里面每个元素加10
    handle() {
        for(let i = 0;i < this.arr.length;i++) {
            this.arr[i] += 10;
        }
        console.log(this.arr);
    }
}

我们会发现打印的数组值已经改变，但是视图层并没有重新渲染，这是为什么呢？

原来arr是一个数组，也就是一个对象类型，arr数组名指向的是一个地址，无论我们怎么改变数组里面的值，这个地址是不变的，因此视图层不会重新渲染。

通过上述分析，我们可以改变数组的地址（也就是赋值一个新数组）来触发视图层的渲染。

data: {
    arr: [1,2,3,4,5]
}
methods: {
    // 将数组里面每个元素加10
    handle() {
        let tmp = this.arr;
        for(let i = 0;i < tmp.length;i++) {
            tmp[i] += 10;
        }
        this.arr = [...tmp];
    }
}