第一步：注册
在微信公众平台官网首页，点击注册。（相关文档可以找到，这里不再累述，望见谅。）
微信小程序注册成功后界面
第二步：编辑器、开发工具
我们假定你已经申请注册好微信小程序了，我们选定一个代码开发的编辑器。
这里，我推荐用：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属性使用。
第四步：调试预览，上传
把之前安装的微信开发者工具，打开，创建项目，指定我们的代码目录，就可以预览（需要微信验证登录）。这一部分，不细说了，官方的开发文档上有详细的说明。
调试预览的效果，就如上边编辑器的图片那样的。
关于上传的，微信开发者工具，就可以上传， 但是，因为本文太简单，即便上传了，也不太会审核通过的。
强烈建议你有空了，细看一下《微信小程序官方开发文档》。