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

《基于智能定位的微信小程序点餐系统的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于智能定位的微信小程序点餐系统的设计与实现.doc（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、netrated into all aspects of peoples lives. In order to solve the inconvenience of peoples 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. Com

3、pleted the systems 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 accor

4、ding 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目 录第一章 绪论11.1 系统开发背景目的及意义11.2 论文主要研究内容3第二章 系统相关技术介绍32.1 开发语言32.2 系统整体架构3第三章 系统功能介绍53.1 需求分析53.2 系统操作流程53.3 系统特色5第四章 系统各功能模块设计104.1 功能模块设计104

5、.2 数据库设计13第五章 系统功能实现215.1 手机号绑定模块详细实现215.2 定位模块详细实现215.3 商家页面模块详细实现21第六章 系统功能测试23第七章 总结与展望237.1总结237.2 展望24参 考 文 献25致 谢27广东东软学院本科生毕业设计（论文）第一章 绪论1.1 系统开发背景目的及意义随着现代全球互联网信息化与通信技术的日益发展，手机成为了现代人们生活中最必不可少的工具之一，而微信的出现又再次冲击了人们传统使用手机打电话发短信的使用方式Error! Reference source not found.。目前，微信小程序越来越走进人们的生活当中，小程序以它的轻量

6、化免下载的独特优势俘获了大批用户，用麻雀虽小但却五脏俱全来形容它最为合适不过，它有自己独特的特性，它不同于其他的应用需要到特定的软件中心或者官网首页去下载安装应用，而它是依附于微信这个主体下面的属于微信下面的附属功能，但是如果单拎出来看它又是一个格局很大的软件应用中心，任何用户大到企业小到个人商户都可以开发属于自己的专属的小程序应用，它可以是任何类型的软件满足不同行业的个性化定制，并且用户粘性非常高，而且小程序本身的种类也是涉及多种多样全方面各行业，应用极广具有很大发展潜力Error! Reference source not found.。根据腾讯公布2019年第四季度及全年财报显示，微信及

7、WeChat的合并月活跃用户数达11.65亿，同比增长6.1%，而QQ用户则同比下降7.5%，同时小程序的日均交易笔数同比增长超过一倍，交易总额超过8000亿元Error! Reference source not found.。由此可见微信用户基数的庞大，QQ作为腾讯旗下最重要的产品其市场也逐渐的被自己的新起之秀微信所吞并市场，正因有着如此庞大的用户群体微信小程序的前景与发展空间更是无可限量，从其巨额的交易总额我们就可以看出。小程序发布至今，可以说在我们国内小程序已经渗透到了我们生活中的方方面面，大到企业，小到个体商户都去选择开发一款属于自己的小程序来抢占市场，小程序的种类也是千变万化，越来

8、越多的传统app也都开发了自己的小程序版本，有的人可能会想他们不是原本已经有自己的传统的手机应用了吗为什么还要再去费劲在微信里面开发小程序版本呢Error! Reference source not found.。这里我总结出了三点开发小程序的目的与意义。（1）商家企业看中了微信的用户量，根据微信官方公布的数据显示2018年微信活跃用户规模达8.29亿，占整体网民比例达到95%，2019年用户量持续增长到了11.5亿月活跃账户数，这是一个很庞大的数字微信对于我们来说可以算是一个国民级别的应用，而这些对商家来说都是源源不断的机会，因此谁也不会放弃这么一块大的肥猪肉；（2）微信小程序自身的优点无需

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

10、特点就是功能很全面几乎和普通的app功能一致体验起来是一样的，第二种就是小企业小商家自行开发的功能针对性较强，这种更加体现出了小程序的“微，小，轻”的特点5。（3）商业策略，有巨大的用户作为支持，社交利器，对于传播更加有利，轻便免安装几乎不占没存可以快速开关，便于场景的连接，实现了线下线上相结合的经营模式，客人既可以在线下门店扫码点餐购物也可以线上购物订餐，这将扩大客人消费场景通过微信小程序码为入口，线下扫码，微信搜索，公众号推送，好友推荐，历史记录和附近门店等各种渠道进入小程序。1.2 论文主要研究内容目前微信小程序越来越走进人们的生活当中，小程序以它的轻量化免下载的独特优势俘获了大批用户，

