基于微信小程序的土特产商城开发

第１８卷（总第１０５期）ＪＯＵＲＮＡＬＯＦ　ＡＮＨＵＩ　ＶＯＣＡＴＩＯＮＡＬ　ＣＯＬＬＥＧＥ　ＯＦ　ＥＬＥＣＴＲＯＮＩＣＳ　＆　ＩＮＦＯＲＭＡＴＩＯＮ　ＴＥＣＨＮＯＬＯＧＹＧｅｎｅｒａｌ　Ｎｏ．１０５　Ｖｏｌ．１８[文章编号] １６７１－８０２Ｘ（２０１９）０６－０００６－０６

基于微信小程序的土特产商城开发郭学超1，2

（1.泉州职业技术大学 商学院 , 福建 泉州 362268；2.电子商务福建省高校应用技术工程中心, 福建 泉州 362268）

摘 要：近年来，随着微信小程序的开放和社交电商的兴起，为土特产行业发展移动互联网营销开辟了新路径。借助于微信支付与微信通知等微信小程序开放API接口，再加上微信庞大的用户数量，商家可以利用微信小程序来打造自己的商城店铺。根据业务的实际情况进行需求分析，设计了一个能够在微信小程序上进行商品浏览，将商品添加到购物车，下订单、支付等实现完整购物流程的一个网上土特产商城的应用小程序。

关键词：微信；微信小程序；土特产；商城

中图分类号：TP393 文献标识码：A

Development of Local Product Mall Based on Wechat AppletGuo Xuechao1，2（1. Quanzhou Vocational and Technical University, Business School, Quanzhou, 362268, China;2. Electronic Commerce Fujian University Applied Technology Engineering Center, Quzhou 362268, China）Abstract: In recent years, with the opening of Wechat applet and the rise of social e-commerce, a new path has been opened up for the development of mobile internet marketing in local specialty industries. With the help of Wechat payment, Wechat notification and other Wechat small programs to open API interface, and the large number of Wechat users, businesses can use Wechat small programs to build their own mall stores. According to the actual situation of business demand analysis, an online local specialty mall application is designed, which can browse the goods on the Wechat applet, add the goods to the shopping cart, place the order, pay and realize the complete shopping process.Key words: Wechat; Wechat applet; local specialty; mall一、背景介绍近年来，国家多次在文件中提到，要大力发展农产品电商，振兴农村经济。随着现代人生活节奏加快，食品安全意识的提高，越来越多人都＊收稿日期：２０１９－１０－１７　　　　作者简介：　郭学超（　１９８４－），男，福建福州人，讲师，硕士，研究方向：信息技术在电子商务的应用。　　　　基金项目：２０１８年福建省中青年教师教育科研项目（职业院校专项）　“基于微信小程序的商城应用开发研究”（ＪＺ１８０９７８）。６XUEBAO2019.12.20技术应用郭学超——基于微信小程序的土特产商城开发第６期向往到农村生活，品尝各地特色、绿色健康的土特产商品。但是受时间、地域的种种限制，人们购买外地优质的土特产很难，除非去旅游顺便带点商品，但是这样很难满足需求。随着移动互联网＋技术和物流行业的蓬勃发展，在消费者和商家之间建立了无缝连接渠道，使得异地产品共享变成现实，消费者足不出户就能够轻松的购买到异地土特产商品。据中国互联网信息中心统计第４４次统计报告显示，２０１９年６月我国网民规模达到８．５４亿，其中手机网民的规模就有８．４７亿，占比９９．１８％。由此可见移动电子商务的市场规模是非常庞大的。土特产微信商城小程序开发为农产品电商的未来发展开启了更广阔的道路。在缓解行业激烈竞争形势的同时，也促进土特产行业的信息化发展和转型升级，提高了企业的竞争力。微信小程序商城可以调用微信支付、二维码扫描、微信会员卡等功能，同时通过微信庞大的用户群体，商户可以接触到更多的消费者。商家通过微信小程序的组件可以直接和消费者进行沟通，通过微信会员卡可以更好留住客户并且进行各种丰富的促销活动。通过微信支付可以让客户下单更加便捷，微信小程序一系列的开放组件为消费者了提供更好的购物体验。

二、关键技术介绍

