基于智能定位的微信小程序点餐系统的设计与实现|江阴雨辰互联

2023年7月2日发(作者：)

基于智能定位的微信小程序点餐系统的设计与实现

Design and Implementation of WeChat Mini Program

Ordering System Based on Intelligent Positioning

摘要

随着5G网络的发展，当前移动互联网已经渗透到人们生活的方方面面。为了解决人民群总在高峰时期用餐的不便，设计了基于智能定位的微信小程序点餐系统。在微信开发者工具环境下进行了一系列的开发过程。完成了系统整体架构以及各功能模块的设计与实现，并对此进行了功能测试。结果表明该系统能够解决人们等待用餐浪费时间的问题，具备根据自身位置智能推送附近的餐馆，并且用最便捷，最简单易用的方式，满足用户最核心的需求。

关键词：智能定位；微信小程序；点餐系统

Abstract

With the development of 5G networks, the current mobile Internet has

penetrated into all aspects of people's lives. In order to solve the

inconvenience of people's meals during peak hours, a WeChat mini-program

ordering system based on intelligent positioning was designed. A series of

development processes were carried out under the WeChat developer tool

environment. Completed the system's overall architecture and the design and

implementation of each functional module, and conducted functional tests on

this. The results show that the system can solve the problem of people

wasting time waiting for meals, has the ability to intelligently push nearby

restaurants according to their location, and meets the core needs of users in

the most convenient and simple way.

Key words： Smart Positioning；WeChat Mini Program；Ordering System 目录

第一章绪论 ............................................................................................. 1

1.1 系统开发背景目的及意义 ................................................................... 1

1.2 论文主要研究内容 ...................... 错误!未定义书签。

第二章系统相关技术介绍 ............................................ 错误!未定义书签。

2.1 开发语言 ................................................................ 错误!未定义书签。

2.2 系统整体架构 ........................................................ 错误!未定义书签。

第三章系统功能介绍 ............................................................................. 6

3.1 需求分析 ............................................................................................... 6

3.2 系统操作流程 ....................................................................................... 6

3.3 系统特色 ............................................................................................... 8

第四章系统各功能模块设计 ................................................................ 10

4.1 功能模块设计 ..................................................................................... 10

4.2 数据库设计 ......................................................................................... 10

第五章系统功能实现 ........................................................................... 14

5.1 手机号绑定模块详细实现 ................................................................. 14

5.2 定位模块详细实现 ............................................................................. 14

5.3 商家页面模块详细实现 ..................................................................... 14

第六章系统功能测试 ........................................................................... 24

第七章总结与展望 ............................................................................... 24

7.1总结 ......................................................................... 错误!未定义书签。

7.2 展望 ........................................................................ 错误!未定义书签。

参考文献 .................................................................................................................................. 26

致谢 .................................................................................................................................................. 27

广东东软学院本科生毕业设计（论文）

第一章绪论

1.1 系统开发背景目的及意义

随着现代全球互联网信息化与通信技术的日益发展，手机成为了现代人们生活中最必不可少的工具之一，而微信的出现又再次冲击了人们传统使用手机打电话发短信的使用方式错误!未找到引用源。。目前，微信小程序越来越走进人们的生活当中，小程序以它的轻量化免下载的独特优势俘获了大批用户，用麻雀虽小但却五脏俱全来形容它最为合适不过，它有自己独特的特性，它不同于其他的应用需要到特定的软件中心或者官网首页去下载安装应用，而它是依附于微信这个主体下面的属于微信下面的附属功能，但是如果单拎出来看它又是一个格局很大的软件应用中心，任何用户大到企业小到个人商户都可以开发属于自己的专属的小程序应用，它可以是任何类型的软件满足不同行业的个性化定制，并且用户粘性非常高，而且小程序本身的种类也是涉及多种多样全方面各行业，应用极广具有很大发展潜力错误!未找到引用源。。

根据腾讯公布2019年第四季度及全年财报显示，微信及WeChat的合并月活跃用户数达11.65亿，同比增长6.1%，而QQ用户则同比下降7.5%，同时小程序的日均交易笔数同比增长超过一倍，交易总额超过8000亿元错误!未找到引用源。。由此可见微信用户基数的庞大，QQ作为腾讯旗下最重要的产品其市场也逐渐的被自己的新起之秀微信所吞并市场，正因有着如此庞大的用户群体微信小程序的前景与发展空间更是无可限量，从其巨额的交易总额我们就可以看出。

