微信小程序基础-01

应用程序的结构

小程序结构划分：最上层 App --> 多个 Page --> 多个组件

应用目录的结构

app.json：应用程序入口（最先加载）

多个项目管理方式

将项目加入git 管理

具体操作步骤举例：

小程序初体验

小程序中是没有DOM操作的。

小程序的MVVM 架构

Vue 的 MVVM 和小程序 MVVM 对比

MVVM 为什么好用呢

  DOM Listeners: ViewModel 层可以将 DOM 的监听绑定到 Model 层。
  Data Bindings: ViewModel 层可以将数据的变量 , 响应式的反应到 View 层。

MVVM 架构将我们从 命令式编程 转移到 声明式编程。
  命令式编程：原生操作DOM
  声明式编程：Vue / React / Angular

相关代码案例

home.wxml：

<!--pages/home/home.wxml-->
<!-- 1.小程序的数据绑定 Mustache语法 -->
<view>Hello {{name}}</view>
<view>年龄：{{age+20}}</view>

<!-- 2.列表展示 wx:for item系统自动生成-->
<view wx:for="{{students}}">{{item.name}}-{{item.age}}</view>

<!-- 3.事件监听改变data -->
<view>当期计数：{{counter}}</view>
<button size="mini" bindtap="handlerBtnClick">+</button>
<button size="mini" bindtap="handleSub">-</button>

home.js：

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: '测试数据',
    age: 18,
    students: [{
        id: 110,
        name: '小红1',
        age: 31
      },
      {
        id: 111,
        name: '小红2',
        age: 32
      },
      {
        id: 112,
        name: '小红3',
        age: 33
      },
      {
        id: 113,
        name: '小红4',
        age: 34
      }
    ],
    counter: 0
  },

  //自定义监听函数
  handlerBtnClick() {
    //1.错误做法，界面是不会刷新的
    // this.data.counter++;
    // console.log(this.data.counter)

    // 2.this.setData()
    this.setData({
      //不能使用this.data.counter++/--
      counter: this.data.counter + 1
    })
  },

  handleSub(){
    this.setData({
      //不能使用this.data.counter++/--
      counter: this.data.counter - 1
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})