微信小程序以“无需下载，即开即用”的特点，在移动用户中十分流行。微信小程序除了具备ＡＰＰ的功能之外，它还有自己独特的优点：第一：小程序的获取范围非常广泛，用“触手可及”一词形容也不为过，最常用的获取途径就是通过微信搜索功能或者微信扫码。第二：即用即走：小程序的背景是微信社交Ａｐｐ，所以在使用微信小程序之前无需登入或注册，只要点击授权就可直接使用。第三：无需下载：微信小程序最让大众喜爱的一个优点就是使用小程序是一款不用耗费大量的流量和内存去下载轻型应用程序。

（一）微信小程序开发组件

微信官方为微信小程序提供了一套完整的开发组件，主要有三部分：一是逻辑层，微信开放

了一系列ＡＰＩ，比如有网络方面的ＡＰＩ，微信支付ＡＰＩ，微信身份认证ＡＰＩ等等。通过这些ＡＰＩ可以大大提供开发者的开发效率。二是视图层，不同于传统的ＨＴＭＬ，ＣＳＳ，ｊａｖａｓｃｒｉｐｔ网页前端开发三剑客，微信官方写了一套类似的语言分别是ＷＸＭＬ，ＷＸＳ，ＷＸＳＳ。这三套开发语言相比于传统的ＨＴＭＬ，ＣＳＳ，ｊａｖａｓｃｒｉｐｔ做了更多的限制，没有传统网页开发那么灵活。三是微信官方提供了开发小程序的ＩＤＥ环境。该开发工具能为开发者提供网络性能测试，为不同手机型号类型兼容测试，代码调试，代码上传等开发者常用的功能，有利于提高开发者的开发效率。

（二）开发技术

土特产商城小程序开发主要使用ＰＨＰ语言，利用ＭｙＳＱＬ数据库进行数据的存储，基于流行的ＴｈｉｎｋＰＨＰ框架，最后部署在云服务器上。系统采用ＭＶＣ　三层架构，将原本与ＨＴＭＬ代码混杂在一起ＰＨＰ代码逻辑分离，将业务逻辑与数据库操作分离。整个项目分为小程序前端和后台控制端。项目的前端表现形式为微信小程序，这是商城的消费端，采用ｊｓ＋　ｗｘｍｌ＋ｃｓｓ技术，主要利用微信的一整套服务接口ＡＰＩ，如微信开放的身份验证令牌，微信支付和微信通知接口以及各种开放接口和组件进行开发。项目的后端是商家管理台，使用传统的ＰＨＰ网页开发技术，采用不同于Ｂ／Ｓ结构（浏览器和服务器结构）的ＲＥＳＴｆｕｌ　ＡＰＩ的架构，主要负责商户对微信小程序前端进行管理。因各种终端设备层出不穷，例如手机、平板、桌面电脑等等。为了能在各种设备进行统一的数据调用，必须有一种统一的机制，方便不同设备的前端界面与后端进行通信。这是ＡＰＩ构架流行的主要原因。三、系统业务及流程分析特产商城小程序购物系统业务流程图如图１所示。用户首先要用微信账号登入微信，然后通过搜索或者扫码进入小程序，进入后需要对本系统进行授权登录，没授权的只能进行简单的商品浏览和查询，而授权之后才能正常的进行购物。商家要进入系统后台之前必须用管理员账号和密2019.12.20XUEBAO７技术应用郭学超——基于微信小程序的土特产商城开发第６期码进行验证，通过之后才能进入本系统的后台管理界面，商家可根据实际需要对商品信息进行处理，例如设置土特产商品的名称、价格、图片、

商品详情等，还有上下架处理。对用户所下的订单进行配货，发货处理。商城开发重点在于购物车，订单处理，支付等方面。

图1业务流程图四、系统设计（一）系统架构设计本系统分为两部分，其中一部分为土特产商城的小程序端部分，这一部分主要是为消费者下单购物所服务的。第二部分为商户控制台，这一部分是为商家提供后台商城所服务的。在本项目中的微信小程序部分的整体开发设计与传统的网页开发类似，微信团队开发了与传统网页开发相应的ＷＸＳＳ，ＷＸＨＬ，ＷＸＳ。其中ＷＸＳＳ对应ＣＳＳ，同属于网页开发中的层叠样式表。ＷＸＭＬ对应ＨＴＭＬ，同属于网页开发中的超文本标记语言。ＷＸＳ对应ＪａｖａＳｃｒｉｐｔ，同属于动态脚本语言。但与传统的网页开发不同的是，微信小程序是使用ＡＰＩ进行数据调用的。无论是调用土特产８XUEBAO商城后台数据，还是调用微信本身开放出来的数据，都是基于ＡＰＩ。而在第二部分商户控制台部分，是完全基于Ｂ／Ｓ结构。商家能在浏览器上通过商户控制台中完成对土特产商城的信息维护。（二）数据库设计在本系统数据库的设计中，主要考虑到了以下几部分，一、数据库设计要满足本项目中的功能需要。二、满足数据库设计的三大范式，这既能保证本项目的数据库运行效率，又能在后续的项目开发中进行更优雅的代码实现。三、为项目的将来的升级扩展做准备，数据库的设计不能仅仅为了满足现有的功能实现。在当下的互联网时代，Ｗｅｂ项目的升级换代节奏越来越快，一个好的数据库设计需要能满足于将来的项目更新升级需求。2019.12.20技术应用郭学超——基于微信小程序的土特产商城开发表。主要包含如表１所示：

