[小程序] [原创]  WooCommerce微信小程序安装配置教程

阅读此安装指南前,请确保你已具备以下条件

  1. 已通过微信认证的小程序帐号注册小程序,已有通过微信认证的服务号请直接在服务号后台 - 小程序 - 快速注册并认证小程序)
  2. 小程序已开通微信支付(小程序后台微信支付中显示已开通)
  3. 已完成安装向导的WordPress 4.7+网站
  4. 已安装WooCommerce 3.0+ 并完成安装向导
  5. 网站已完成 https 配置
  6. 网站已完成伪静态配置
  7. PHP已启用 openssl 模块


准备

转到官网订单查询页面:https://www.qwqoffice.com/shop.php?mod=order,输入顾客密钥(已绑定密钥的登录用户不需要输入),选择你需要的主题色并勾选扩展功能(如有购买)


点击下载,即可将小程序、配套插件以及所有勾选的扩展插件打包下载,下载后的压缩包结构如下:
woocommerce-lite-***.zip
├── extensions (扩展功能插件,全部安装到WordPress后台)
│   ├── w2w-scan-to-login-***.zip
│   ├── w2w-products-filter-and-orderby-***.zip
│   └── w2w-products-favor-***.zip
├── woocommerce-app-***.zip (已集成扩展功能、更换了主题色的小程序源码)
└── woocommerce-to-wechatapp-***.zip (配套插件,安装到WordPress后台)


后台插件配置

  1. 网站后台安装并激活配套插件woocommerce-to-wechatapp-***.zip),如有扩展功能插件,一并安装激活

  2. 登录小程序后台,设置 - 开发设置,添加你的域名到request合法域名、uploadFile合法域名、downloadFile合法域名和业务域名中。新增了域名之后,请刷新项目配置后重新编译项目:开发者工具-右上角详情-域名信息,显示新添加的域名即可。如不添加需要在后面开发者工具中勾选 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
  3. 同样是小程序后台设置 - 开发设置,找到 AppIDAppSecret 并填写到插件常规设置中

  4. 转到网站后台 - WooCommerce - 设置 - 结算/付款 - 微信支付,填写小程序对应的微信支付的商户号、商户支付密钥和支付简要描述,一般在开通微信支付的开户邮件中可以找到,如丢失请登录小程序对应的微信支付微信支付商户平台进行查询/重置


  5. 设置固定链接,转到 设置 - 固定链接,选择除朴素之外任意一个保存

     


  6. 检查REST API,浏览器输入网址:https://你的网站/wp-json/w2w/v1/,显示下图文字,网站后台配置完成(如显示404错误在固定链接页面直接保存一次即可)



小程序配置

  1. 下载微信开发者工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html


  2. 新建小程序项目(取消勾选“建立普通快速启动模板”),并解压小程序到新建项目的目录(woocommerce-app-***.zip

     


  3. 返回微信开发者工具 打开编辑app.js替换siteURL为你网站的网址


开始体验!


有关小程序的上传和发布,在这里不作过多介绍,详细请参考微信小程序的官方文档:https://developers.weixin.qq.com/miniprogram/dev/

以下是一些可选的配置项:


物流信息

物流信息的接入使用的是快递鸟和KDPT。

KDPT API直接添加QQ:3117725647索取。

以下是快递鸟配置方法:

  1. 注册快递鸟帐号:http://www.kdniao.com/reg
  2. 我的会员中心,获取用户ID和API KEY
  3. 进入后台设置 - WC 微信小程序 - 快递鸟,填写 用户ID 和 API KEY


配置好物流API后,进入WooCommerce - 订单,点击正在处理中的订单,右侧区域即可看到填写物流公司和快递单号的位置

物流接口支持扩展,具体参考配套插件:includes/class-w2w-shipping-track-kdpt.php


模板消息

  1. 首先确保填写了 AppIDAppSecret(设置 - WC 微信小程序 - 常规)
  2. 转到设置 - WC 微信小程序 - 模板消息,点击按钮“一键导入模板”
  3. 显示有两个模板,用途分别为“订单支付消息模板”和“订单发货消息模板”即可


客服消息

登录小程序后台,转到客服消息,添加客服人员

打开https://mpkf.weixin.qq.com/即可回复户消息

也可以使用第三方的客服平台


首页轮播图

转到 设置 - WC 微信小程序,点击灰色部分即可选择图片

下方文本框是点击轮播图时跳转的页面链接,页面路径从根目录开始,例如:

/pages/product-detail/product-detail?id=1,跳转到id为1的产品页

/pages/product-list/product-list?mode=all,跳转到所有产品页


其它页面的页面路径和参数可在开发工具中得到,注意页面路径和页面参数之前有一个?

相关主题
微信支付能整合这个吗?https://www.wpweixin.net/product/345.html 没有公司的个人想做。
游客 发表于 2018-03-01 10:44:14微信支付能整合这个吗?https://www.wpweixin.net/product/345.html 没有公司的个人想做。
小程序只支持微信支付
我的网站使用了WooCommerce TM Extra Product Options插件的按日期预约功能,小程序里面可以实现吗?
1

发表您的留言