逻辑

• 微信小程序逻辑文件的后缀名是 .js
• 包含：数据、事件处理函数 、生命周期函数 和其他函数，如页面特定事件

数据 data

• 数据类型同 JavaScript 数据类型：Number、String，Array，Object等等
• 按照用途分为：响应式数据和静态数据；如无特别说明，都是指响应式数据
• 按照来源分为：全局数据和页面数据
• 按照声明分为：外部数据和内部数据；外面数据使用 require 导入

全局数据 globalData

• 在 app.js 中声明并使用
• 作为全局数据使用；也称作状态
• 其他页面使用 const app = getApp()可以获取 app 所有的数据
• 小程序每次重新启动，数据都丢失；可以考虑使用 本地数据缓存 storage 持久化保存
• 敏感数据请不要本地缓存；如商品数据应从后端获取；订单数据需要保存在后端；而购物车、收藏夹可以缓存在本地

App({
  globalData: {
    // 全局数据
    products: wx.getStorageSync('products') || []
  }
})

• app.globalData 的数据可以在 cconsole 标签页输入并查看

> getApp().globalData

页面数据 data

• 某个页面导入或声明的数据，当前页面内有效
• 响应式数据用于渲染页面，在属性数据 data 中定义
• 静态数据在 page 顶级说明，和 data 同级，且不需要指定数据类型
• 除了使用本页面定义的数据外，还可以使用其它页面的数据，如从 app.js 中获取数据/全局状态、从服务器拉取数据

// 页面外部数据
const app = getApp()
Page({
  // 页面静态数据
  uploadFileUrl: null
  data: {
    // 页面响应式数据
    age: 18,
    msg: 'hi,there',
    url: 'glpla.github.io',
    tempFilePath: null,
    userInfo:{
      uage: 18,
      ugender: '男',
      uname: 'glpla',
      usn:20221001
    },
    goods: []
  },
  // 自定义函数
  getInfo(){
    //...
  }
  // 生命周期函数
  onLoad(options) {
    // ...
  },
})        

• 页面的数据可以在调试器的 AppData 中查看

使用数据 this.data

• 在逻辑 .js

this.data.varible_name

• 结构 .wxml

<view>{{varible_name}}</view>

更新数据 setData()

• 逻辑中的数据变化会影响视图 / 结构 wxml 中绑定数据部分的更新
• 接受两个参数：要更新的数据对象和可选的回调函数（在数据更新完成并且页面渲染结束后执行）
• 如果回调函数中，需要渲染页面/更新，则应考虑 数据合并后一次更新
• 修改简单数据

this.setData({
  msg: 'welcome back'
})

• 修改复杂数据；增加或修改属性；通过扩展运算符，使用了回调函数 cb

this.setData({
  userInfo": {...userInfo, uage:24}
}, cb)

• 修改复杂数据；增加或修改属性；路径写法，更简洁

this.setData({
  "userInfo.uage": 24
})

• 如果直接操作 this.data.userInfo 是不是就不用 this.setData()

this.data.userInfo.uage = 18