微信小程序开发系列之Hello World

第一步：注册

在微信公众平台官网首页，点击注册。（相关文档可以找到，这里不再累述，望见谅。）

微信小程序注册成功后界面

第二步：编辑器、开发工具

我们假定你已经申请注册好微信小程序了，我们选定一个代码开发的编辑器。

这里，我推荐用：Sublime Text或者 Visual Studio Code。

然后下载微信开发者工具（目前最新版：0.17.172600） 界面如下：

微信开发者工具示意图

如果你经常用Chrome的话，是不是很类似，Chrome下开启调试工具（F12），切换到手机模式，调整调试工具的方向到右侧贴边。

第三步：写代码

我们用Sublime Text打开一个空目录，然后新建3个文件：app.js、app.json、app.wxss。

这3个文件是必须的，名字是固定的，app代表的就是这整个小程序，所以，我们从名字上就能看出它们的重要性了。

至于文件扩展名，先说明一下：.wxss表示css，.wxml表示html，.json表示配置信息，这样，你就知道了，平时我们开发一个网页的3文件（html、css、js），是被另行规定了一下，你只要记住就行了，这是规则。

1、app.js

微信小程序app.js

这里，我们只写一个空App({})，这是规定的语法，你也可以到微信小程序开发文档上看详细说明。

2、app.json

微信小程序app.json

这里大部分是固定的，你只需要改变配置信息就行，针对本文，你需要指定 hello.js（不带扩展名）。

3、app.wxss

微信小程序app.wxss

这是全局的css样式定义，和你之前定义的main.css，让整个网站都用的公共样式一样。

4、hello.js

我们新建一个pages文件夹，让所有的页面都在此管理，接着新建hello.js文件，如下：

微信小程序hello.js文件

Page({})这是固定的格式， data也是固定的，表示静态数据用的，这里，我们定义message变量。

5、hello.wxml

微信小程序hello.wxml文件

这里的view是一个容器，类似我们经常写的div。然后模板引用数据{{变量}}，上个文件，我们定义的变量在这里使用。

6、hello.wxss

微信小程序hello.wxss文件

定义了2个css类样式，供上一个文件的标签class属性使用。

第四步：调试预览，上传

把之前安装的微信开发者工具，打开，创建项目，指定我们的代码目录，就可以预览（需要微信验证登录）。这一部分，不细说了，官方的开发文档上有详细的说明。

调试预览的效果，就如上边编辑器的图片那样的。

关于上传的，微信开发者工具，就可以上传， 但是，因为本文太简单，即便上传了，也不太会审核通过的。

强烈建议你有空了，细看一下《微信小程序官方开发文档》。