【微信小程序】基础框架

1.页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。可通过两种方式注册页面：
(1)使用 Page 构造器注册页面

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

(2)使用 Component 构造器构造页面
Component 构造器的主要区别是：方法需要放在 methods: { } 里面。页面也可以是组件。

Page({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

这种创建方式非常类似于自定义组件,可以像自定义组件一样使用 behaviors 等高级特性。

2. 微信原生 API接口

小程序 API 有以下几种类型:
(1)事件监听 API
以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpend等。这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

(2)异步API
大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数,此参数主要有success、fail、complete（调用接口结束）回调函数。

wx.login({
  success(res) {
    console.log(res.code)
  }
})

一般情况是通过箭头函数获取数据接口中的数据，比如获取屏幕高度：

  getWindowHeight() {
    wx.getSystemInfo({
      success: (res) => {
        this.windowHeight = res.windowHeight
      }
    })
  }

(3)同步 API

3.关于数据

（1）页面数据处理

• data 是页面第一次渲染使用的初始数据,页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

Page({
//设置 data 的初始值
  data: {
    text: 'Hello world!',
  }
})

• data的赋值和取值
  data 内的变量赋值，可以通过 setData 给他进行设置,setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

//在页面加载完成后来一个赋值和取值的操作
onLoad: function (options) {
    let that = this;
    that.setData({
      text: 'Happy Day!',//赋值
    })
    console.log(that.data.text);//取值
},

4.页面加载

浏览器加载页面时，只把当前页面的html，css，js等相关文件加载，而小程序在进入之后把项目中所有文件加载，并不是按页面需要加载。因此小程序中如果不同页面引用公共js文件时，js文件中公共变量是页面共享的。