一、注冊
首先，在微信公眾平台mp.weixin.qq.com上注冊一個帳號。
小程序開放個人開發者申請注冊，個人用戶可訪問微信公眾平台，掃碼驗證個人身份后即可完成小程序帳號申請並進行代碼開發。
這里不寫太詳細，請查看 https://jingyan.baidu.com/article/4e5b3e192a33da91911e2455.html
注冊完了跳轉到以下頁面，
補充信息，然后下載工具安裝；
可以不用添加開發者，自己就是了；
二、開發入門
1.創建一個項目
登錄成功后，如果是第一次使用該工具會彈出創建項目的窗口，需要填寫appId
在創建過程中，如果選擇的本地文件夾是個空文件夾會出來一個勾選項“在當前目錄中創建quick start項目”，為方便初學者了解微信小程序的基本代碼結構，請勾選此項，勾選后，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo
2.項目代碼結構解釋
點擊開發者工具左側導航的“編輯”，我們可以看到這個項目，已經初始化並包含了一些簡單的代碼文件。
最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。
其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。
（1）app.js是小程序的腳本代碼。我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。
（2）app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。
（3）app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。
（4）在實例程序的代碼中還有2個文件夾，一個是pages,一個是utils, 其中utils是放通用工具類方法的一個文件夾，pages是存放所有頁面的文件夾。
3.小程序頁面文件構成
在這個示例中，有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動日志的展示頁，他們都在 pages 目錄下。
微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json；
.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結構文件。
index.wxml 是頁面的結構文件：
<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
本例中使用了<view/>、<image/>、<text/>來搭建頁面結構，綁定數據和交互處理函數。
index.js 是頁面的腳本文件，在這個文件中我們可以監聽並處理頁面的生命周期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。
頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。
index.json 是頁面的配置文件，是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
參考文章:http://www.cnblogs.com/niejunchan/p/5918855.html
js頁面的默認事件
Page({ /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { } })
快捷鍵
格式調整
- Ctrl+S：保存文件
- Ctrl+[， Ctrl+]：代碼行縮進
- Ctrl+Shift+[， Ctrl+Shift+]：折疊打開代碼塊
- Ctrl+C Ctrl+V：復制粘貼，如果沒有選中任何文字則復制粘貼一行
- Shift+Alt+F：代碼格式化
- Alt+Up，Alt+Down：上下移動一行
- Shift+Alt+Up，Shift+Alt+Down：向上向下復制一行
- Ctrl+Shift+Enter：在當前行上方插入一行
光標相關
- Ctrl+End：移動到文件結尾
- Ctrl+Home：移動到文件開頭
- Ctrl+i：選中當前行
- Shift+End：選擇從光標到行尾
- Shift+Home：選擇從行首到光標處
- Ctrl+Shift+L：選中所有匹配
- Ctrl+D：選中匹配
- Ctrl+U：光標回退
界面相關
- Ctrl + \：隱藏側邊欄
- Ctrl + m: 打開或者隱藏模擬器
歡迎閱讀本系列文章：微信小程序開發教程目錄