第一步：註冊

在微信公眾平臺官網首頁，點擊註冊。（相關文檔可以找到，這裏不再累述，望見諒。）

微信小程序註冊成功後界面

第二步：編輯器、開發工具

我們假定你已經申請註冊好微信小程序了，我們選定一個代碼開發的編輯器。

這裏，我推薦用：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屬性使用。

第四步：調試預覽，上傳

把之前安裝的微信開發者工具，打開，創建項目，指定我們的代碼目錄，就可以預覽（需要微信驗證登錄）。這一部分，不細說了，官方的開發文檔上有詳細的說明。

調試預覽的效果，就如上邊編輯器的圖片那樣的。

關於上傳的，微信開發者工具，就可以上傳， 但是，因為本文太簡單，即便上傳了，也不太會審核通過的。

強烈建議你有空了，細看一下《微信小程序官方開發文檔》。

微信小程序開發系列之Hello World