小程序发布至今，可以说在我们国内小程序已经渗透到了我们生活中的方方面面，大到企业，小到个体商户都去选择开发一款属于自己的小程序来抢占市场，小程序的种类也是千变万化，越来越多的传统app也都开发了自己的小程序版本，有的人可能会想他们不是原本已经有自己的传统的手机应用了吗为什么还要再去费劲在微信里面开发小程序版本呢错误!未找到引用源。。

这里我总结出了三点开发小程序的目的与意义。

（1）商家企业看中了微信的用户量，根据微信官方公布的数据显示2018年微信活跃用户规模达8.29亿，占整体网民比例达到95%，2019年用户量持续增长到了11.5亿月活跃账户数，这是一个很庞大的数字微信对于我们来说可以算是一个国民级别的应用，而这些对商家来说都是源源不断的机会，因此谁也不会放弃这么一块大的肥猪肉；

1 广东东软学院本科生毕业设计（论文）

（2）微信小程序自身的优点无需下载点开即用，商家除了看中微信庞大的客户量以外，更重要的是看中微信小程序自己本身的前景，微信小程序给普通用户最直观的感受就是轻便，免安装，简洁，小程序的小是核心，不同于以往传统手机app应用，需要先到手机应用中心搜索出自己想要的app然后下载再安装，整个过程来说繁琐且复杂对于有些老年人并不友好，而小程序则不一样，只需要在微信界面下拉就可以看见顶部又一最近使用的小程序常驻在顶部，点击更多进入类似于手机应用商城的小程序列表，里面可以直接搜索你想要的小程序或者显示附近的小程序和我的小程序，小程序也分为两种一种就是传统厂商app的小程序版第二种就是个体小企业商家自行开发的小程序，传统app移植的都有个特点就是功能很全面几乎和普通的app功能一致体验起来是一样的，第二种就是小企业小商家自行开发的功能针对性较强，这种更加体现出了小程序的“微，小，轻”的特点[5]。

（3）商业策略，有巨大的用户作为支持，社交利器，对于传播更加有利，轻便免安装几乎不占没存可以快速开关，便于场景的连接，实现了线下线上相结合的经营模式，客人既可以在线下门店扫码点餐购物也可以线上购物订餐，这将扩大客人消费场景通过微信小程序码为入口，线下扫码，微信搜索，公众号推送，好友推荐，历史记录和附近门店等各种渠道进入小程序。

1.2 论文主要研究内容

目前微信小程序越来越走进人们的生活当中，小程序以它的轻量化免下载的独特优势俘获了大批用户，并且用户粘性非常高，而且小程序本身的种类也是涉及多种多样全方面各行业，微信小程序的用户定位用户群体涉及普罗大众，应用极广具有很大发展潜力错误!未找到引用源。。因为本次项目准备开发的是校园外卖点单小程序因为这此开发的需求几乎就很明确了，根据KANO模型定义了三个层次的顾客需求————基本需求，期望需求和兴奋需求。第一点基本需求对于本次项目来说很明确就是需要点餐，第二期望需求，简单来说就是用户与产品的的互动，如果想要实现这块需要做大批问卷调查，调查用户对于这块软件需要的期望功能，再加以实现。

此次选择了基于智能定位的微信小程序点餐系统就是因为近年来移动互联网的兴盛以及看中了微信独一无二的优点庞大的用户量；丰富的组件和API；应用场景丰富；增加获取用户的渠道同一主体的小程序的公众号可以相互关联，相互跳转；更短的开发周期，开发成本也仅为APP的三分之一；免费引流，微信小程序还会自动显示五公里内的所有场景小程序，方便被周围的用户找到并使用，可以大大增加商家的曝光度，免费获取用户。形成双赢局面同时获得商家和用户的青睐错误!未找到引用源。。

本次课题目的在于对微信小程序开发实战，对于之前有web前端开发经验来说， 2 广东东软学院本科生毕业设计（论文）

小程序的开发相比于web网页开发既有相似之处也有不同的地方，与传统web不同，小程序框架提供了自己的视图层描述语言，并在视图层与逻辑层之间提供了数据传输和事件系统。在传统web里面结构目录为HTML微信小程序则为WXML，样式CSS则改为WXSS，；逻辑则都为Javascript，传统web没有配置目录而微信小程序则多出一项为json文件，由此可以看出传统web是三层结构，而本次开发的小程序为四层结构，多出一层配置json。在所用的语言方面微信小程序有着自己的一套标准，但是其内核还是我们经常所使用的前端的三大件HTML，CSS和JavaScript差不多，万变不离其宗。