11、并且用户粘性非常高，而且小程序本身的种类也是涉及多种多样全方面各行业，微信小程序的用户定位用户群体涉及普罗大众，应用极广具有很大发展潜力Error! Reference source not found.。因为本次项目准备开发的是校园外卖点单小程序因为这此开发的需求几乎就很明确了，根据KANO模型定义了三个层次的顾客需求基本需求，期望需求和兴奋需求。第一点基本需求对于本次项目来说很明确就是需要点餐，第二期望需求，简单来说就是用户与产品的的互动，如果想要实现这块需要做大批问卷调查，调查用户对于这块软件需要的期望功能，再加以实现。此次选择了基于智能定位的微信小程序点餐系统就是因为近年来移动互联网的

12、兴盛以及看中了微信独一无二的优点庞大的用户量；丰富的组件和API；应用场景丰富；增加获取用户的渠道同一主体的小程序的公众号可以相互关联，相互跳转；更短的开发周期，开发成本也仅为APP的三分之一；免费引流，微信小程序还会自动显示五公里内的所有场景小程序，方便被周围的用户找到并使用，可以大大增加商家的曝光度，免费获取用户。形成双赢局面同时获得商家和用户的青睐Error! Reference source not found.。本次课题目的在于对微信小程序开发实战，对于之前有web前端开发经验来说，小程序的开发相比于web网页开发既有相似之处也有不同的地方，与传统web不同，小程序框架提供了自己的视

13、图层描述语言，并在视图层与逻辑层之间提供了数据传输和事件系统。在传统web里面结构目录为HTML微信小程序则为WXML，样式CSS则改为WXSS，；逻辑则都为Javascript，传统web没有配置目录而微信小程序则多出一项为json文件，由此可以看出传统web是三层结构，而本次开发的小程序为四层结构，多出一层配置json。在所用的语言方面微信小程序有着自己的一套标准，但是其内核还是我们经常所使用的前端的三大件HTML，CSS和JavaScript差不多，万变不离其宗。首先我们看HTML与WXML的差异，可以说HTML更偏向于电脑网页的布局更加适用于文章的展示，而WXML更倾向于Android

14、开发，WXML与Android开发界面中的XML描述文件更加相像，偏向于程序界面的构建。而WXSS与CSS的话两者几乎就是没有区别两者可以直接混用。在JS文件上面微信小程序有它专门独特的小程序API接口具体详情在微信小程序官方文档里面都有列出来，其余的在开发的时候使用几乎没有太大的区别。这么看起来开发微信小程序好像跟开发web网页通用大部分知识，实则并非如此，微信小程序的开发更加的要求程序员具备要开发出一完整应用的意识，而不是跟开web网页那样只需要照顾到网页页面的结构构建。后端方面将会使用Java编写后端api，主要使用了SpringBoot框架开发工具用到eclipse，使用SpringB

15、ooot的优点就是不再需要开发者去定义样板化的配置，它并不是什么新的框架而是它默认配置了很多框架的使用方式同时整合了所有的框架在里面。用到这个无非就是因为它方便简单好用，可以让我们不用担心框架之间的兼容性问题，适用版本等各种突发状况，只要想使用任何东西，只要添加一个配置就可以实现，因此非常适合用来构建微服务。数据库的话采用的就是MYSQL作为后台数据库。而本论文的重点就是智能定位，经过查阅微信小程序官方文档发现，API的返回值又经度和纬度所以我们就需要用到的就是wx.getLocation()这可以使我们获得经纬度逆地址解析出地址的信息，也就是我们还需要通过经纬度找到为相对应的地图然后才能转化

