wx原生微信小程序入门常用总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

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

---

一、定义值和修改值

1、定义值

Page({
    
    

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

2、修改值

修改值需要使用this.setData的方法才可以，如下示例

（1）代码

// 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）代码说明

（3）注意点

由于getUserInfo的成功回调里面的this是undefined，所以需要在这里使用that存储this，之后使用that.data.xxx即可使用。当然了，如果回调函数你使用的是箭头函数，就不需要存储this了。

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

二、点击事件

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

三、微信小程序的数据缓存(以setStorage为例使用)

0、setStorageSync和setStorage的区别

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

1、setStorage的使用

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

2、getStorage的使用

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