感謝作者王小樹的授權(quán)，如需轉(zhuǎn)載，請與作者聯(lián)系。
作者：王小樹，現(xiàn)于悅跑圈任職iOS工程師，常用ID：alanwangmodify。歡迎技術(shù)交流，除了移動端技術(shù)，也期待Python、JS、深度學(xué)習(xí)相關(guān)的技術(shù)交流。Github：https://github.com/alanwangmodify。
責(zé)編：陳秋歌，關(guān)注微信開發(fā)等領(lǐng)域，尋求報道或者投稿請發(fā)郵件chenqg#csdn.net。
歡迎加入“微信開發(fā)技術(shù)”群，參與熱點、難點技術(shù)交流。請加群主微信「Rachel_qg」,申請入群，務(wù)必注明「公司+職位」。
一、準備工作
首先注冊一個小程序賬號，得用一個沒注冊過公眾號的郵箱注冊。
注冊過程中需要很多認證，比較繁瑣。如果暫時只是開發(fā)測試，不進行提審、發(fā)布的話，只要完成營業(yè)執(zhí)照號的填寫就可以了，不需要完成微信認證。
注冊完賬號，并使用該帳號進行登錄。
在主頁面左邊列表中點擊設(shè)置，然后在設(shè)置頁面中選開發(fā)設(shè)置，就可以看到AppID，用于登錄開發(fā)工具。
主頁面
設(shè)置頁面
二、開發(fā)工具
可以到官網(wǎng)下載開發(fā)工具。
開發(fā)工具
開發(fā)工具編輯頁面
三、開始項目
打開開發(fā)者工具，選擇小程序選項，到達“添加項目”頁面。
“添加項目”頁面
這個時候?qū)⑶懊嬖O(shè)置頁面中的AppID填寫此處。
如果項目目錄中的文件是個空文件夾，會提示是否創(chuàng)建quick start 項目。
選擇“是”，開發(fā)者工具會幫助我們在開發(fā)目錄里生成一個簡單的 Demo。
這個Demo擁有一個完整的小程序的大概框架。
框架
先看下一目錄：
頁面構(gòu)成
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。
各文件介紹
微信小程序中的每一個頁面的“路徑+頁面名”都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。
路徑
這四個文件按照功能可以分成三個部分：
配置：json 文件。
邏輯層：js文件。
視圖層：wxss.wxml文件。
在 iOS 上，小程序的 JavaScript 代碼是運行在 JavaScriptCore 中。在 Android 上，小程序的 JavaScript 代碼是通過 X5 內(nèi)核來解析。
在開發(fā)工具上，小程序的 JavaScript 代碼是運行在 NW.js（Chrome內(nèi)核） 中。所以開發(fā)工具上的效果跟實際效果有所出入。
組件
微信提供了許多組件，主要分為八種:
- 視圖容器
- 基礎(chǔ)內(nèi)容
- 表單組件
- 操作反饋
- 導(dǎo)航
- 媒體組件
- 地圖
- 畫布
包含view、scroll-view、button、form等普通常用的組件，也提供了地圖map、畫布canvas。
組件主要屬于視圖層，通過wxml來進行結(jié)構(gòu)布局，類似于html。通過wxss修改樣式，類似于css。
組件使用語法實例：
<!--普通視圖--><view>這是一個普通視圖</view><!--wxss樣式修改--><view