1. 開啟「微信開發者工具」。
2. 選擇Mini Program(小程序),新增Mini Program。
3. 系統會預設一個檔案名,亦同時會於本機內新增一個以這專案(project)命名的文件夾,貯放所有相關的檔案。Appid可輸入touristappid。
4. 新增後完全開啟後大概會出現以下的畫面,預設會輸出Weixin這字句。
5. 主要的檔案位於pages\index文件夾內,分別有4個檔案。
(1) Index.js (是JavaScript的文件)
(2) Index.json (是資料貯存格式的文件)
(3) Index.wxml (是畫面內容的主文件,相當於網頁的html的文件)
(4) Index.wxss (是美化畫面內容程序的文件,相當於網頁制作的CSS文件)
6. 新文件預設會輸出 Weixin這字句,這內容貯存於index.wxml內,如下:
7. 把Weixin修改成Hello World! 暫時不用理會其他程序碼有甚麼用途。
8. 修改後並不會立即顯示的,要經過編繹(compile)才可以,按以下的Compile圖示便可以。
實際上有多種編繹方式的,現時選預設的Ordinary Compilation便可以。
9. 模擬器的畫面便會出現Hello World。
10. 想試試index.wxml內其他語句的作用,試試刪掉index.wxml內所有文字,如下:
11. 然後祇輸入文字,例如hello hello world! (跟以上不同,以便查看有甚麼變化)再按Compile。
12. 結果如下。並不影響文字的輸出,祇是影響文字的位置而已。那些語句是用來編排內容及設定格式的。之後的內容再學習如何處理。
13. 完成! 基本上已制作了第一個微信小程序(Mini Program)了。
相關文章:
1. 微信官方教程.小程序
- 這是微信小程序的官方文件,內裡有完整的相關程序碼及說明。