16、出所在地的地名Error! Reference source not found.。这里我们还需要去到腾讯地图开放平台注册，注册完以后进入WebServiceAPI就可以看到逆地址解析，接着就可以直接使用腾讯给我们开放的接口直接用GET请求获取地址的详细信息。第二章 系统相关技术介绍2.1 开发语言本次项目开发的是微信小程序，因此需要用到的技术有前端三大件，也就是HTML语言，CSS，JavaScript，而在我们微信小程序里面WXML就是小程序的HTML语言，它是仅用于微信小程序开发工具里面的用来构建出页面结构用的。而WXSS对应的则是CSS层叠样式表，它是用来描述WXML组件样式，决定组件

17、如何显示的。JavaScript则是动态脚本语言，可以用来对页面特定元素进行操作实现一定得功能与效果，并且由于node.js的开发也可以用于后台服务器端。还需要用到的是服务器语言做后台的开发，以及数据库语言用到的数据库是MySQL。除此之外还需要掌握小程序基础组件的使用已经各种各样的特色API接口，小程序开发框架提供了非常丰富的原生API可以供开发者获取用的信息，支付，获取地址这些都需要掌握。2.2 系统整体架构本系统的运行架构运行如下，首先微信小程序因为其不同于其他语言不能直接连接操作你后台的数据库，它是必须要有服务端才行，也就是我们只能用微信的wx.request对http发起网络请求访问

18、，我们需要安装php编写MYSQL数据库，购买腾讯云的服务器，如果是我们以学习为目的的话就不用去备案域名，可以直接在微信小程序开发者工具勾选中不检验合法域名，web-view（业务域名），TLS版本以及HTTPS证书这一选项即可。在这里我们这里先说明一下小程序自身的框架，这将会对对我们理解本系统的架构有所帮助，这个框架是微信小程序官方团队提供的MINA框架，MINA框架分为两部分一是View视图层二是App Service逻辑层，view视图层可以不单单是唯一的它也可以是多个的，而App Service逻辑层只能有一个，逻辑层是用来处理逻辑，接口的调用以及数据请求，视图层跟逻辑层分别在两个线程

19、里运行。View视图层用的是WebView渲染，而App Service逻辑层用的是JSCore跑的。View视图层和App Service逻辑层之间的关系就是通过系统层的JSBridage进行通信，App Service逻辑层把数据传给View视图层，当用户点击视图层做出变动时，View视图层再把触发的变化传送给App Service逻辑层进行消化处理。框架的核心就是有一个响应式的数据绑定系统，意思就是当开发者在App Service逻辑层做出变化时View视图层就会做出相应的变化与逻辑层保持一致Error! Reference source not found.。图2-1 框架图第三章 系

20、统功能介绍3.1 需求分析首先在我们要介绍系统功能之前我们要先做一个用户的需求分析，我个人对于需求分析的理解就是在我们开发者去开发一个应用必须得是要去给到用户真实去长期使用的一个应用，这就需要我们去摸清楚用户的想法，要去了解用户想要的是什么，让开发者自己代入到用户的身份去思考摸索揭露用户的真实需求而不是单单就开发出能用级别的应用而是要考虑去做到好用易用，这里我们再结合微信小程序自身的特点就是虽然它麻雀虽小但是其五脏俱全，它可以是任何类型的，它是小型的，轻便的，但是又是功能齐全的一个存在。在功能实用性上我们需要考虑它能去帮我们实现一个怎么样的功能，提供一个怎么样的服务，就必须得好用还得考虑功能可

21、行性的问题，在保留必要的功能的前提下去除传统app上所冗余的不必要的功能，其次就是另外一点非刚需就是在实现必要的功能以后要去做一个怎么样的简洁美观的界面，这是给用户的第一感觉这与功能性需求同样重要而且其工作量以及实现的难度也不比它小。这里我们必须要明白开发智能定位点餐小程序的目的，制作线上餐饮店就是为了商家可以更加自由个性化的扩宽自己的业务，可以获得更大的客流量，同样在服务商家的同时也使用户用餐变得更加便利，扫码点单，定时送外卖，定位周边有什么店，门店买单，在众多店家中收藏自己喜爱的，以便下次可以快速点单等等。经过对系统的需求分析需要实现的就是系统界面简洁易用，操作简单，完全采用空间式的格局，

