小程序开发初体验

创建新项目，添加新页面favor(小程序页面会自动生成js、json、wxml、wxss四个文件；并在app.json中的pages属性注册)

数据绑定

双大括号内填写变量

<!--1.显示普通文本-->
<text class="text">普通文本</text>

<!-- 2.动态绑定message属性 -->
<view class="msg">
  {{ message }}
</view>

列表渲染

wx:for="{{list}}" wx:key="*this"

循环变量 => item 和 index

<!-- 3.动态展示列表数据 -->
<view>
<!-- for循环，block相当于vue中的template -->
  <block wx:for="{{movies}}" wx:key="*this">
    <view>
      {{item}}-{{index}}
    </view>
  </block>
</view>

事件监听

采用 bind:～组成；其中 : 可以省略

<!-- 4.计数器案例 -->
<view class="counter">
  <view class="count">
    当前计数：{{counter}}
  </view>
  <button size="mini" type="primary" bind:tap="increment">+1</button>
  <button size="mini" type="warn" bindtap="decrement">-1</button>
</view>

js文件

data中定义要绑定的数据

方法可直接写入 Page 函数的入参对象中；函数中的this指向本页面

修改data中的数据要想重新渲染页面必须使用 this.setData({}) 方法，和react类似

// pages/favor/favor.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello Weixin',
    movies: ['三国演义', '西游记', '水浒传', '红楼梦'],
    counter: 0
  },

  increment() {
    console.log(this);
    // 修改data中的数据，并不会引起页面刷新（小程序和react中不会自动检测新数据重新渲染页面）
    // this.data.counter += 1
    
    // 修改data，并希望页面重新渲染，这里必须使用this.setData()
    this.setData({
      counter: this.data.counter + 1
    })
  },

  decrement() {
    this.setData({
      counter: this.data.counter - 1
    })
  },
})

样式文件

.text {
  font-size: 30px;
  color: red;
}

.msg {
  font-size: 50px;
  color: green;
}

.counter {
  text-align: center;
}

.count {
  font-size: 30px;
  color: red;
}

小程序MVVM架构

小程序的MVVM和Vue的MVVM对比

• M：Model
• V：View
• VM：ViewModel -> Vue框架/MINA框架(小程序框架)

MVVM为什么好用

• DOM Listeners：ViewModel层可以将DOM监听绑定到Model层
• Data Bindings：ViewModel层可以将数据的变量，响应式反映到View层
• MVVM架构将我们从 命令式编程 转移到 声明式编程