微信小程序作为移动互联网领域的一个新型应用形态,具有在微信生态链内在线下业务中分账、数据互通、双向分享,同时提供轻量级且快速开发模式,具有跨平台、跨终端、随时使用的特点,越来越受到企业和开发者的关注和青睐。本文将介绍一个开源的微信小程序开发平台——hishop,深入介绍其原理以及如何进行开发。
一、hishop的基本介绍
hishop是一款免费开源商城类微信小程序,通过hishop,可以快速搭建完整的微信小程序商城应用。hishop采用类似于前后端分离的架构,同时使用了模板继承的思想,将页面和API分离,将数据交互放在API服务端,模板和样式放在微信小程序侧。这样使得页面更加简洁,适合重复页面和交互的封装,且易于维护升级。
二、hishop的原理
1.架构
hishop的架构如下图所示,其主要由微信小程序客户端和API客户端两部分组成。
微信小程序客户端:负责展示页面,处理用户的操作反馈,接受API客户端返回的数据并更新页面。
API客户端:基于Node.js的Koa2框架,负责处理所有微信小程序接口调用,包括微信登录、支付、订单等。同时,将小程序操作对应到数据库,并将处理后的结果返回给小程序端。
2.数据交互
hishop通过API实现了前后端分离式的开发,将前端静态数据和后端动态数据分离开来。在微信小程序客户端中,我们可以直接调用API的接口进行数据的交互,并且通过API端可以进行更为灵活的逻辑处理。
3.功能实现
在hishop中,基本功能有店铺管理、商品管理、订单管理、支付、物流查询、用户管理等。我们将通过商品分享和微信支付为例,介绍hishop扩展功能的实现。
商品分享:在hishop中,我们可以通过自己的小程序分享商品,当好友点击分享的商品后,可以跳转到该商品的详情页,进而加入购物车、支付等。
微信支付:在hishop中,用户完成收货地址填写和确认收货后,将进入支付环节,用户可以通过微信支付完成相关订单支付。hishop通过微信支付的商户模式完成支付,同时支持查询订单和退款。
三、hishop的开发
除了基本功能的实现,hishop还具有方便扩展、可持续开发的特点。hishop的开发将涉及到以下几个方面:
1.目录结构
hishop的目录结构如下所示:
hishop
├── app.js
├── bin
│ └── www
├── config
│ ├── config.default.js
│ ├── config.dev.js
│ └── config.prod.js
├── controllers
│ ├── default
│ ├── order
│ ├── product
│ ├── shop
│ └── user
├── package-lock.json
├── package.json
├── utils
│ ├── cate.json
│ ├── tools.js
│ └── wxpay.js
├── weapp
│ ├── api
│ ├── assets
│ ├── coms
│ ├── lib
│ ├── pages
│ ├── README.md
│ └── style
├── env.js
├── LICENSE
├── package-lock.json
├── README.md
└── server.js
其中,weapp是微信小程序客户端相关代码,controllers是API端相关代码,utils包含与开发相关的工具类文件、json文件等。
2.引入模板
在hishop中,我们引用了wepy和vant的组件库,这些组件可以很大程度上加强开发效率,将我们的开发时间减小。
3.扩展功能
hishop通过开发扩展功能模块实现了更为灵活的商品分享和微信支付,提高了用户体验,同时其支持持续开发的特点,使得程序可以更加的灵活,比如后台管理等。我们可以通过hishop提供的接口进行自己的扩展开发,完成小程序应用的定制化。
四、总结
hishop是一款兼具实用性和可扩展性的微信小程序开发框架。本文通过对hishop的介绍以及开发方式的详解,希望能够帮助读者更好地了解微信小程序开发的基本原理,并且可以使用hishop快速搭建商城型应用程序。