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暂不支持wepy1.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")
    }
)

封装http请求实际案例：

// 封装http请求
var Fly = require('flyio/dist/npm/wx');
// 导入加密解密包
// var cryptoObj = require('../common/crypto');
// 导入签名包
var signObj = require('../common/sign');
// 导入cid和accountID配置
var httpConfig = require('../http.config');
// eslint-disable-next-line new-parens
var fly = new Fly;

// 获取accountID
var accountID = httpConfig.accountID;
// 获取cid
var cid = httpConfig.cid;
// 获取acoountID生成密钥
// var key = cryptoObj.getKeys(accountID);

// 请求拦截器
fly.interceptors.request.use((request) => {
  // 加密参数
  // const req = signObj.getQ(request.body, key)
  const req = request.body ? JSON.stringify(request.body) : ''; // 后台接收字符串参数
  // 生成签名
  const sign = signObj.getSign({
    cid: cid,
    q: req,
    uid: wx.getStorageSync('uid') || '',
    accountKey: accountID
  });
  // 请求体
  const body = {
    cid: cid,
    uid: wx.getStorageSync('uid') || '',
    sign: sign,
    q: req
  };
  // 重置请求体
  request.body = body;
  // 给所有请求添加自定义header
  request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  request.headers['apiGroupCode'] = 'trainning';
  return request;
})

// 响应拦截器
fly.interceptors.response.use(
  response => {
    let errCode = response.data.code;
    let code = response.data.content.code;
    let data = response.data.content.re || null;
    let msg = response.data.content.msg || '';
    let uid = response.data.uid || '';
    let result = {
      errCode,
      code,
      data,
      msg,
      uid
    };
    return result;
  },
  error => {
    return error;
  }
)

export default {
  methods: {
    $http: fly
  }
}

然后再app.wpy中引入：

详情参考：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];
    }
}