微信小程序開發流程
- 有一個郵箱
- 用郵箱注冊小程序賬號並使用該賬號獲取微信小程序AppID
- 用注冊的小程序賬號登錄微信公眾平台(https://mp.weixin.qq.com)
- 完善小程序信息並且添加開發者(至少一個)
- 在微信web開發者工具上開發微信小程序
- 微信公眾號與微信小程序綁定。
- 發布小程序代碼
- 提交審核
使用到的開發工具：微信web開發者工具
一、在Linux環境下安裝微信web開發者工具
步驟：
先安裝 Wine
sudo apt-get install wine
查看版本
wine --version
版本信息如下：
wine-3.0.1 (Debian 3.0.1-2)
安裝完記得配置
winecfg
wcc 和 wcsc 編譯錯誤(若沒有任何錯誤信息可跳過)
執行
sudo apt-get install wine-binfmt
sudo update-binfmts --import /usr/share/binfmts/wine
1.下載開發者工具
git clone https://github.com/cytle/wechat_web_devtools.git
2.進入目錄
cd wechat_web_devtools
3.自動下載最新 nw.js , 同時部署目錄 ~/.config/微信web開發者工具/
./bin/wxdt install
運行
./bin/wxdt
4.設置文件夾權限
sudo chmod -R 777 ~/.config/微信web 開發者工具/
二、第一個小程序
- 打開微信web開發者工具，點擊新建項目選擇小程序項目，項目目錄：選擇新建的項目的存儲位置，appID：填入申請的appID(若沒有，可以使用測試號)，最后填入項目名稱。點擊確定，新項目就創建好了。
- 在開始編寫之前，先了解一下最基本的東西：
1) JSON 是一種數據格式，並不是編程語言，在小程序中，JSON扮演的靜態配置的角色。
2) WXML 全稱是 WeiXin Markup Language，是小程序框架設計的一套標簽語言，結合小程序的基礎組件、事件系統，可以構建出頁面的結構。
3) WXSS（WeiXin Style Sheets）是一套用於小程序的樣式語言，用於描述WXML的組件樣式，也就是視覺上的效果。
4) JavaScript是小程序的主要開發語言，開發者使用 JavaScript 來開發業務邏輯以及調用小程序的 API 來完成業務需求。
- 開發步驟：
1) 首先需要創建全局app所需的三個文件：app.js、app.json、app.wxss。
只能放在項目的根目錄下，如下圖：
ps:app.json文件要配置入口頁面(首頁)，代碼如下：
| { "pages":["pages/index/index"] } |
此處用的是相對路徑，如果用絕對路徑"/pages/about/about"就會報錯。
特別注意：.json文件里不能寫注釋，並且不能是個空文件，否則程序會報如下錯誤：
2) 創建單頁面index所需的文件夾：【通常一個頁面的四個文件我們把它們放在一個目錄中】
ps:通常我們用一個目錄管理一個頁面，而一個小程序往往有多個頁面，這時我們就需要把這些頁面的目錄放在同一個目錄中以方便管理。如下圖：
已上圖為例：所有頁面所需的文件夾都放在pages文件夾下，每個頁面有4個文件又統一放在index文件夾下，若有多個頁面，則需要創建多個與Index同級的文件夾，里面同樣放置着該頁面所需的.js、.json、.wxml、.wxss四個文件。
在第1)點我們說過，.json文件不能是個空文件，所以在此處的index.json文件中雖然沒有什么內容要寫，但是也不能空着。此處從簡考慮，我們創建一個空對象即可，如下圖：
同樣，index.js文件也不能空着，否則程序也會報錯。此處從簡單考慮，我們就注冊一個空對象即可：
3) 待以上工作完畢后，我們就可以編寫第一個微信小程序了。
(輸出一個hello world)。
打開index.wxml文件，添加如下代碼：
text標簽用於輸出文本
與html文件同理，我們可以給該標簽添加樣式
① 行內樣式：
② 類樣式：
Idnex.wxml文件：
Idnex.wxss文件：
- 項目預覽
左側的手機窗口即可查看到對應的效果