1. Common interactive feedback design

1. Using the loading property of the button component, a Loading appears in front of the text of the button

2.wx.showToast display prompt (usually used with wx.hideToast)

3.wx.showModal modal dialog

2. Local storage

(1) Synchronization

1. Storage: wx.setStorageSync('list', {age:5})

2. Get: wx.getStorageSync('list')

  //local sync cache
  syncSet(){
    console.log('This is a synchronous cache');
    wx.setStorageSync('sync', {content:'This is a synchronous cache'})
  },
  //local synchronization
  syncGet(){
    console.log(wx.getStorageSync('sync'));
  },

(2) Asynchronous

1. Storage: wx.setStorage({ })

2. Get: wx.getStorage({ })

//local asynchronous storage
  asyncSet(){
    wx.setStorage({
      key:'async',
      data:'This is the data stored asynchronously',
      success(){
        console.log('Asynchronous storage');
      }
    })
  },
  //local asynchronous fetch
  asyncGet(){
   wx.getStorage({
      key:'async',
      success(res){
        console.log(res);
      }
    })
  },

3. Jump between applet interfaces

1.wx.navigateTo

Keep the current page, only open non-tabBar pages, return to this page when you return

2.wx.redirectTo

Close and unload the current page, only non-tabBar pages can be opened

3.wx.switchTab

Close all non-tabbar pages, only open tabBar pages

4.wx.reLaunch

Close and uninstall all pages, you can open any page

5.wx.navigateBack

Return to the previous page. You can specify how many pages to return. If redirectTo is used, the closed page will not be returned.

6.navigator label

The url address added in the navigator tag can jump to the non-tabBar page
If you want to jump to the tabBar page, you can add an open-type='switchTab' to jump to the tabBar page, which is essentially equivalent to the wx.switchTab function

4. Passing parameters between Mini Program pages

1. Route jump parameters

Can routing jump parameters pass? way to concatenate parameters.

wx.switchTab({
      url: '../todolist/todolist?id=789',
   })
//or the navigator tag
<navigator url="../detail/detail?id=666">go with parameter detail</navigator>  

After jumping to the specified interface, you can get the parameters of the route jump in the options parameter (itself an object) in the onLoad method of the page. 

  onLoad(options) {
    console.log(options);
  },

2. If you want to pass the data parameter in the tag, you can customize the attribute, get the parameter through e in the corresponding event, and then splicing it into the path of the event jump

 //wxml
 <button bindtap="navigateTo" data-num="10">wx.navigateTo</button>
//js
navigateTo(e){
    console.log(e.target.dataset.num);
    wx.navigateTo({
      url: '/pages/detail/detail?id=999&num='+e.target.dataset.num,
    })
  },

Five, the use of http (wx.request)

url Developer server interface address. Note that the domain name needs to be configured here (note that the project configuration and domain name information need to be changed, go to the web applet developer to manage, modify, and separate them by title (;))

data Request parameters

The header sets the header of the request. Referer cannot be set in the header. The default header['content-type'] = 'application/json'

method (uppercase) Valid values: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

dataType json The content format of the returned packet, if set to json, it will try to do a JSON parsing on the returned data

success The callback function that receives the successful return of the developer service.

The fail interface calls the failed callback function

The callback function for the end of the complete interface call (the call will be executed if the call succeeds or fails)

Encapsulation of http requests

effect:

• Add unified request configuration
• You can add request interceptors and response interceptors, and add some general processing before the request and response.

function request(options) {
  // request interceptor
  //  ...
  // 1. Add some unified parameters, or configure
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme.myhope365.com" + options.url
  }
// default request headers
  let header = {
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }
  return new Promise((reslove, reject) => {
    // call interface
    wx.request({
      // default configuration
      // Load incoming configuration
      ...options,
      header,
      success(res) {
       // Response interceptor, which will be executed before all interfaces get data
        //  1. Unified error handling
        if (res.statusCode != 200) {
          wx.showToast({
            title: 'The server is abnormal, please contact the administrator',
          })
        }
        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}
export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}
export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}