網站,商城/微信小程序/app 用wordpress + woocommerce 一站搞定


網站,商城/微信小程序/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

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM