Posted on 留下评论

1.1版本发布

距离第一个版本发布已有一个多月的时间,经过努力,1.1版本终于出炉了。

以下是1.1版本更新内容:

  • A 接入快递鸟物流信息
  • A 订单支付成功和发货模板消息
  • A 支持产品页和订单页的客服消息
  • A 产品详情页产品图片全屏查看
  • A 后台插件列表显示更新提示
  • F 可变产品多级选择失效的问题
  • F 订单列表页订单状态无法切换的问题
  • F 有设置服务条款的网站无法提交订单的问题
  • F 分类最多只获取到10个的问题
  • F 搜索产品无结果时空白的问题
  • F 点击分享的产品卡片标题显示不正确的问题
  • F 后台设置页面报错问题
  • U 去除登录checkSession过程

1.1 版本中添加的主要新功能是物流信息、模板消息和客服消息,使用这几个新功能的时候需要进行一些简单的配置。

物流信息

物流信息的接入使用的是快递鸟平台。

  1. 注册快递鸟帐号
  2. 我的会员中心,获取用户ID和API KEY
  3. 进入后台设置 - WC 微信小程序 - 快递鸟,填写 用户ID 和 API KEY
  4. 进入WooCommerce - 订单,点击正在处理中的订单,右侧区域即可看到填写物流公司和快递单号的位置

模板消息

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

客服消息

  1. 登录小程序后台,转到客服消息,添加客服人员
  2. 打开这里即可回复用户消息
Posted on 留下评论

WooCommerce微信小程序迷你开源版

WooCommerce微信小程序 是使用开源程序 WordPress 和 WooCommerce 作为后台的商城小程序。

迷你版是WooCommerce微信小程序的开源版本

完整版请参考:https://www.qwqoffice.com/article.php?mod=view&tid=30

功能列表

  1.  产品搜索和搜索历史
  2.  产品按分类浏览 支持最多二级分类
  3.  支持可变产品 产品多选项选择 不同选项不同价格 在购物车 结算页 订单页显示已选选项
  4.  产品详情页支持轮播图 产品库存和销量 描述 短描述 产品属性 和相关产品
  5.  商城首页展示轮播图 可在后台管理
  6.  接入微信收货地址 根据不同地址显示对应可用的配送方式 支持多配送方式选择
  7.  购物车页面 自由增减 删除物品 并实时计算价格
  8.  我的页显示各个订单状态对应订单数量及其状态直达
  9.  关于页支持使用WordPress页面进行展示
  10.  订单列表 订单详情 对未支付的订单重新发起支付
  11.  订单备注 及商家给客户的备注
  12.  产品页 订单页 我的页客服消息
  13.  订单支付 商家备注 的模板消息发送
  14.  产品分享海报生成
  15.  整合微信支付
  16.  多支付方式选择 支持银行转账和货到付款

项目源码和安装指南

github开源地址

gitee(码云)开源地址

演示小程序

注意:此演示为完整版的小程序

Posted on 7条评论

WooCommerce微信小程序安装配置教程

准备

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

  1. 已备案的域名
  2. 已通过微信认证的小程序帐号 (点击注册小程序,已有通过微信认证的服务号请直接在服务号后台 - 小程序 - 快速注册并认证小程序)
  3. 小程序已开通微信支付(小程序后台微信支付中显示已开通)
  4. 已完成安装向导的WordPress 4.7+网站
  5. 已安装WooCommerce 3.0+ 并完成安装向导
  6. 网站已完成 https 配置
  7. 网站已完成伪静态配置
  8. PHP 5.5+并且已启用 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),并安装激活extensions目录下所有扩展功能插件

2、登录小程序后台,开发 - 开发设置 - 服务器域名,点击“开始配置”按钮,添加你的域名到request合法域名、uploadFile合法域名、downloadFile合法域名和业务域名中。新增了域名之后,请刷新项目配置后重新编译项目:开发者工具-右上角详情-域名信息,显示新添加的域名即可。如不添加需要在后面开发者工具中勾选 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书

3、同样是小程序后台,开发 - 开发设置 - 开发者ID,找到 AppID 和 AppSecret 并填写到插件常规设置中

4、同样是小程序后台,转到设置 - 第三方设置 - 插件管理 - 添加插件,输入搜索 wxa75efa648b60994b,添加腾讯视频插件。

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

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

7、检查REST API,浏览器输入网址:https://你的网站/wp-json/w2w/v1/,显示下图文字,网站后台配置完成(如显示404错误在固定链接页面直接保存一次即可,如仍然是404,请参考https://www.watch-life.net/wordpress/wordpress-rest-api.html,配置好伪静态)

小程序配置

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

2、解压小程序(woocommerce-app-***.zip)到任意目录

3、打开开发者工具,选择导入项目,填写项目名称(随意),目录选择刚刚解压的目录,并填写小程序AppID,点击导入