22、让菜单，讯息等数据的录入工作更简洁。微信小程序的架构与其他语言的略有不同，它不可以直接操作数据库，后台只能发送request请求，将请求与本地服务器的JavaScript脚本进行交换，再经过JavaScript脚本来操作数据库，pc端再将数据返回显示在页面上。3.2 系统操作流程首先小程序通过tabbar分为三大主页，首页，订单，我的。用户进入小程序以后就是通过腾讯地图api接口获取用户的定位，然后会推送附近的商家给用户，用户点击进入商家后会顶部显示出商家的店铺名称详细的店铺资料，店铺的评分月销的数量以及配送所需要的时间还有店家发布的公告，再往下走中部就是分为三个部分菜品界面包括菜品的介绍，价

23、格等各方面的信息，评论界面顾客购买以后对菜品所给出的评价以及商家详细信息介绍页面。底部则是显示购物车，通过购物车顾客可以一次性选购多个菜品随时可以查看已点的放在购物车菜品，如果顾客不小心点错或者不满意也可以即时对商品增加或删除为广大顾客提供便利。当用户点单完成后就跳转至付款页面，付款成功后再次跳转到支付成功页面，该页面可以点击返回商家也可以点击查看订单。图3-1 用户操作流程图后台餐馆可以实现对菜品的管理，添加菜品，店家可以往店铺列表中添加新菜品，编写菜品名菜品介绍菜品图片以及数量；删除菜品，店家可以在后台删除掉以及卖完缺货或者今天不供应的菜品；更改菜品信息，店家可以更改菜名，菜的介绍以及更换

24、图片。订单页面则会显示用户的历史订单，订单会显示店名订单金额以及订单菜品的名称以及数量。最后是我的页面，我的页面是用户可以管理自己个人信息地址的页面，界面有我的评价功能，管理收货地址功能可以定位现在用户所在的位置，同时也可以手动添加收货地址，同时还有小程序的帮助与反馈选项给用户反馈使用感受。图3-2 商家操作流程图3.3 系统特色本系统的特色就是基于智能定位的一个微信点餐小程序，其独特的优点就是不同于其他普通扫码点单，它可以先询问用户是否可以获取当前位置接着给用户推荐出用户所在地附近的商家，这样可以方便用户即使足不出户也可以在家享用周围附近店家所提供的美食，现在外卖点餐已经成为当代青年一种全新

25、的生活方式给在都市快节奏工作学习生活的人们带来一丝便捷。获取用户定位的流程是，首先要拿到用户的授权，这里我们翻查微信小程序官方给出的官方文档我们会发现wx.getLocation这个api接口在调用前必须要先得到用户的授权，所以在获取用户定位之前我们在这里会先有一个弹窗跳出来提醒询问用户需要获取您的地理位置请确认授权，如果用户点击确定那么在json文件中的success函数就会返回用户所在地的数据，如果拒绝则fail返回获取地理位置失败系统则无法提供推荐附近商家给用户使用。如果用户点击授权那么接着要用到微信的接口获取当前用户所在的位置信息，微信端返回收到的是经度纬度速度等等参数，微信获取到位置

26、以后并没有直接显示出当前的地面，这就需要我们借助腾讯自家的工具，腾讯位置服务中有关于微信小程序的地理位置转变JS SDK的API接口，用这个可以返回之前获取的包括国家，省，市，区，纬度等地理位置信息。这里我们需要用到的就是腾讯地图自己的位置服务技术，这是他们专门针对微信小程序开发者提供的数据服务工具包，这是我们开发者可以在微信小程序中使用到腾讯自家所提供的定位服务调用到POI检索提示输入等等数据调用。但是这里有一个值得我们注意的就是wx.getLocation这个方法里面有个参数type有两个值，它默认的值是wgs84官方文档对此的说明是wgs84是用于返回gps坐标的，而另外一个值gcj02

