Those pit wepy2. X

1. You can’t use native Input components in Weby

When you need to use radio or checkbox in development, it is common to set the type of input to radio or checkbox, but when compiled, it will be of text type. This is not supported by Weby. We can use the checkbox component of the applet directly instead.

2. The use of interceptor in wepy2.x is different from that in wepy1.x, and I use fly.js instead

Weby1.x Interceptor:

import wepy from 'wepy'; export default class extends wepy.app { constructor () { // this is not allowed before super() super(); // intercept request request this.intercept('request', P = new Date(); p = new Date(); p = new Date(); console.log('config request: ', p); Return p; return p; return p; return p; }, // callback function success (p) {console.log('request success: ', p);}, // callback function success (p); // The response data object must be returned, otherwise the response data cannot be processed later; }, // callback function fail (p) {console.log('request fail: ', p); // The response data object must be returned, otherwise the response data cannot be processed later; Complete (p) {console.log('request complete: ', p); }}); }}

I thought for a long time, read the information found that currently wepy2.x does not support wepy1.x interceptor writing method, so the use of “curve to save the country” method, the use of fly.

/ / add request interceptor fly. Interceptors. Request. Use ((request) = > {/ / for all requests to add custom header request. The headers [" X - Tag "] = "flyio"; // Print the request body console.log(request.body) // terminate the request //var err=new Error(" XXX ") // Err. Request =request //return Promise. Reject (new) Error("")) // You can return request explicitly or not. If there is no return value, the interceptor will return request by default. }) // Add a response interceptor, Response interceptors can be carried before then/catch processing fly. The interceptors. Response. Use ((response) = > {/ / will only request the return of a field's data return response. The data}, (err) => {//return promise.resolve (" SSSS ")})

A real-world example of encapsulating HTTP requests:

// Enclosed HTTP request var Fly = require('flyio/dist/ NPM /wx'); // var cryptoObj = require('.. /common/crypto'); Var signObj = require('.. /common/sign'); Var HttpConfig = require('.. /http.config'); // eslint-disable-next-line new-parens var fly = new Fly; // getAccountId = httpConfig. AccountId; Var cid = httpconfig.cid; var cid = httpconfig.cid; // var key = cryptoBj. getKeys(accountId); / / request interceptor fly. Interceptors. Request. Use ((request) = > {/ / / / const encryption parameters. The req = signObj getQ (the request body, key) const req = request.body ? JSON.stringify(request.body) : ''; / / the background receiving string argument / / generated signature const sign. = signObj getSign ({cid: cid, q: the req, uid: wx. GetStorageSync (" uid ") | | ', accountKey: accountID }); / / request body const body = {cid: cid, uid: wx getStorageSync (" uid ") | | ', sign: sign, q: the req}; // Reset the body of request.body = body; // Add custom headers for all requests. Header [' content-type '] = 'application/x-www-form-urlencoded'; request.headers['apiGroupCode'] = 'trainning'; return request; }) / / response interceptor fly. The interceptors. Response. Use (response = > {let errCode. = the response data. The 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 } }

Then introduce it in app.wpy:



For other pages:



For details:https://github.com/wendux/fly#

3. Data rendering

Let’s take a case study of the problem of Weby data rendering.

Data: {arr: [1,2,3,4,5]} data: {arr: [1,2,3,4,5]} method: {// add 10 to each element in the array handle() {for(let I = 0; i < this.arr.length; i++) { this.arr[i] += 10; } console.log(this.arr); }}

We can see that the value of the printed array has changed, but the view layer has not been re-rendered. Why?

It turns out that arr is an array, which is an object type, and the name of the arr array refers to an address, and no matter how we change the value in the array, the address is the same, so the view layer is not going to re-render.

From this analysis, we can change the address of the array (that is, assign a new array) to trigger the rendering of the view layer.

Data: {arr: [1,2,3,4,5]} methods: {// add 10 handle() {let TMP = this.arr; for(let i = 0; i < tmp.length; i++) { tmp[i] += 10; } this.arr = [...tmp]; }}