首先我们看HTML与WXML的差异，可以说HTML更偏向于电脑网页的布局更加适用于文章的展示，而WXML更倾向于Android开发，WXML与Android开发界面中的XML描述文件更加相像，偏向于程序界面的构建。而WXSS与CSS的话两者几乎就是没有区别两者可以直接混用。在JS文件上面微信小程序有它专门独特的小程序API接口具体详情在微信小程序官方文档里面都有列出来，其余的在开发的时候使用几乎没有太大的区别。这么看起来开发微信小程序好像跟开发web网页通用大部分知识，实则并非如此，微信小程序的开发更加的要求程序员具备要开发出一完整应用的意识，而不是跟开web网页那样只需要照顾到网页页面的结构构建。

后端方面将会使用Java编写后端api，主要使用了SpringBoot框架开发工具用到eclipse，使用SpringBooot的优点就是不再需要开发者去定义样板化的配置，它并不是什么新的框架而是它默认配置了很多框架的使用方式同时整合了所有的框架在里面。用到这个无非就是因为它方便简单好用，可以让我们不用担心框架之间的兼容性问题，适用版本等各种突发状况，只要想使用任何东西，只要添加一个配置就可以实现，因此非常适合用来构建微服务。数据库的话采用的就是MYSQL作为后台数据库。而本论文的重点就是智能定位，经过查阅微信小程序官方文档发现，API的返回值又经度和纬度所以我们就需要用到的就是ation()这可以使我们获得经纬度逆地址解析出地址的信息，也就是我们还需要通过经纬度找到为相对应的地图然后才能转化出所在地的地名错误!未找到引用源。。这里我们还需要去到腾讯地图开放平台注册，注册完以后进入WebServiceAPI就可以看到逆地址解析，接着就可以直接使用腾讯给我们开放的接口直接用GET请求获取地址的详细信息。

3 广东东软学院本科生毕业设计（论文）

第二章系统相关技术介绍

2.1 开发语言

本次项目开发的是微信小程序，因此需要用到的技术有前端三大件，也就是HTML语言，CSS，JavaScript，而在我们微信小程序里面WXML就是小程序的HTML语言，它是仅用于微信小程序开发工具里面的用来构建出页面结构用的。而WXSS对应的则是CSS层叠样式表，它是用来描述WXML组件样式，决定组件如何显示的。JavaScript则是动态脚本语言，可以用来对页面特定元素进行操作实现一定得功能与效果，并且由于的开发也可以用于后台服务器端。还需要用到的是服务器语言做后台的开发，以及数据库语言用到的数据库是MySQL。

除此之外还需要掌握小程序基础组件的使用已经各种各样的特色API接口，小程序开发框架提供了非常丰富的原生API可以供开发者获取用的信息，支付，获取地址这些都需要掌握。

2.2 系统整体架构

本系统的运行架构运行如下，首先微信小程序因为其不同于其他语言不能直接连接操作你后台的数据库，它是必须要有服务端才行，也就是我们只能用微信的t对http发起网络请求访问，我们需要安装php编写MYSQL数据库，购买腾讯云的服务器，如果是我们以学习为目的的话就不用去备案域名，可以直接在微信小程序开发者工具勾选中不检验合法域名，web-view（业务域名），TLS版本以及HTTPS证书这一选项即可。

在这里我们这里先说明一下小程序自身的框架，这将会对对我们理解本系统的架构有所帮助，这个框架是微信小程序官方团队提供的MINA框架，MINA框架分为两部分一是View视图层二是App Service逻辑层，view视图层可以不单单是唯一的它也可以是多个的，而App Service逻辑层只能有一个，逻辑层是用来处理逻辑，接口的调用以及数据请求，视图层跟逻辑层分别在两个线程里运行。View视图层用的是WebView渲染，而App Service逻辑层用的是JSCore跑的。View视图层和App

Service逻辑层之间的关系就是通过系统层的JSBridage进行通信，App Service逻辑层把数据传给View视图层，当用户点击视图层做出变动时，View视图层再把触 4 广东东软学院本科生毕业设计（论文）

发的变化传送给App Service逻辑层进行消化处理。框架的核心就是有一个响应式的数据绑定系统，意思就是当开发者在App Service逻辑层做出变化时View视图层就会做出相应的变化与逻辑层保持一致错误!未找到引用源。。

图2-1 框架图