27、是用于返回可用于wx.openLocation的坐标，经过我在网上的查阅我发现他们都说这是两种不同的坐标系，它们两个是有一定得不同的，不同地方的数据偏差都是有点不一样的，但是官方文档说明到如果要用到已经获取的数据打开微信自带的内置地图的话因为他就推荐我们使用gjc02Error! Reference source not found.。第四章 系统整体性设计及各模块功能4.1 功能模块设计 系统需要实现的功能先看首页顶部我们会有一个定位功能，二维码扫描，搜索框，广告弹窗，商家轮播图，中部有各种美食种类分类，优惠专区，专属分区，再往下走就是推荐商家，发现好菜，水果生鲜，到店自取，在这下面会有按店

28、铺评分的排序，距离排序，销量排序，再往下就是各个商家的详细介绍页面，订单页面，查看订单，订单详细信息，取消订单，我的页面，手机号绑定，头像上传，用户名更改，新增或者删除更改收货地址，我的收藏，我的客服，意见反馈。系统主要的操作流程就是当客户点击进入到本微信小程序时，首先在首页进行一个广告推荐弹窗，用户可以点击进入推荐商家页面或者点击关闭弹窗，在首页用户可以无需登录随意浏览已有的商家推荐页面，如果当客人选定某样菜品后这需提醒用户绑定手机登录然后获取用户定位，系统根据用户定位判定是否在配送范围内，或者用户也可以直接登录获取定位再返回首页系统则会自动推荐在配送范围内的所有商家供用户选择，当用户选择好

29、菜品后，菜品会加入购物车，用户可以自行在购物车内对已选菜品进行增删，在订单提交成功后店家工作人员可以对订单进行相应处理，后台店家工作人员可以对菜品数量，菜品的增加或者删减进行操作。本次微信小程序点餐系统的功能结构设计图如下。根据之前做的项目需求分析结合用户需求以及系统需求，本次智能定位微信小程序点餐系统必须要具备的几个功能模块有：（1）手机号码绑定模块，该模块要求用户在购买点单菜品时必须绑定手机，以便于店家缺货时联系用户以及骑手通知用户拿外卖，由此提高送餐的效率。（2）定位模块，此模块为本次设计的主要核心着重用来在获取用户位置的同时能给用户根据用户当前所在的位置智能推送附近的商家给用户选择；（

30、3）商家页面模块，此页面也为本次系统设计的重点，此模块主要是当用户点击进入商家页面以后的商家页面的具体体现，展示出商家的详细信息，菜品的详细介绍列表，菜品的数量价格，评论页面，商家详情介绍页面，购物车，支付结果页面，查看订单页面等。 图4-1 功能模块设计图4.2 数据库设计根据上述的功能需求分析，下面我们可以针对该系统的五大数据进行相对应的建表，实现菜单列表信息增删查改，用户地址增删查改，订单增删查改，商家增删查改，送餐员信息增删查改，这里对几项较为重要的表单进行介绍说明。（1）菜品表单,用户通过查看表单中已存在的数据可以进行下单选购，店家也可以在后台及时对菜品供应进行合理管理。表4-1 菜

31、品表单编号名称类型说明1菜品号varchar主键2菜品名varchar3单价double4备注信息varchar5销售数量varchar（2）订单表单，用户可以通过查看订单观看自己当前以及历史订购菜品的详细信息，例如订单编号，订单时间，订单金额，菜品信息等。店家也可以通过查看订单的信息统计销售额度帮助商家更好的经营。表4-2 订单表单编号名称类型说明1订单号int主键2总金额varchar3菜品信息Varchar4下单时间datetime（3）商家表单，具体编辑录入商家各类型的详细信息，店家名，店家简介，联系电话，店家地址，评论表4-3 商家表单编号名称类型说明1店家名varchar主键2店家

32、简介varchar3联系电话varchar4店家地址varchar5评论varchar表4-4 数据项编号数据项名称说明部分编号数据项名称说明部分1菜单号varchar7菜单名varchar2客户号varchar8客户名varchar3送餐员号varchar9菜品数量varchar4订单号varchar10菜品单价double5地址varchar11电话号码varchar6备注信息varchar12销售数量int表4-5 数据类型编号数据结构名属性1菜单菜单号,菜单名，单价，备注信息，销售数量2客户客户号，客户名，电话号码，地址3订单订单号，菜单号，菜单名，单价4送餐员员工号，员工名，员工电话