4、等待导入完成后,打开编辑app.js替换siteURL的值为你网站的网址(WordPress - 常规 - 站点地址),替换name为你小程序的名字

开始体验!

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

以下一些配置项使你的小程序更加完整:

物流信息

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

KDPT API直接添加QQ:3117725647索取,并转到后台设置 - WC 微信小程序 - 物流信息,选择KDPT,并填写 API密钥。

以下是快递鸟配置方法:

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、首先确保填写了 AppID 和 AppSecret(设置 - WC 微信小程序 - 常规)

2、转到设置 - WC 微信小程序 - 模板消息点击按钮“一键导入模板”

3、显示有四个模板,用途分别为“订单支付模板”、“订单发货模板”、“订单备注模板”和“评论审核模板”即可

客服消息

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

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

手机可使用官方客服小程序“客服小助手”进行消息的回复

也可以使用第三方的客服平台,如芝麻小客服

链接的点击

所有支持填写链接的地方,如关于页面、产品和文章的详情、轮播图、首页模块扩展中的快捷导航模块,均支持以下七种的链接跳转类型:

1、跳转小程序内页面

填写小程序的页面路径,可支持参数(tabBar页面不支持参数),以/开始,页面路径和页面参数可在开发者工具预览区域的下方找到

示例:/pages/product-detail/product-detail?id=404

以下是一些常用的小程序页面:

跳转产品ID为404的产品详情页:/pages/product-detail/product-detail?id=404

跳转文章ID为1199的文章详情页:/pages/post-detail/post-detail?id=1199

跳转所有产品页:/pages/product-list/product-list

跳转按价格倒序的产品列表页:/pages/product-list/product-list?orderby=price&order=desc

跳转颜色筛选为绿蓝黑的产品列表页:/pages/product-list/product-list?filter_color=green,blue,black

跳转价格范围为10~90的产品列表页:/pages/product-list/product-list?min_price=10&max_price=90

跳转分类ID为50的产品列表页:/pages/product-list/product-list?category=50

跳转搜索“T-shirt”关键词的产品列表页:/pages/product-list/product-list?search=T-shirt

跳转可用优惠券码“qo20189”的产品列表页:/pages/product-list/product-list?coupon=qo20189

跳转特色产品列表页:/pages/product-list/product-list?featured=true

跳转促销产品列表页:/pages/product-list/product-list?on_sale=true

跳转购物车页:/pages/cart/cart

跳转所有订单页:/pages/order-list/order-list?status=all

跳转待付款订单列表页:/pages/order-list/order-list?status=pending

跳转领券中心页:/pages/coupon-center/coupon-center

(注:产品列表页可多个参数搭配使用)

2、跳转网站链接

填写网站链接,域名需要添加到小程序后台开发设置-业务域名,请看详细

示例:https://www.qwqoffice.com

3、跳转小程序

直接填写要跳转小程序的AppID即可,AppID需要在小程序全局配置中声明,请看详细

示例:wxdc535f471c1d4a2d

4、拨打电话

填写 phone:要拨打的电话

示例:phone:13800000000

5、打开公众号推文

直接填写推文链接

示例:https://mp.weixin.qq.com/s/gk-5X27wak6WndfPAOiOPw

6、全屏看图

填写 image:要查看的图片

示例:image:https://wooappdemo.qwqoffice.com/wp-content/uploads/2018/10/1-6.jpg

7、打开地图

填写 location:位置参数

示例:

location:{"longitude": 113.466258, "latitude": 23.167464, "scale": 15, "name": "萝岗万达广场", "address": "广州市黄埔区科丰路89号"}

参数解释:

longitude:经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系

latitude:纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系

scale:缩放比例,范围5~18

name:位置名

address:地址的详细说明

其中gcj02坐标可在高德地图位置选取中获得:https://lbs.amap.com/console/show/picker

Posted on 留下评论

WooCommerce微信小程序 WordPress商城小程序


WooCommerce微信小程序 是使用开源程序 WordPress 和 WooCommerce 作为后台的商城小程序。

WordPress 是一个扩展性十分强大的PHP博客系统,通过主题和插件可将其扩展为各种类型的网站,商城就是其中之一。而 WooCommerce 商城本身也是属于 WordPress 的其中一个插件,是 WordPress 中人气最高的商城插件,如今已有超过38万的使用量,得益于 WordPress,WooCommerce 也是开源程序,使得个性化定制和二次开发变得非常容易。

接触 WordPress 已有一年半,发现在国内使用的并不是很广泛,加上今年微信小程序的迅速升温,这款 WooCommerce微信小程序就顺应而生了。

无论你是需要快速搭建一个属于自己的商城网站+商城小程序,还是需要将你的 WooCommerce 网站接入到微信小程序,这款产品都非常适合你。