第６期根据土特产商城的实际需求，以及考虑到将来项目的可扩展性，在本项目中一共设计了１３张

表1 土特产商城数据库主要包含的表

（三）系统功能模块

　根据系统的功能需求分析，将系统划分小程序前台客户端和小程序后台控制端两大模块，其中前台客户端为六大功能模块，每个模块又分为若干个子功能，如图２所示。后台控制端分为５个模块，每个模块又分为若干个子功能，如图３所示。图2 土特产商城前台功能图图3 土特产商城后台功能图2019.12.20XUEBAO９技术应用郭学超——基于微信小程序的土特产商城开发第６期五、系统的实现（一）前台客户端

根据前面的系统功能模块设计，完成代码编写和调试。前台客户是微信小程序商城端，这一部分是消费者的购物端，用户可以在微信小程序上完成商品的搜索，浏览，加入购物车，下单支付，查看订单的所有操作。

１．土特产商城小程序主界面

微信小程序土特产商城主界面如图４所示。用户通过微信小程序打开土特产商城时首先会加载商城主界面。商城主界面主要由轮播广告位，商品分类，特色推荐等内容。

图4 微信小程序土特产商城主界面 ２．微信小程序土特产商城分类界面当商家的商品数量多到一定程度时，为了让商家更好的管理商品，同时也为了能让消费者更好的寻找到自己需要的商品，土特产商城主要是根据产品的出产地进行分类展示。顾客可以通过点击各个省份分类按钮，切换到自己需要的商品界面。　１０XUEBAO2019.12.20３．微信小程序土特产商城购物车界面购物车，顾客能将自己需要的商品添加到购物车中，然后统一下单付款。购物车是本项目中开发的重点和难点。在当顾客退出微信小程序，购物车的商品不会因此清空，项目中使用缓存技术。项目中因为该土特产商城属于轻量级项目，同时为了减少服务器的资源开销和带宽压力并减少网络延迟，采用的是客户端缓存解决方案。

４．微信小程序土特产商城个人中心及订单生成界面

用户在购物车进行下单后，会进入订单生成页面。订单生成页面在取得用户的授权后，能调用顾客在微信的地址信息，最后用户只需要确认地址信息和购买商品信息无误，就能通在该页面进行商品下单。

顾客可以通过土特产商城个人中心界面来查看自己订单信息，管理自己个人地址信息。在个人中心界面中需要请求用户的个人信息授权。这功能需要调用微信开放ＡＰＩ。需要将微信开发者的个人开发ｉｄ和开发密钥ｓｅｃｒｅｔ，传入到微信开放的ＡＰＩ进行数据调用。

（二）土特产商城后台管理功能实现项目后台采用Ｂ／Ｓ结构实现，后台数据处理服务放在服务器上，商户在后台控制台上的操作在浏览器上的页面完成。商户后台管理是以商家为中心进行开发的。在这一部分中主要实现了以下五大功能。　

１．商品管理功能

商品管理功能主要是实现商家对商品信息维护的功能，商家可以通过商品管理实现对商品的

添加、删除、价格信息修改，商品介绍修改等功能。

２．商户分类管理功能

商品是按照产出地来进行分类的。商品分类可以将商品更直观的呈现给用户。商品分类管理功能可以实现商家对商品管理的需求。商家可以在后台进行商品分类管理，进行商品分类的添加、删除更新等操作。

３．专题管理界面

技术应用郭学超——基于微信小程序的土特产商城开发第６期商品专题功能，商家结合旅游购物节以及土特产文化展等形式将，将特色土特产做活动专题进行营销。在后台商品专题管理中，可以将商品添加到专题，更新商品专题的图片、描述等相关信息。

４．特别推荐管理功能

特别推荐管理功可以对微信小程序的首页商品推荐进行管理。在商户控制台中，可以对商品推荐图片进行更新操作，更改特别推荐的商品等。

