1. 安装微信开发者工具#

首先进入微信官方开发文档中的开发者工具下载页面，根据电脑的操作系统选择最新稳定版。本次实验使用的是微信开发者工具 Stable 2.02.2608040。下载完成后运行安装程序，按照提示完成安装。

2. 创建微信小程序项目#

打开微信开发者工具，选择“小程序”并新建项目。项目名称设置为“小程序测试1号”，选择准备好的本地目录并填写 AppID。后端服务选择“不使用云服务”，开发模式选择“小程序”，初始化方式选择“模板”，模板选择“不使用模板”。完成配置后，单击“创建”进入项目。

创建完成后，项目中主要包含以下文件：

• app.js：小程序的全局逻辑文件；
• app.json：小程序的全局配置文件；
• app.wxss：小程序的全局样式文件；
• pages/index/index.wxml：首页的页面结构文件；
• pages/index/index.wxss：首页的样式文件；
• pages/index/index.js：首页的数据和交互逻辑文件；
• pages/index/index.json：首页的配置文件。

3. 编写页面结构#

在 pages/index/index.wxml 中编写首页结构，添加图片、文本和按钮。{{message}} 用于显示 JavaScript 中定义的数据，bindtap="changeText" 用于绑定按钮的点击事件。

1
<image
2
  class="first-image"
3
  mode="widthFix"
4
  src="../../image/first.png"
5
></image>
6

7
<view class="container">
8
  <text class="message">{{message}}</text>
9
  <button class="action-button" bindtap="changeText">点击我</button>
10
</view>

4. 设置页面样式#

在 pages/index/index.wxss 中设置图片、文字和按钮的样式。图片宽度设置为页面宽度的 100%，页面主体使用 Flex 布局，使文字和按钮纵向排列并居中显示。

1
.first-image {
2
  display: block;
3
  width: 100%;
4
}
5

6
.container {
7
  display: flex;
8
  flex-direction: column;
9
  align-items: center;
10
  padding: 48rpx 32rpx;
11
  box-sizing: border-box;
12
}
13

14
.message {
15
  font-size: 36rpx;
16
  line-height: 1.5;
17
  color: #1f2329;
18
}
19

20
.action-button {
21
  width: 100%;
22
  max-width: 560rpx;
23
  margin-top: 40rpx;
24
  color: #ffffff;
25
  background-color: #07c160;
26
}
27

28
.action-button::after {
29
  border: none;
30
}

5. 实现按钮交互#

在 pages/index/index.js 中定义页面数据和按钮事件。页面加载后，message 的初始值为“Hello World”。单击按钮时调用 changeText 方法，再通过 setData 将 message 修改为“你好，微信小程序！”，页面中的文字会随数据一起更新。

1
Page({
2
  data: {
3
    message: "Hello World"
4
  },
5

6
  changeText() {
7
    this.setData({
8
      message: "你好，微信小程序！"
9
    })
10
  }
11
})

6. 编译运行#

保存代码后，在微信开发者工具中重新编译。模拟器能够正常显示本地图片、“Hello World”文字和绿色按钮。单击“点击我”按钮后，页面文字变为“你好，微信小程序！”，说明按钮事件绑定和页面数据更新功能正常。