{{greeting}}

```

注意 `{{greeting}}`，它就像一个小窗格，专门用来显示我们在 `.js` 的 `data` 里定义的 `greeting` 的内容。当按钮被点击，`sayHello` 函数执行，`greeting` 的数据变了，这个“小窗格”里的内容也会自动更新。

写完之后，点击开启者工具左上角的“编译”按钮，你就能在右边的模拟器里看到效果了。点击按钮，那句亲切的问候语就会出现在屏幕上。那一刻的成就感，是实实在在的。

四、让它更好看一点：学点简单的“穿衣搭配”

功能有了，我们还可以让它更好看。这就是 `.wxss` 文件的用武之地了。打开 `pages/index/index.wxss`，我们可以给页面加一些样式。

```css

container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

background-color: f9f9f9;

text {

font-size: 18px;

color: 333;

margin: 20rpx;

button {

margin-top: 40rpx;

background-color: 07c160;

color: white;

border-radius: 10rpx;

```

这里的 `rpx` 是一个很棒的单位，它能根据不同的手机屏幕宽度自动调整尺寸，确保你的页面在各种手机上看起来都比较协调。你可以随意调整颜色、大小、边距，直到你觉得顺眼为止。设计和审美没有标准答案，自己觉得舒服、清晰就好。

五、走得更远一点：数据的传递与存储

一个简单的小程序有了雏形。当你想要做更复杂一点的功能时，比如做一个待办事项列表，就需要接触更多概念，比如数据绑定、列表渲染和本地存储。

假设我们要做一个简单的记事本。在 `.js` 文件的 `data` 里，我们定义一个数组来存放所有的记事：

```javascript

notes: [],

inputValue: ‘’

```

`notes` 是记事列表，`inputValue` 用来临时存放我们输入框里的内容。然后在 `.wxml` 里，我们可以这样写：

```html

添加

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

```

这里有几个新朋友：`` 是输入框；`bindinput=“onInput”` 表示当输入框内容变化时，触发 `onInput` 函数来更新 `inputValue`。`wx:for=“{{notes}}”` 是一个循环指令，它会遍历 `notes` 数组，为数组里的每一项（`item`）生成一个对应的 `` 结构，`wx:key` 则是为了高效更新列表。

对应的 `.js` 函数可能是这样的：

```javascript

onInput: function(e) {

this.setData({

inputValue: e.detail.value

})

},

addNote: function {

if (this.data.inputValue.trim) {

const newNotes = this.data.notes.concat(this.data.inputValue);

this.setData({

notes: newNotes,

inputValue: ‘’

});

// 可以在这里调用微信的本地存储API，将notes保存下来

wx.setStorageSync(‘notes’, newNotes);

```

这样，一个能添加、能显示、并且关闭小程序再打开后数据还在的简易记事本就完成了。`wx.setStorageSync` 是微信小程序提供的本地存储API，可以把数据存在用户的手机里。

六、蕞后的准备：预览、上传与分享

当你在电脑的模拟器上调试得差不多了，一定迫不及待想在真机上看看效果。点击开启者工具上的“预览”按钮，会生成一个二维码。用你的微信（必须是这个小程序管理员的微信号）扫一扫，就能在手机上实时体验自己制作的小程序了。这个过程可能会发现一些在电脑上没注意到的问题，比如触摸区域大小、真实网络环境下的加载情况等，非常有用。

调整满意之后，就可以点击“上传”按钮，将代码打包上传到微信后台。上传后，你需要登录微信公众平台，在“版本管理”中找到上传的版本，提交审核。微信团队会对你的小程序进行审核，确保内容符合规范。审核通过后，你就可以将它发布出去，分享给朋友了。

七、旅程没有终点

第一次提交审核、等待结果的心情，大概就像寄出一封重要的信。而当审核通过，看到自己的小程序真的能被搜索到、被使用时，那种喜悦是无可替代的。它可能很简单，可能用户不多，但它真真切切是你从无到有创造出来的东西。

回顾这段旅程，从注册账号时的小心翼翼，到写下第一行代码时的懵懂，再到解决一个又一个bug后的豁然开朗，每一步都充满了学习的乐趣和创造的满足。小程序开发的世界还有很多可以探索的地方，比如调用手机的摄像头、位置接口，接入网络数据，做出更复杂的交互。但蕞重要的第一步，你已经迈出来了。