小程序开源项目推荐:WooCommerce 微信小程序迷你开源版

2019-06-0615:19:35 10 1,555
摘要

明月要再次感谢这些大咖们的“开源”精神,因为有了你们的开源,才能让我们草根博客站长们免费尝试、体验、学习更多前沿技术,其实单就这些开源项目在进行一些融合和二次开发定制后基本就可以满足我们草根站长的大部分需求了。

自从明月借助【守望轩』开源版「WordPress 版微信小程序」项目上线了自己博客的微信小程序【草根博客站长 Live』以来,有相当一部分站长们都表示出了很浓厚的兴趣,为此明月也多次分享相关的经验和心得,其实现在微信小程序开源项目有很多,其中不乏优质的,今天明月就给大家推荐一个借助 WordPress 下著名电商插件 wooCommerce 的微信小程序项目。

小程序开源项目推荐:WooCommerce 微信小程序迷你开源版

WooCommerce 微信小程序是使用开源程序 WordPress 和 WooCommerce 作为后台的商城小程序。(扫描上面的二位码,可以体验一下演示版)

小程序开源项目推荐:WooCommerce 微信小程序迷你开源版

功能列表

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

环境要求

  • PHP 5.4+ 最好 7.0+ (启用 openssl 扩展)
  • WordPress 4.7+
  • WooCommerce 3.0+
  • 伪静态(URL Rewrite)

安装指南

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

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

准备

首先下载小程序及配套插件源码,其中:

woocommerce-to-wechatapp-mini.app.zip 为小程序源码

woocommerce-to-wechatapp-mini.plugin.zip 为配套插件

后台插件配置

  1. 网站后台 - 插件 - 安装插件 - 上传插件 woocommerce-to-wechatapp-mini.plugin.zip 并激活
  2. 登录小程序后台, 设置 - 开发设置,添加你的域名到 request 合法域名、uploadFile 合法域名、downloadFile 合法域名和业务域名中
  3. 同样是小程序后台设置 - 开发设置,找到 AppID 和 AppSecret 并填写到插件常规设置中
  4. 转到网站后台 - WooCommerce - 设置 - 结算/付款 - 微信支付,填写微信支付的商户号、商户支付密钥和支付简要描述,一般在开通微信支付的开户邮件中可以找到,如丢失请登录小程序对应的微信支付的微信支付商户平台进行查询/重置
  5. 转到网站后台 - 设置 - 固定链接,选择除朴素之外任意一个保存
  6. 检查 REST API,浏览器输入网址:https://你的网站/wp-json/w2w/v1/,有类似于 https://wooappdemo.qwqoffice.com/wp-json/w2w/v1/即可
  7. 模板消息。转到插件设置 - 模板消息,点击按钮 一键导入模板 即可
  8. 客服消息。登录小程序后台,转到客服消息,添加客服人员,打开https://mpkf.weixin.qq.com/ 即可回复用户消息。也可使用第三方的客服平台
  9. 首页轮播图。转到 插件设置 - 常规,点击灰色部分即可选择图片下方文本框是点击轮播图时跳转的页面链接,支持小程序内非 tabbar 页面及网站 URL。小程序页面路径从根目录开始。例如:
    /pages/product-detail/product-detail?id=1,跳转到 id 为 1 的产品页
    /pages/product-list/product-list?mode=all,跳转到所有产品页
    具体页面路径和参数可在开发工具中得到,注意页面路径和页面参数之前有一个?,网站 URL 必须为完整的 URL

小程序配置

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

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

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

开始体验!


可以看出,微信小程序开源项目的安装和配置基本上都是大同小异的,如果有过微信小程序开源项目安装、调试经验的话,上手还是非常快的,明月看完“安装指南”后就基本上掌握了,剩下的就是配套服务开通的配合问题了。

小程序开源项目推荐:WooCommerce 微信小程序迷你开源版

明月要再次感谢这些大咖们的“开源”精神,因为有了你们的开源,才能让我们草根博客站长们免费尝试、体验、学习更多前沿技术,其实单就这些开源项目在进行一些融合和二次开发定制后基本就可以满足我们草根站长的大部分需求了。

历史文章推荐:

  • 本博客公众号
  • 扫一扫关注!
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:10   其中:访客  5   博主  5

    • A 隔壁老黄 A 隔壁老黄 0

      评论模版ID是什么?博主

      • www.mayileju.com www.mayileju.com 0

        来了一次又一次,总是情不自已!

        • 弥雅 弥雅 6

          开源万岁,这个的话,估计不少站长会用上!

          • boke112导航 boke112导航 9

            羡慕你们玩小程序的,我就不敢折腾了,太累

            • 小石 小石 4

              开源万岁≧▽≦