微信小程序基础开发实战 4 JavaScript与数据绑定实战

1 JavaScript数据绑定与生命周期

学习目标：

• 掌握小程序数据绑定机制。
• 理解小程序生命周期的基本用法。

知识点讲解：

• data对象的声明与页面数据绑定。
• 页面生命周期函数详解（如：onLoad、onShow、onReady、onHide、onUnload等）。

代码示例（页面生命周期示例）：

// pages/demo/demo.js
Page({
  data: {
    message: "Hello, WeChat!"
  },
  onLoad() {
    console.log("页面加载完成");
  },
  onShow() {
    console.log("页面显示");
  },
  onReady() {
    console.log("页面初次渲染完成");
  },
  onHide() {
    console.log("页面隐藏");
  },
  onUnload() {
    console.log("页面卸载");
  }
});

效果测试：
运行程序，查看开发工具控制台输出，以理解各生命周期函数执行时机。

---

2 事件处理与数据动态渲染

学习目标：

• 熟悉小程序事件绑定和数据更新方法。
• 能够实现数据的实时响应和页面渲染。

知识点讲解：

• bindtap、bindinput等事件的使用。
• 使用this.setData()动态更新数据。

代码示例（实时输入框内容更新）：

• pages/inputdemo/inputdemo.wxml

<view>
  <input bindinput="handleInput" placeholder="请输入内容" />
  <text>您输入的是：{{inputValue}}</text>
</view>

• pages/inputdemo/inputdemo.js

Page({
  data: {
    inputValue: ''
  },
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value
    });
  }
});

效果测试：
启动小程序，输入框输入内容时，文本实时显示输入内容。

---

3 实战案例：电影评分与短评记录

学习目标：

• 掌握数据绑定与页面交互完整实战。
• 实现一个有实际应用价值的小程序功能。

功能说明：
用户可以：

• 输入电影名称、评分、短评。
• 提交记录，实时展示记录的电影列表。
• 删除不想要的记录。

代码实现：

• pages/movie/movie.wxml

<view class="container">
  <input placeholder="电影名称" bindinput="inputName" value="{{movieName}}" />
  <input placeholder="评分(0-10)" type="number" bindinput="inputScore" value="{{movieScore}}" />
  <textarea placeholder="短评" bindinput="inputReview" value="{{movieReview}}" />

  <button bindtap="submitReview">提交影评</button>

  <view class="movie-list">
    <block wx:for="{{movieList}}" wx:key="id">
      <view class="movie-item">
        <text>{{item.name}} ({{item.score}}分): {{item.review}}</text>
        <button data-id="{{item.id}}" bindtap="deleteReview">删除</button>
      </view>
    </block>
  </view>
</view>

• pages/movie/movie.js

Page({
  data: {
    movieName: '',
    movieScore: '',
    movieReview: '',
    movieList: []
  },

  inputName(e) {
    this.setData({ movieName: e.detail.value });
  },

  inputScore(e) {
    this.setData({ movieScore: e.detail.value });
  },

  inputReview(e) {
    this.setData({ movieReview: e.detail.value });
  },

  submitReview() {
    const { movieName, movieScore, movieReview, movieList } = this.data;
    if (!movieName || !movieScore || !movieReview) {
      wx.showToast({ title: '请填写完整信息', icon: 'none' });
      return;
    }
    const newItem = {
      id: new Date().getTime(),
      name: movieName,
      score: movieScore,
      review: movieReview
    };
    this.setData({
      movieList: [newItem, ...movieList],
      movieName: '',
      movieScore: '',
      movieReview: ''
    });
  },

  deleteReview(e) {
    const id = e.currentTarget.dataset.id;
    const newList = this.data.movieList.filter(item => item.id !== id);
    this.setData({ movieList: newList });
  }
});

• pages/movie/movie.wxss (可选样式)

.container {
  padding: 20rpx;
}
.movie-list {
  margin-top: 20rpx;
}
.movie-item {
  border-bottom: 1px solid #ddd;
  padding: 10rpx 0;
  display: flex;
  justify-content: space-between;
}

运行测试：

1. 打开小程序页面，输入电影名称、评分、短评，点击提交。
2. 影评立即显示在下方列表，数据实时更新。
3. 点击“删除”按钮可实时删除对应记录。

---

小结：

本章深入实践了小程序中JavaScript与数据绑定的基本机制，提供了实用的电影评分短评案例，结合生命周期、事件处理、数据绑定三大核心内容，帮助你更好地理解小程序开发技巧。

课后练习：

• 尝试为电影短评增加编辑功能。
• 加入数据缓存功能（使用微信的wx.setStorageSync方法）。