目前以下功能已开发完成

  1. 兼容Wechat Social插件,实现4端微信用户互通
  2. 好友代付,订单可分享给好友进行支付
  3. 可与购物车共存的立即购买功能
  4. 丰富的链接跳转类型,可跳转小程序内页面,打开网页链接,公众号推文,拨打电话,全屏看图,打开地图,跳转小程序
  5. 支持产品轮播中插入视频 支持本地视频和腾讯视频
  6. 可一键更换任意主题色(下载时选择)
  7. 开发者友好,内置多个Hook和Filter可轻易扩展功能
  8. 后台产品及文章列表一键获取对应产品或文章详情页的小程序码
  9. 产品搜索和搜索历史
  10. 产品按分类浏览 支持最多二级分类
  11. 积分奖励,为小程序加入积分系统,顾客可通过任务赚取积分,积分可以用来兑换现金及积分购产品(付费扩展)
  12. 产品分销,让每一个顾客都成为你的代理商 ,帮你销售产品。支持设置分销层级及每级奖励比例(付费扩展)
  13. 产品拼团,支持设置团购价、成团人数,有效期,支持团长优惠,后台手动成团、解散团,支持在产品详情页中加入其他人的拼团(付费扩展)
  14. 可在后台使用模块装修首页内容,可用模块有公告栏 搜索栏 轮播图 产品列表 商城资讯 图片方块 快捷导航 按钮 优惠券 拼团产品 HTML 弹窗(付费扩展)
  15. 产品按日期、销量、价格、随机排序及按照价格和属性筛选(付费扩展)
  16. 小程序扫码登录网站(付费扩展)
  17. 产品收藏(付费扩展)
  18. WooCommerce一致的收货地址(支持国外地址),导入微信地址,选取位置填充地址,在网站后台保存用户地址(付费扩展)
  19. 基于用户的优惠券,点击或扫码领券,点击使用券,领取限制,我的优惠券(付费扩展)
  20. 支持可变产品,产品多选项选择,支持为每个选项设置价格 支持选项中颜色点和图片的显示,支持在购物车 结算页 订单页显示已选选项
  21. 富文本解析使用自主开发的html2wxml组件 支持嵌入文章、产品、优惠券
  22. 产品详情页支持轮播图 描述 短描述 产品属性和产品评价
  23. 产品详情页下方相关产品的显示(同一分类、同一标签、推荐销售和交叉销售均视为相关产品)
  24. 接入微信收货地址 根据不同地址显示对应可用的配送方式 支持多配送方式选择
  25. 支持多种类型优惠券 过期时间 固定及百分比折扣 免邮优惠券 次数限制 最低限制 产品及产品类别限制 支持使用多张优惠券
  26. 使用优惠券 选择配送方式时实时计算购物车总价
  27. 关于页支持使用WordPress页面进行展示
  28. 订单列表 订单详情的查看 确认收货 取消订单 对未支付的订单重新发起支付
  29. 支持对未付款订单修改价格(运费、手续费、折扣)后再次发起支付
  30. 支持订单备注 及商家给客户的备注
  31. 产品页订单页和我的页客服消息
  32. 我的页显示各个订单状态对应订单数量 及其状态直达
  33. 订单支付 订单发货 商家备注 和评论审核结果的模板消息通知
  34. 快递鸟、KDPT物流接口整合 物流接口支持扩展
  35. 产品库存和销量的显示
  36. 产品评价的显示和提交 支持上传图片 评价回复及官方回复 对订单每个产品进行评价 评价审核 新评价通知
  37. 商城资讯 使用WordPress文章实现 后台可配置指定分类 文章和产品详情中支持互相嵌入跳转 首页最新文章轮播 文章评论
  38. 活动页面 使用WordPress页面实现 可嵌入优惠券及跳转产品
  39. 交叉销售 在购物车下方显示交叉销售的产品
  40. 限时促销倒计时的显示
  41. 产品及文章分享海报生成
  42. 整合微信支付 支持微信跨境支付(跨境支付需要付费二开)
  43. 多支付方式选择 支持银行转账和货到付款 支持支付宝 Paypal Stripe
  44. REST API访问限制

整个开发方向都是以整合 WooCommerce 功能为主,所以一些提升体验的功能和微信方面的功能要稍稍往后放。

功能开发计划

  1. 成组产品的支持
  2. 可下载产品及自动发货
  3. 产品标签
  4. 商家工具,小程序端线下核销,店铺数据,改价发货等
  5. 秒杀功能
  6. 微信卡券

由于 WooCommerce 官方(目前)并没有提供用于购物流程的API(只有用于管理的),我会将开发经验和踩过的坑分享给大家,如果你想开发自己的 WooCommerce 小程序或App,可以关注我后续的系列教程

相关链接

配置教程

微信小程序体验及演示视频

WooCommerce商城后台演示(使用演示小程序扫码登录,仅展示自己提交的订单)

客户案例

立即购买

开源免费版本

联系微信