33、5下订单客户号，订单号，时间6订购订单号，菜式号，数量7送餐员工号，订单号图4-2 数据库er图第五章 系统功能实现5.1 手机号绑定模块详细设计在我们的用户想要使用本程序点餐的时候为了方便店家和骑手联系客户完成交易，因此我们需要获取得到用户的手机号码，具体的实现流程就是想要获取用户的信息资料必须要调用wx.login接口，因为是用户自主触发启用该获取手机号码的接口，因此在这里我们不能使用API来调用接口，所以只能用组件由用户来点击调用接口，用别的都无效，这里我们查看微信小程序开发者官方文档可以知道这里的的参数用到的是open-type属于string类型微信开放能力，open-type的值里

34、面选择getPhoneNumber，当用户点击同意获取以后，我们再用bindgetphonenunber事件回调拿回来微信服务器返回给我们的加密数据，再接着用第三方服务端的session_key以及app_id来解密获得用户的手机号码。这里官方文档还提醒了我们需要注意的就是在回调的时候如果调用wx.login登录有可能会出现舒心登录态，导致解密失败，因此需要开发者提前login。当通过bindgetphonenunber事件回调回去回来的参数有三个errMsg，iv，encryptedData，如果用户不同意授权则会返回undefined，如果用户点击同意授权的话encryptedData则是

35、我们所需要的加密数据，解密后我们又将获取得到三格参数phoneNumber，purePhoneNumber，countryCode皆为json结构。具体代码效果如下：表5-1数据请求，使用code换取openid和session_key等信息js代码getPhoneNumber: function (e) var that = this; console.log(e.detail.errMsg = getPhoneNumber:ok); if (e.detail.errMsg = getPhoneNumber:ok) wx.request( url: http:/localhost/index

36、/users/decodePhone, data: encryptedData: e.detail.encryptedData, iv: e.detail.iv, sessionKey: that.data.session_key, uid: , , method: post, success: function (res) console.log(res); ) ,接着打印出回调后的res，提取code，发送post到后台换取openid的参数data：code打印res，接着保存data里面的数据，就可以获取手机号，获取手机号码的表5-2按钮样式代码登录弹窗询问用户是否同意授权如果同意则为

37、true拒绝为false效果图如下：图5-1 获取权限效果图 如果用户同意授权post就可以请求后台打印出成功回调函数就成功获取用户号码表5-3成功返回输出Success：function(res)console.log(res);5.2 定位模块详细设计在用户登录获取了用户的手机号码以后接着就要获取第二个必要的信息就是要获取用户的地理位置。具体实现过程一开始也是跟获取手机号码权限差不多先在wxml页面写一个button的按钮，让用户主动点击触发获取权限大概就是当前所在位置，再接着在js里面编写getLocation方法就可以获取当前用户所在地点的经纬度。表5-4获取经纬度代码 getloca

38、tion() wx.getLocation( success:function (longitude,latitude) console.log(longitude,latitude) , ),值得注意的是此接口在用户离开小程序以后就无法使用了。在我们获取了用户的经度纬度以后，接着我们要做的就是需要把经度纬度转化为相对应的地名，但是微信小程序本身并没有给我们提供这项功能，因此我们需要借助第三方工具，例如百度地图腾讯地图等，这里我们因为方便所以选择用到的是腾讯地图，接着我们去到网页搜索腾讯地图api进入到腾讯的位置服务网页，登录注册以后获取到我们的key也就是开发者秘钥，在后面我们用到的第三方工