5 广东东软学院本科生毕业设计（论文）

第三章系统功能介绍

3.1 需求分析

首先在我们要介绍系统功能之前我们要先做一个用户的需求分析，我个人对于需求分析的理解就是在我们开发者去开发一个应用必须得是要去给到用户真实去长期使用的一个应用，这就需要我们去摸清楚用户的想法，要去了解用户想要的是什么，让开发者自己代入到用户的身份去思考摸索揭露用户的真实需求而不是单单就开发出能用级别的应用而是要考虑去做到好用易用，这里我们再结合微信小程序自身的特点就是虽然它麻雀虽小但是其五脏俱全，它可以是任何类型的，它是小型的，轻便的，但是又是功能齐全的一个存在。在功能实用性上我们需要考虑它能去帮我们实现一个怎么样的功能，提供一个怎么样的服务，就必须得好用还得考虑功能可行性的问题，在保留必要的功能的前提下去除传统app上所冗余的不必要的功能，其次就是另外一点非刚需就是在实现必要的功能以后要去做一个怎么样的简洁美观的界面，这是给用户的第一感觉这与功能性需求同样重要而且其工作量以及实现的难度也不比它小。

这里我们必须要明白开发智能定位点餐小程序的目的，制作线上餐饮店就是为了商家可以更加自由个性化的扩宽自己的业务，可以获得更大的客流量，同样在服务商家的同时也使用户用餐变得更加便利，扫码点单，定时送外卖，定位周边有什么店，门店买单，在众多店家中收藏自己喜爱的，以便下次可以快速点单等等。经过对系统的需求分析需要实现的就是系统界面简洁易用，操作简单，完全采用空间式的格局，让菜单，讯息等数据的录入工作更简洁。微信小程序的架构与其他语言的略有不同，它不可以直接操作数据库，后台只能发送request请求，将请求与本地服务器的JavaScript脚本进行交换，再经过JavaScript脚本来操作数据库，pc端再将数据返回显示在页面上。

3.2 系统操作流程

首先小程序通过tabbar分为三大主页，首页，订单，我的。用户进入小程序以后就是通过腾讯地图api接口获取用户的定位，然后会推送附近的商家给用户，用 6 广东东软学院本科生毕业设计（论文）

户点击进入商家后会顶部显示出商家的店铺名称详细的店铺资料，店铺的评分月销的数量以及配送所需要的时间还有店家发布的公告，再往下走中部就是分为三个部分菜品界面包括菜品的介绍，价格等各方面的信息，评论界面顾客购买以后对菜品所给出的评价以及商家详细信息介绍页面。底部则是显示购物车，通过购物车顾客可以一次性选购多个菜品随时可以查看已点的放在购物车菜品，如果顾客不小心点错或者不满意也可以即时对商品增加或删除为广大顾客提供便利。当用户点单完成后就跳转至付款页面，付款成功后再次跳转到支付成功页面，该页面可以点击返回商家也可以点击查看订单。

图3-1 用户操作流程图

后台餐馆可以实现对菜品的管理，添加菜品，店家可以往店铺列表中添加新菜品，编写菜品名菜品介绍菜品图片以及数量；删除菜品，店家可以在后台删除掉以及卖完缺货或者今天不供应的菜品；更改菜品信息，店家可以更改菜名，菜的介绍以及更换图片。订单页面则会显示用户的历史订单，订单会显示店名订单金额以及订单菜品的名称以及数量。最后是我的页面，我的页面是用户可以管理自己个人信息地址的页面，界面有我的评价功能，管理收货地址功能可以定位现在用户所在的位置，同时也可以手动添加收货地址，同时还有小程序的帮助与反馈选项给用户反馈使用感受。

7 广东东软学院本科生毕业设计（论文）

图3-2 商家操作流程图

3.3 系统特色

本系统的特色就是基于智能定位的一个微信点餐小程序，其独特的优点就是不同于其他普通扫码点单，它可以先询问用户是否可以获取当前位置接着给用户推荐出用户所在地附近的商家，这样可以方便用户即使足不出户也可以在家享用周围附近店家所提供的美食，现在外卖点餐已经成为当代青年一种全新的生活方式给在都市快节奏工作学习生活的人们带来一丝便捷。

