wepy2.x那些坑

一、wepy中不能使用原生的input組件

當開發中須要使用radio或者checkbox時，一般設置input的type類型爲radio或者checkbox，可是通過編譯後通通會變成text類型，wepy不支持這種用法。咱們能夠直接使用小程序自帶的checkbox組件來代替。

二、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#

三、數據渲染

咱們經過一個案例來講說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];
    }
}