39、具都需要我们获取这个秘钥。接着我们再腾讯地理位置服务里面找到WebService API他给我们提供了一个服务，这里我们需要用到的是逆地址解析（坐标位置描述）它的功能就是能将刚刚获取到的经纬度转化为正式的地址。要用到这个服务我们就要在微信小程序上面发起一个request请求，这里我们参看腾讯地图给出的建议就是有两个参数是必填的，一个就刚刚提到的key秘钥还有一个就是location放入经度纬度。这里我发现了一个问题就是我在电脑端写程序做测试的时候发现用电脑的ip来做测试的时候定位很不准确，在手机上就应该没有这个问题了。表5-5经纬度转换wx.request( url: data: locati

40、on:$parseVars2Str(la,lg), key: ADUBZ-WUPY4-PDPUT-XXLDW-VB7FH-ZJFKJ,Success:res = Console.log(res.data),上文又提过getLocation里面有个type属性，里面有两个参数一个是wgs84一个是gcj02，这里默认使用的是wgs84，这个wgs84的值是一个国际通用的坐标，而gcj02则是更适合我们国内用户的坐标，具体的差距这里就不去细究这里我们就直接在改掉默认的参数改为用这个gcj02.同样的我们也可以用经度纬度来获取地址，现在我们要用到的就是地址解析（地址转坐标）也就是倒过来跟刚刚的其实也

41、差不多，不同的地方在于参数刚刚是location而现在就要换成address。表5-6地址转化为经纬度export function convertAddress2Location(address) return new Promise(async (resolve,reject)=let result =await $get( address, key:MAP_KEY)resolve(result)接着我们就要做下一步计算距离，当用户获取到定位以后会显示出店家与用户之间相距的距离，计算出用户与不同店家对象相距的距离。具体的方法就是用我的getLocation与各家不同的店家距离进行一个对比，

42、同样的我们在腾讯地图位置服务里面也有相应的接口给我们使用，距离计算（一对多）它里面get请求参数里面有四个是必填的分别是made，from，to，key。made参数默认的是driving，而from是起点坐标我们需要给他传入一个经度纬度，to就是终点坐标就是可以是多个的，这里就很好理解了，from就是我们的当前的地点，而这个接口是可以一对多的，因此就可以给to附上很多地点的经纬度中间用分号连接，这样我们就可以对比出各个店家距离我们当前位置的距离。这里我们用到的是getDistance，这里因为我们要实现一对多，所以我们要把店家的地址挨个传进去，因此我们需要对数组进行一个循环来依次获取他们的坐

43、标。表5-7计算距离wx.request( url: data:mode: driving,key: ADUBZ-WUPY4-PDPUT-XXLDW-VB7FH-ZJFKJfrom: $parseVars2Str(lat,lng),to: $parseVars2Str(location.lat,location.lng),success:res= console.log(res.data.result.elements0.distance)图5-2 输出结果图借助腾讯地理位置服务这个第三方的工具我们就可以实现了计算出出商家与用户之间的相距的距离有多少并且显示出来，紧接着进入到本次系统的核心基于

44、智能定位的微信点餐小程序，在上面我们已经解决了显示出用户当前位置以及与店家之间距离的计算，那么有了这两个数据就好办了，智能定位其实很好理解无非就是将附近所有的店家从近到远依次排序呈现在用户的眼前，这里我们还可以增添一点就是给店家评分，每家店有他们各自不同的评分，用户也可以根据需求更改店家的排序，不以距离远近来排序，也可以选择评分高低来排序等等。实现的方法就是用已经获取了的数据也就是各个店家离用户距离的数组排序，再将它们单独放在一个方法里面，再去调用。表5-8排序onload:function(options) var newArray=this.data.array; var s = ; fo

45、r(var i =1; i 0; j-) if(newArrayj.distance newArrayj 1.distance) s =newArrayj; newArrayj = newArrayj - 1; newArrayj - 1 = s; console.log(newArray) this.setData( newArray: newArray.reverse() ),5.3 商家页面详细设计 在商家页面模块设计这里我们重点讲讲前端页面设计，首先我们要知道的是小程序开发框架的App Service逻辑层是由JavaScript编写的，而JavaScript的解释器又是最早用在HTML网页上面的，由此可见微信小程序的web网页端的关系非常的紧密。微信小程序的页面是由四个文件组成js页面逻辑，wxml页面结构，json页面配置，wxss页面样式表。wxml是框架设计的一套标签语言，结合八大组件，视图容器，基础内容，表单组件，导航，媒体组件，地图，画布，客服对话可以构