4.具體的開發工具介紹可以參考，如下網址

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html?t=2018428

好了我們開始小程式實戰吧！

第一步：開發工具下載

第二步：建立小程式專案

1、選擇“小程式”開發模式

安裝完成後，選擇“小程式專案”

2、新增專案

3、專案配置

申請AppID:https://mp.weixin.qq.com/wxopen/waregister?action=step1

4、完成

開發區域

備註：因為申請測試會佔用測試機器資源，所以一個 APPID 一天只能申請一次測試報告。

第三步：程式碼結構

專案裡邊生成了不同型別的檔案:

.json 字尾的 JSON 配置檔案

app.json 是對當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。

.wxml 字尾的 WXML 模板檔案

從事過網頁程式設計的人知道，網頁程式設計採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和使用者的互動。

.wxss 字尾的 WXSS 樣式檔案

WXSS 具有 CSS 大部分的特性，小程式在 WXSS 也做了一些擴充和修改。

新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位。WXSS 在底層支援新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程式底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。

提供了全域性的樣式和區域性樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全域性樣式，會作用於當前小程式的所有頁面，區域性頁面樣式 page.wxss 僅對當前頁面生效。

此外 WXSS 僅支援部分 CSS 選擇器

.js 字尾的 JS 指令碼邏輯檔案

總結

以上內容大家都看了都非常簡單，更詳細的可以參考微信官方文件，根據以上步驟可以搭建自己的第一個微信小程式，大家可以對生成的初始程式碼可以做一些細微的調整，比如看一下如何獲取微信使用者資訊（userInfo），log日誌如何列印，頁面怎麼跳轉等。