WooCommerce 微信小程式的開發步驟是怎麼樣的呢？
第一步：登入
首先，您需要具備 WordPress 微信公眾號。登入之後，在網站的 “設定”–“開發設定” 下，獲得 AppID 。
第二步：找到 WordPress 微信開發者工具
在 WordPress 微信官方檔案內找到工具下載連結，然後按自己的系統型別進行下載。下載成功後直接雙擊安裝。開發者工具安裝完成後我們就可以將其開啟，初次開啟會需要用 WordPress 微信掃碼登入，入下圖，用手機 WordPress 微信掃一掃後確認登入就可以了。
第三步：建立一個專案
登入成功後，如果是第一次使用該工具會彈出建立專案的視窗，在建立過程中，如果選擇的本地資料夾是個空資料夾會出來一個勾選項 “在當前目錄中建立 quick start 專案”，為方便初學者瞭解 WooCommerce 微信小程式的基本程式碼結構，請勾選此項，勾選後，開發者工具會幫助我們在開發目錄裡生成一個簡單的 demo，如下圖：
第四步：專案程式碼結構解釋
點選開發者工具左側導航的 “編輯”，我們可以看到這個專案，已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的，是 app.js 、 app.json 、 apss 下面我們簡單瞭解這三個檔案的功能，方便修改以及自己從頭對 WooCommerce 微信小程式開發。
、 app.js 是 WooCommerce 小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理 WooCommerce 小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API，如本例的同步儲存及同步讀取本地資料。
、 app.json 是對整個 WooCommerce 小程式的全域性配置。我們可以在這個檔案中配置 WooCommerce 小程式是由哪些頁面組成，配置 WooCommerce 小程式的視窗背景色，配置導航條樣式，配置預設標題。注意該檔案不可新增任何註釋。
、 app.wxss 是整個 WooCommerce 小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。
我們注意到，在例項程式的程式碼中還有 2 個資料夾，一個是 pages, 一個是 utils, 其中 utils 是放通用工具類方法的一個資料夾，pages 是存放所有頁面的資料夾。我們著重講一下這個
第五步：WooCommerce 小程式頁面檔案構成
在這個示例中，我們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和 WooCommerce 小程式啟動日誌的展示頁，他們都在 pages 目錄下。 WooCommerce 微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是 WooCommerce 小程式的首頁。 每一個 WooCommerce 小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js 、 index.wxml 、 index.wxss 、 index.json 。
第六步：手機預覽
手機預覽（只有獲得 AppId 的才有許可權預覽）開發者工具左側選單欄選擇” 專案”，點選” 預覽”，掃碼後即可在 WordPress 微信客戶端中體驗。