1. 新建項目選擇小程序項目,
2. 選擇代碼存放的硬盤路徑,
3. 填入剛剛申請到的小程序的 AppID,
4. 給你的項目起一個好聽的名字,
5. 勾選 "創建 QuickStart 項目" (注意: 你要選擇一個空的目錄纔會有這個選項),
6. 點擊確定,你就得到了你的第一個小程序了,點擊頂部菜單編譯就可以在 IDE 預覽你的第一個小程序。
編譯預覽
1. 點擊工具上的編譯按鈕,可以在工具的左側模擬器界面看到這個小程序的表現
2. 也可以點擊預覽按鈕,通過微信的掃一掃在手機上體驗你的第一個小程序。
至此,已經成功創建了第一個小程序,並且在微信客戶端上體驗到它流暢的表現。
小程序的代碼構成。
代碼構成
我們可以留意到這個項目裏邊生成了不同類型的文件:
1. json 後綴的 JSON 配置文件
2. wxml 後綴的 WXML 模板文件
3. wxss 後綴的 WXSS 樣式文件
4. js 後綴的 JS 腳本邏輯文件
1. 小程序配置 app.json 配置項細節可以參考文檔 小程序的配置 app.json :
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
2. 工具配置 project.config.json 可以參考文檔 開發者工具的配置:
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/edit.html
3. 頁面配置 page.json 配置項細節可以參考文檔 小程序的配置 page.json:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
4. WXML 模板 WXML 用的標籤是 view, button, text 等等:
<1、更多的組件講述參考下個章節 小程序的能力
https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20171227
<2、if/else, for等控制能力,這些控制能力都用wx:開頭,文檔可以參考 WXML:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/
5. WXSS 樣式文檔可以參考 WXSS
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html
6. JS 交互邏輯
<1、事件,可以參考文檔 WXML - 事件:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
<2、 API,可以參考文檔 小程序的API :
https://mp.weixin.qq.com/debug/wxadoc/dev/api/