Commonly used summary for getting started with wx native WeChat applet

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

foreword

希望你能在有vue基础的情况下查看以下内容

---

1. Define value and modify value

1. Defined value

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    nickName: '', // 定义后在方法中使用   this.data.nickName  (用户名)
    avatarUrl: '', // 定义后在方法中使用   this.data.avatarUrl (用户头像url链接)
  },
})

2. Modified value

To modify the value, you need to use the method of this.setData, as shown in the following example

(1) Code

// pages/empower/empower.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    nickName: '', // 用户名
    avatarUrl: '', // 用户头像的url
  },
  // 我已知晓的点击事件
  agreeHandle(e) {
    
    
    let that = this;
    // 获取用户的详细信息
    wx.getUserInfo({
    
    
      // 获取成功的回调方法
      success: function(res) {
    
    
        console.log('111', res);
        let userInfo = res.userInfo; // 用户信息
        // 修改数据的值
        that.setData({
    
    
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl
        });
        // 跳转声明详情页面
        wx.navigateTo({
    
    
          url: '../index/index?nickName=' + that.data.nickName + '&avatarUrl='+that.data.avatarUrl
        });
      }
    })
  },
})

(2) Code Description

(3) Notes

Since the this in the success callback of getUserInfo is undefined, you need to use that to store this here, and then use that.data.xxx to use it. Of course,如果回调函数你使用的是箭头函数，就不需要存储this了。

// 箭头函数写法
success: (res)=> {
    
    
  this.setData({
    
    
    nickName: res.usrInfo.nickName,
  });
}

2. Click event

 <view class="submit-button" bindtap="submitHandle">提交</view>

3. Data cache of WeChat applet (use setStorage as an example)

0. The difference between setStorageSync and setStorage

wx.setStorageSync (synchronous cache ending with sync): https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
wx.setStorage (asynchronous cache without sync ending): https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html //developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
相同：都是将数据存储在本地缓存指定的key中，单个key最大数据长度为 1MB，所有数据存储上限为 10MB
区别：异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。
Points to note:
（1）setStorageSync需要存储的内容，只支持原生类型、Date、及能够通过JSON.stringify序列化的对象，不能直接传入对象。 否则报错：setStorage:fail parameter error: parameter should be String instead of Object;
（2）storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。

1. The use of setStorage

wx.setStorage({
    
    
  key:"nickName",
  data: this.data.nickName
})

2. The use of getStorage

wx.getStorage({
    
    
  key: 'nickName',
  success : (res)=> {
    
    
    this.setData({
    
    
      nickName: res.data,
    });
  }
})