網站,商城/微信小程序/app 用wordpress + woocommerce 一站搞定
WordPress 是一個擴展性十分強大的PHP博客系統,通過主題和插件可將其擴展為各種類型的網站,
而 WooCommerce 商城本身也是屬於 WordPress 的其中一個插件,是 WordPress 中人氣最高的商城插件,
如今已有超過38萬的使用量,得益於 WordPress,WooCommerce 也是開源程序,使得個性化定制和二次開發變得非常容易。
下載WordPress
https://cn.wordpress.org/latest-zh_CN.zip
下載XAMPP
https://nchc.dl.sourceforge.net/project/xampp/XAMPP%20Windows/7.4.5/xampp-windows-x64-7.4.5-0-VC15-installer.exe
這次還是使用的開源的小程序商城,我做的只不過調整下配置和少許代碼。
項目源碼和安裝指南
github開源地址:https://github.com/qwqoffice/woocommerce-to-wechatapp-mini
04准備工作
1、個人知識儲備:我沒有相關的代碼經驗,之前稍微接觸過一點點,零零散散,不足以獨立寫代碼
2、軟硬件准備
已通過微信認證的小程序帳號
小程序已開通微信支付
已完成安裝向導的WordPress 4.7+網站
已安裝WooCommerce 3.0+ 並完成安裝向導
網站已完成 https 配置
網站已完成偽靜態配置
PHP已啟用 openssl 模塊
3、源碼和插件准備
首先下載小程序及配套插件源碼,其中
woocommerce-to-wechatapp-mini.app.zip 為小程序源碼
woocommerce-to-wechatapp-mini.plugin.zip 為配套插件
05基本步驟-后台配置
網站后台 - 插件 - 安裝插件 - 上傳插件 woocommerce-to-wechatapp-mini.plugin.zip 並激活
登錄小程序后台, 設置 - 開發設置,添加你的域名到request合法域名、uploadFile合法域名、downloadFile合法域名和業務域名中
同樣是小程序后台設置 - 開發設置,找到 AppID 和 AppSecret 並填寫到插件常規設置中
轉到網站后台 - WooCommerce - 設置 - 結算/付款 - 微信支付,填寫微信支付的商戶號、商戶支付密鑰和支付簡要描述,一般在開通微信支付的開戶郵件中可以找到,如丟失請登錄小程序對應的微信支付的微信支付商戶平台進行查詢/重置
轉到網站后台 - 設置 - 固定鏈接,選擇除朴素之外任意一個保存
檢查REST API,瀏覽器輸入網址:https://你的網站/wp-json/w2w/v1/,有類似於https://wooappdemo.qwqoffice.com/wp-json/w2w/v1/即可
模板消息。轉到插件設置 - 模板消息,點擊按鈕 一鍵導入模板 即可
客服消息。登錄小程序后台,轉到客服消息,添加客服人員,打開https://mpkf.weixin.qq.com/即可回復用戶消息。也可使用第三方的客服平台
首頁輪播圖。轉到 插件設置 - 常規,點擊灰色部分即可選擇圖片
下方文本框是點擊輪播圖時跳轉的頁面鏈接,支持小程序內非tabbar頁面及網站URL。
小程序頁面路徑從根目錄開始。例如:
/pages/product-detail/product-detail?id=1,跳轉到id為1的產品頁
/pages/product-list/product-list?mode=all,跳轉到所有產品頁
具體頁面路徑和參數可在開發工具中得到,注意頁面路徑和頁面參數之前有一個?
網站URL 必須為完整的URL
06基本步驟-小程序
下載微信開發者工具
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
新建小程序項目(取消勾選“建立普通快速啟動模板”),並解壓小程序 woocommerce-to-wechatapp-mini.app.zip 到新建項目的目錄
返回微信開發者工具 打開編輯 app.js 替換 siteURL 為你網站的網址
07可能遇到的坑-跟之前的博客資訊類小程序一樣,問題出在了the7主題上,需要換成其他支持WooCommerce的主題,這次使用的是Storefront