首页

在 app.json 的 pages 里放在第一个的即首页

三个案例

<!--pages/favor/favor.wxml-->
<!-- 1.显示普通的文本 -->
<text class="title">我是普通的文本</text>

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

<!-- 3.动态展示列表数据 -->
<view class="movies">
  <!-- for循环: block -->
  <block wx:for="{{movies}}" wx:key="*this">
    <view>
      {{ item }}-{{ index }}
    </view>
  </block>
</view>

<!-- 4.事件绑定: 计数器·e案例 -->
<view class="counter">
  <view class="count">当前计数: {{ counter }}</view>
  <button size="mini" type="primary" bindtap="increment">+1</button>
  <button size="mini" type="warn" bindtap="decrement">-1</button>
</view>

// pages/favor/favor.js
// 实例化: 页面实例
Page({
  data: {
    // 1.案例一: 数据绑定 mustache语法
    message: "Hello World",

    // 2.案例二: 列表数据
    movies: ["少年派", "大话西游", "星际穿越", "独行月球"],

    // 3.案例三: 计数器
    counter: 0
  },

  // 监听的事件方法
  increment() {
    console.log("+1");
    // 修改data中的数据, 但是你的修改并不会引起页面的刷新(自动检测你的新数据重新渲染页面, 在小程序中不会, 在react中也不会)
    // this.data.counter += 1
    // console.log(this.data.counter);

    // 修改data, 并且希望页面重新渲染, 这里必须使用this.setData()
    this.setData({
      counter: this.data.counter + 1
    })
  },
  decrement() {
    console.log("-1");
    this.setData({
      counter: this.data.counter - 1
    })
  }
})

/* pages/favor/favor.wxss */
.title {
  font-size: 20px;
  color: red;
}

.message {
  font-size: 30px;
  font-weight: 700;
  color: green;
}

.counter {
  text-align: center;
}

.count {
  margin-top: 30px;
  font-size: 20px;
  font-weight: 700;
  color: orange;
}

小程序的 MVVM 架构思想