从零开始，微信小程序入门之你好世界

打开微信，扫一扫，点开一个小程序，用完即走。这个过程你每天可能重复十几次，但你有没有想过，这些不用下载就能用的东西，到底是怎么做出来的？我猜你想过，不然也不会点进这篇文章。微信小程序从2017年上线到现在，已经渗透进我们生活的每个角落——点奶茶、查公交、缴水电费，甚至连你楼下那个卖煎饼的大爷都有个小程序。但你不用被这些眼花缭乱的应用吓到，所有复杂的东西，拆开来看，起步都是一句最简单的代码。今天我们就从零开始，写一个属于你自己的“你好世界”。

先别急着打开电脑，咱得先把小程序的“地基”搞清楚。微信小程序不像传统的网页，它有一套自己的文件结构。一个最基本的小程序项目，需要四个文件：`.js`、`.json`、`.wxml`、`.wxss`。你一看这后缀就知道，`.js`是逻辑，`.wxml`是结构，`.wxss`是样式，`.json`是配置。听起来很复杂？其实就像你装修房子，`.wxml`是墙怎么砌，`.wxss`是墙刷什么颜色，`.js`是水电怎么走，`.json`是这房子在小区里的登记信息。缺一不可，但每一部分干的事都清清楚楚。你要做的第一件事，不是写代码，而是去微信官方文档下载一个“微信开发者工具”。这玩意儿就是你盖房子的工地，所有活儿都在里面干。

下载安装好之后，你会看到一个登录界面，掏出手机微信扫码，就能进去了。这一步别嫌麻烦，微信小程序的所有开发调试，都得靠这个工具。进去之后，点击“新建项目”，填上你的项目名称，比如就叫“hello-world”，然后选择目录，最关键的一步来了——在“后端服务”那一栏，选“不使用云服务”，在“模板”那一栏，选“不使用模板”。为啥？因为咱们要从零开始，连模板都不用，彻底自己动手。选完之后，点击确定，你会看到左边是模拟器，右边是代码编辑器。模拟器里已经有一个默认的空页面，但咱们不稀罕，要自己写。

现在正式动手。在代码编辑器的左侧文件树里，你会看到项目文件夹下有个`pages`目录，里面有个`index`子目录。这就是咱们的主页面。打开`index.wxml`文件，你会看到里面有一些默认代码，全部删掉，然后输入一行：`你好，世界！`。就这么简单，一个`view`标签，相当于一个容器，里面放了一行文字。但这还不够，咱们得让这行字好看点，不然干巴巴的，谁看啊。

接着打开同目录下的`index.wxss`文件，这是样式文件。把里面的默认代码清空，写上：`view { padding: 50px; font-size: 24px; color: #333; text-align: center; }`。你看，这就是给刚才那个`view`容器加上内边距、字号、颜色和居中属性。现在保存一下，看左边的模拟器，是不是已经出现了一行居中的“你好，世界！”？黑字，白底，干干净净。但你别急，这还没完，咱们得让这行字动起来，有点交互感。

交互靠什么？靠`.js`文件。打开`index.js`，你会看到里面有一些生命周期函数的默认代码，不用管它们，咱们在`data`里加一个变量。找到`data: {`这行，在冒号后面加上`message: “你好，世界！”`，然后把`index.wxml`里的文字改成`{{message}}`。注意，这里用的是双花括号，这是小程序的数据绑定语法。这样一来，页面上的文字就不在代码里写死了，而是从数据里动态取出来的。你再保存，模拟器上显示的结果一模一样，但内在逻辑已经变了。以后你想改文字，不用去翻页面文件，直接在`data`里改就行。

这还没完，咱们再加点料。在`index.js`的`methods`里，不对，小程序页面没有`methods`，你要在`Page({})`这个对象里加一个函数。比如加一个`onTap`函数，里面写`wx.showToast({ title: “你点击了！”, icon: “none” })`。然后在`index.wxml`里的``标签上，加上`bindtap=“onTap”`。保存一下，你在模拟器里用鼠标点一下那行字，看看会发生什么？底部弹出一个轻提示：“你点击了！”。恭喜你，第一个交互功能完成了。从显示到交互，你已经走完了小程序开发最核心的路。

咱们聊聊怎么把这个项目跑起来。在开发者工具的顶部，有个“预览”按钮，点击之后会生成一个二维码。掏出手机，用微信扫一扫，你就能在真机上看到这个“你好世界”了。那一刻的感觉，跟你第一次在网页上敲出“Hello World”完全不一样——因为这次，它跑在微信里，跑在你的手机上，你可以随时把它分享给朋友。从零开始，你只用了不到半小时，就完成了一个可以运行、可以交互的小程序。虽然它简陋得像个刚学走路的孩子，但你已经知道路该怎么走了。

回顾一下，今天你干了什么？你下载了工具，新建了项目，删掉了模板，亲手写了四行代码，加了一个点击事件，在真机上跑了起来。这个过程里，没有高深的理论，没有复杂的架构，就是一个“你好世界”而已。但你别小看这四行代码——所有你现在看到的大小程序，外卖的、打车、银行的，它们的起点，都是这么一句“你好世界”。你以后遇到的每一个报错，每一个逻辑问题，都会让你想起今天这个简单的开始。技术这东西，最怕的就是不敢动手。跨出第一步，后面的路，都是走出来的。