获取用户定位的流程是，首先要拿到用户的授权，这里我们翻查微信小程序官方给出的官方文档我们会发现ation这个api接口在调用前必须要先得到用户的授权，所以在获取用户定位之前我们在这里会先有一个弹窗跳出来提醒询问用户需要获取您的地理位置请确认授权，如果用户点击确定那么在json文件中的success函数就会返回用户所在地的数据，如果拒绝则fail返回获取地理位置失败系统则无法提供推荐附近商家给用户使用。如果用户点击授权那么接着要用到微信的接口获取当前用户所在的位置信息，微信端返回收到的是经度纬度速度等等参数，微信获取到位置以后并没有直接显示出当前的地面，这就需要我们借助腾讯自家的 8 广东东软学院本科生毕业设计（论文）

工具，腾讯位置服务中有关于微信小程序的地理位置转变JS SDK的API接口，用这个可以返回之前获取的包括国家，省，市，区，纬度等地理位置信息。这里我们需要用到的就是腾讯地图自己的位置服务技术，这是他们专门针对微信小程序开发者提供的数据服务工具包，这是我们开发者可以在微信小程序中使用到腾讯自家所提供的定位服务调用到POI检索提示输入等等数据调用。但是这里有一个值得我们注意的就是ation这个方法里面有个参数type有两个值，它默认的值是wgs84官方文档对此的说明是wgs84是用于返回gps坐标的，而另外一个值gcj02是用于返回可用于cation的坐标，经过我在网上的查阅我发现他们都说这是两种不同的坐标系，它们两个是有一定得不同的，不同地方的数据偏差都是有点不一样的，但是官方文档说明到如果要用到已经获取的数据打开微信自带的内置地图的话因为他就推荐我们使用gjc02错误!未找到引用源。。

9 广东东软学院本科生毕业设计（论文）

第四章系统整体性设计及各模块功能

4.1 功能模块设计

系统需要实现的功能先看首页顶部我们会有一个定位功能，二维码扫描，搜索框，广告弹窗，商家轮播图，中部有各种美食种类分类，优惠专区，专属分区，再往下走就是推荐商家，发现好菜，水果生鲜，到店自取，在这下面会有按店铺评分的排序，距离排序，销量排序，再往下就是各个商家的详细介绍页面，订单页面，查看订单，订单详细信息，取消订单，我的页面，手机号绑定，头像上传，用户名更改，新增或者删除更改收货地址，我的收藏，我的客服，意见反馈。系统主要的操作流程就是当客户点击进入到本微信小程序时，首先在首页进行一个广告推荐弹窗，用户可以点击进入推荐商家页面或者点击关闭弹窗，在首页用户可以无需登录随意浏览已有的商家推荐页面，如果当客人选定某样菜品后这需提醒用户绑定手机登录然后获取用户定位，系统根据用户定位判定是否在配送范围内，或者用户也可以直接登录获取定位再返回首页系统则会自动推荐在配送范围内的所有商家供用户选择，当用户选择好菜品后，菜品会加入购物车，用户可以自行在购物车内对已选菜品进行增删，在订单提交成功后店家工作人员可以对订单进行相应处理，后台店家工作人员可以对菜品数量，菜品的增加或者删减进行操作。本次微信小程序点餐系统的功能结构设计图如下。

根据之前做的项目需求分析结合用户需求以及系统需求，本次智能定位微信小程序点餐系统必须要具备的几个功能模块有：（1）手机号码绑定模块，该模块要求用户在购买点单菜品时必须绑定手机，以便于店家缺货时联系用户以及骑手通知用户拿外卖，由此提高送餐的效率。（2）定位模块，此模块为本次设计的主要核心着重用来在获取用户位置的同时能给用户根据用户当前所在的位置智能推送附近的商家给用户选择；（3）商家页面模块，此页面也为本次系统设计的重点，此模块主要是当用户点击进入商家页面以后的商家页面的具体体现，展示出商家的详细信息，菜品的详细介绍列表，菜品的数量价格，评论页面，商家详情介绍页面，购物车，支付结果页面，查看订单页面等。

10 广东东软学院本科生毕业设计（论文）

图4-1 功能模块设计图

4.2 数据库设计

根据上述的功能需求分析，下面我们可以针对该系统的五大数据进行相对应的建表，实现菜单列表信息增删查改，用户地址增删查改，订单增删查改，商家增删查改，送餐员信息增删查改，这里对几项较为重要的表单进行介绍说明。

（1）菜品表单,用户通过查看表单中已存在的数据可以进行下单选购，店家也可以在后台及时对菜品供应进行合理管理。

表4-1 菜品表单

编号

名称

菜品号

菜品名

单价

备注信息