`index.wxss`：页面样式文件，语法与CSS几乎完全相同，负责美化`wxml`结构。

`index.js`：页面逻辑文件，处理数据、响应用户交互。

`index.json`：页面配置文件，可覆盖`app.json`中的窗口设置（如导航栏标题），非必需。

步骤2：修改页面结构 (`index.wxml`)

将`index.wxml`中的内容替换为以下更简单的代码：

```html

欢迎来到我的小程序！

这是第一个自定义页面。

点击我

{{message}}

```

这里我们定义了一个按钮，并为其绑定了一个点击事件`bindtap="onTapButton"`，同时用双大括号`{{}}`语法绑定了一个动态数据`message`。

步骤3：添加页面逻辑 (`index.js`)

在`index.js`文件的`Page({})`函数内，修改`data`数据和添加事件处理函数：

```javascript

Page({

message: '初始信息'

},

onTapButton {

this.setData({

message: '你好，世界！按钮被点击了！'

})

wx.showToast({

title: '操作成功',

})

})

```

这段代码做了两件事：一是定义了页面初始数据`message`；二是定义了按钮点击事件`onTapButton`，当用户点击按钮时，会更新`message`的数据并显示一个成功提示框。

步骤4：美化页面样式 (`index.wxss`)

修改`index.wxss`，为元素添加一些基础样式：

```css

container {

padding: 40rpx;

text-align: center;

title {

font-size: 40rpx;

color: 07c160;

margin-bottom: 40rpx;

display: block;

content {

margin-top: 60rpx;

button {

margin: 30rpx 0;

```

注意，小程序推荐使用响应式像素单位`rpx`，它能根据屏幕宽度进行自适应。

四、 真机预览与上传

代码写完了，我们需要看看它在手机上的真实效果。

步骤1：预览

在开启者工具顶部，点击“预览”按钮。

工具会生成一个二维码。打开手机微信，扫描此二维码，即可在手机上体验刚刚开发的小程序。

在手机上点击按钮，观察文字变化和提示框，验证功能是否正常。

步骤2：上传代码（用于后续提交审核发布）

点击开启者工具顶部的“上传”按钮。

填写本次上传的版本号（例如0.1.0）和项目备注（例如“初始化首页”）。

上传成功后，代码会提交到微信小程序后台的“版本管理”中。在这里，你可以将代码提交审核，审核通过后即可发布，让所有微信用户搜索并使用。

五、 核心概念与下一步学习建议

通过以上实践，你已经接触了小程序开发蕞核心的几部分：项目结构、数据绑定(`{{}}`)、事件处理(`bindtap`)、样式编写(`rpx`) 和 API调用(`wx.showToast`)。

为了巩固和深入，建议你按以下顺序进行下一步学习：

1. 掌握更多组件：学习使用`swiper`（轮播图）、`scroll-view`（可滚动区域）、`input`（输入框）等丰富页面。

2. 理解路由与生命周期：学习如何使用`wx.navigateTo`进行页面跳转，理解`onLoad`、`onShow`等页面生命周期函数的执行时机。

3. 进行网络请求：学习使用`wx.request` API从服务器获取真实数据，让你的小程序“动”起来。

4. 熟悉本地存储：学习使用`wx.setStorageSync`和`wx.getStorageSync`在用户设备上存储数据。