```html

{{greeting}}

点我改变文字

```

这段代码创建了一个视图容器，里面包含一个文本组件和一个按钮组件。`{{greeting}}`是数据绑定的语法，表示文本内容由逻辑层中`greeting`这个数据决定。`bindtap="changeText"`表示当按钮被点击时，会触发逻辑层中名为`changeText`的函数。

2. 添加页面逻辑 (`index.js`)

打开对应的`pages/index/index.js`文件。Page函数用于注册一个页面。我们修改其内容为：

```javascript

Page({

greeting: 'Hello World!'

},

changeText: function {

this.setData({

greeting: '你好，小程序！'

})

})

```

在`data`对象中，我们定义了页面初始数据`greeting`，其值为`'Hello World!'`。

我们定义了一个方法`changeText`。当按钮被点击时，此方法被调用。`this.setData`函数用于更新页面数据，它会将新的数据同步到视图层，并触发页面的重新渲染。这里我们将`greeting`的值更新为`'你好，小程序！'`。

3. 添加页面样式 (`index.wxss`)

打开`pages/index/index.wxss`文件，为页面添加一些基本样式：

```css

container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

text {

font-size: 24px;

color: 07c160;

margin-bottom: 30px;

button {

width: 200px;

```

这段样式使用Flex布局将内容垂直水平居中，并设置了文字大小、颜色和按钮宽度。

4. 预览效果

保存所有文件后，开启者工具左侧的模拟器会自动刷新。你将看到一个居中显示的绿色“Hello World!”文字，以及一个按钮。点击按钮，文字会立刻变成“你好，小程序！”。恭喜，你已经完成了第一个交互功能！

四、 实现数据绑定与列表渲染

实际应用中小程序常常需要展示列表数据。WXML提供了`wx:for`指令来实现列表渲染。

1. 在逻辑层准备列表数据

在`index.js`页面的`data`中增加一个数组：

```javascript

greeting: 'Hello World!',

todoList: ['学习WXML语法', '掌握JS逻辑', '熟悉组件使用', '预览与发布']

```

2. 在视图层循环渲染列表

在`index.wxml`中，在按钮下方添加：

```html

现在待办：

{{index + 1}}. {{item}}

```

`wx:for="{{todoList}}"`表示遍历`data`中的`todoList`数组。

在循环体内，默承认以通过`item`访问当前数组元素，通过`index`访问当前项的下标。

`wx:key="index"`为列表项指定一个仅此标识，有助于提升渲染效率（这里简单使用索引）。

3. 为列表添加样式

在`index.wxss`中增加：

```css

list-title {

font-weight: bold;

margin-top: 40px;

margin-bottom: 10px;

list-item {

padding: 10px;

border-bottom: 1px solid eee;

```

保存后，模拟器中会清晰展示出一个带有序号的待办事项列表。

五、 预览与上传

开发过程中，你可以随时在模拟器中调试。当功能基本完成，需要真机体验或准备发布时，需进行以下操作。

1. 点击预览

在开启者工具顶部工具栏，点击“预览”按钮。工具会生成一个二维码。使用手机微信扫描此二维码，即可在真机上体验当前小程序版本。这是测试交互和样式适配性的关键步骤。

2. 上传代码

当开发完毕，准备提交审核时，点击工具栏的“上传”按钮。填写本次上传的版本号（例如0.1.0）和项目备注，点击“上传”。代码将被上传至微信服务器，但此时用户还无法搜索到。

3. 提交审核与发布

登录微信公众平台小程序后台，在“管理”-“版本管理”中，找到你刚刚上传的开发版本。点击“提交审核”，按照要求填写相关信息（如测试账号等）。审核通过后，你即可在后台将此版本“发布”为线上版本，供所有微信用户搜索和使用。