　　５．订单管理功能

订单管理功能主要是帮助商家查看用户的订单详情，可以进行订单发货处理，查看物流基本信息等。

六、系统部署

系统属于一个Ｗｅｂ项目，需要将项目发布到互联网上。系统部署包括以下几个步骤：第一步部署前系统环境准备，项目使用的是阿里云的Ｌｉｎｕｘ服务器，我们需要将域名地址解析到Ｌｉｎｕｘ服务器下，并配置ＰＨＰ，ＭｙＳＱＬ，Ｎｇｉｎｘ环境。第二步项目代码上传，使用ＦｉｌｅＺｉｌｌａ　ＦＴＰ客户端将代码上传到服务器，并添加到Ｎｇｉｎｘ目录下。第三步为项目添加ＳＳＬ证书。在本项目中使用的ＳＳＬ证书是Ｌｅｔ’ｓ　Ｅｎｃｒｙｐｔ免费的解决方案。在服务器上运行Ｌｅｔ’ｓ　Ｅｎｃｒｙｐｔ官网提供的脚本，根据提示输入相应的信息就可以了。最后一步只需要通过微信团队专门为微信小程序开发ＩＤＥ将代码上传到微信服务器，并到微信小程序开发者后台配置进行域名配置，通过这一步就能上线一个体验版的微信小程序了。

七、结语

随着移动互联网＋技术和物流行业的蓬勃发展，在消费者和商家之间建立了无缝连接渠道，使得异地产品共享变成现实，消费者足不出户就能够轻松的购买到异地土特产商品。本文主要叙述了基于ＰＨＰ的微信小程序土特产商城开发中的流程和关键技术。该土特产商城后端以ＰＨＰ语言

编写，采用ＭＶＣ和ＲＥＳＴｆｕｋ　ＡＰＩ　编程思想，采用ＭｙＳＱＬ作为后台数据库，Ｎｇｉｎｘ作为网络服务器，使用微信小程序作为用户使用界面，最终的项目运行在阿里云服务器下的Ｌｉｎｕｘ系统上。为商家提供了一个在微信上操作体验良好的微信小程序土特产商城，同时也为农产品电商未来发展开启了更广阔的道路。

参考文献：

［１］　刘红卫．　微信小程序应用探析　［Ｊ］．　无线互联科技，　２０１６　，　（２３）　：　１１－１２　，　４０．

［２］黄有志．移动互联网时代下的微信商城创新模式分析［Ｊ］．　２０１６　，　（１６）　：　１４５－１４６．

［３］张宇．移动互联网时代下的微信营销研究［Ｊ］．现代商贸工业，　２０１７　，　３８　（１７）　：　６５－６６．

［４］张韫．“互联网＋”时代传统企业和Ｏ２Ｏ融合战略研究［Ｊ］．商业经济研究，　２０１６　，　（６）　：　９８－１００．［５］朱永滔．大数据技术在电子商务中的应用［Ｊ］．电脑知识与技术，　２０１７　，　１３　（８）　：　２８０．［６］顾春来．ＡＰＰ应用程序开发模式探究［Ｊ］．２０１８，（５）：３５－３６．［７］郑歆．移动互联网时代微信营销策略研究［Ｊ］．现代营销：学苑版，　２０１７　，　（４）　：　５８－５９．［８］微信公众平台开发者文档［ＥＢ／ＯＬ］．ｈｔｔｐｓ：／／ｍｐ．ｗｅｉｘｉｎ．ｑｑ．ｃｏｍ／ｗｉｋｉ／ｈｏｍｅ／，　２０１６．［９］邢榕珊，匡芳君．微信小程序设计［Ｊ］．计算机时代：２０１８　，　（８）　：　９－１２．［１０］田志友，周元敏，田雨．微信小程序的媒体价值［Ｊ］．新媒体研究，　２０１８　，　４　（１）　：　４７－４９．［１１］　徐春绵．ＰＨＰ在动态网站开发中的应用研究［Ｊ］．通讯世界，　２０１５　，　（９）　：　２６１－２６２．［１２］　程子珍．　基于微信小程序的网上购物系统的设计与实现［Ｄ］．　北京：首都经济贸易大学，　２０１８　：　１１－１７．［１３］　刘琦，　丁萍莉．　基于微信小程序的互联网＋教育学习平台的研究与设计［Ｊ］．　内江科技，　２０１６　，　（１２）　：　１５－１８．（责任编辑：黄凤娟）2019.12.20XUEBAO１１