基于微信小程序的智能地图导航

基于微信小程序的智能地图导航基于微信小程序的智能地图导航 摘要要说当今最流行的社交软件，那肯定是非微信莫属了，同时随着微信小程序的问世，越来越多的开发者将目光转移到了微信小程序身上。究其原因,微信小程序是一种不需要下载安装就可以使用的应用，用户不需像其他app一样需要下载安装到移动端上，只需在微信客户端即可使用，不需占用内存;又由于微信现在几乎是人手必备的软件，这种方便和快捷使得在微信开发下的微信小程序被用户接受的程度大大提高，因此我觉得在当今时代下，微信小程序的开发是有明显的意义的。本论文的主要内容就是论述基于微信小程序的智能地图导航，通过在微信开发者工具平台下完成对界面前端的设计，提供给用户一种可视化，操作性便捷的界面：主要的功能有地图定位，路线导航,周边环境搜索与信息展示，智能推荐信息,转发功能等。后台数据主要是进行与前端的数据交互，并返回给需要的数据。最后经过调试,验证该app是否可以达到与设计任务书上相同的要求。关键字：智能地图，导航，微信小程序

AbstractTosaythemostpopularsocialsoftwaretoday,itmustbeWeChat,andwiththeadventofMiniProgram,moreandmoredevelopershaveturnedtheirattentiontotheMiniProgram.MiniProgramisanapplicationthatcanbeusedwithoutdownloadingandinstalling.Thereasonforthis,usersdonotneedtodownloadtothemobileterminallikeotherapps,justuseitontheWeChatclient,andmemoryconsumptionrequired.SinceWeChatisalmostnecessaryforhumansocialnetworking.ThisconveniencemakestheMiniProgramundertheWeChatdevelopmentgreatlyacceptedbyusers,soIthinkthatinthecurrentera,thedevelopmentofMiniProgramisobviouslysignificant.ThemaincontentofthisthesisistodiscusstheintelligentmapnavigationbasedonMiniProgram.BydesigningtheinterfacefrontendundertheWeChatdevelopertoolplatform,theuserisprovidedwithavisualandoperativeinterface:themainfunctionsaremappositioning,routenavigation,surroundingenvironmentsearchandinformationdisplay,intelligentrecommendationinformation,forwardingfunctions,etc.Thebackgrounddataonlyneedstointeractwiththedataofthefrontendandreturnittotherequireddata.Finallyverifiedthattheappcanmeetthedemand.Keywords:intelligentmap，MiniProgram,navigation目录1 绪论 绪论1.1选题意义地图，是每个人出行必备的app。一个好的地图app，是可以精确定位自己的位置和周边的地理信息。有时到一个陌生的地方，是想要一个当地人的导航的，因为他可以给你一些当地的推荐。那既然如此，能否开发一款应用程序，它不仅可以做到其他地图app可以做到的定位，导航，还能进行智能推荐。如：当你到一个学校进行公务员考试，这款软件会给你推送附近的食堂，教室点，图书馆等；到一个旅游景点，会给你推荐该风景区的特色景点或者洗手间等。它会根据你的定位信息，做出适合你位置信息的智能推荐，这对于需要出门的人提供了很大的便捷与用户体验。又由于微信小程序的“无处不在性”和“随时可用性”，在微信平台下开发这款智能地图导航应用程序，是相当契合的。小程序的发展前景方面：刘玉佳基于微信“小程序”开发的系统架构、关键技术和市场前景出发，对微信“小程序”开发的系统实现及前景进行了分析[]；匡文波、李芮、任卓如分析了小程序的优势及用户体验，并重点分析了小程序面临的挑战，由此展望未来小程序的发展[]；郑雨萌从小程序的特点、应用和优劣势来阐释微信小程序目前所面临的困境，并对其未来发展提出一些畅想[]；候春俊则从小程序推广策略研究分析角度，针对企业开发“小程序”提高曝光量，提出一系列的推广方法，为开发“小程序”之后却没有曝光量，提供了解决思路[]。从小程序上线2007年1月上线以来，可以看出大众对其的关注以及学者们对于它的发展方向都是有初步的解决思路的，在后期各位开发者的努力下，小程序会被越来越多的人接受并使用，并有走向国际的一天。2需求分析定位位置信息2.1系统功能需求分析定位位置信息用户定位用户定位地图显示地图显示智能地图导航智能地图导航搜索搜索分类分类周边信息周边信息推荐导航推荐导航2.1.2用户登录注册本微信小程序在设计时其实是有点偷懒的，本来是要做个登录注册模块,但考虑倒该微信小程序的功能性是实现智能地图导航的,归根结底是个功能性的小程序,为了方便使用,免去了注册登录这一块的设计.用户只要进入了本微信小程序，就默认已经同意了身份的注册，即微信默认的登录。2.1.3用户位置定位关于该微信小程序所实现的位置定位，微信小程序官方开发文档提供了api可供调用，通过调用它内部自带所提供的接口可以实现将位置信息得到，并且可以通过map组件在地图上以一个Marker的标志显示出来。但实际效果并没有很好,地点的信息不是很准确,所以这里使用了高德开放平台所提供的微信小程序sdk来使用，得到的效果好了许多。2.1.4用户周边信息展示由于本毕业设计的课题是智能导航，我对智能的理解是小程序端可以根据用户所定位到的位置信息得到用户周边的值得的，用户可能去的地方信息。因此该小程序是需要一个模块来实现将附近的周边信息得到并返回给用户，供用户选择。这里可以使用的有微信内部自带的getpointaround（）接口，百度以及高德都有相应的接口提供，这里需要下载它们所提供的js文件同时完成使用前的申请和注册才可使用。2.1.5智能信息推荐小程序通过调用接口得到的周边信息是无序的，没有分类检索功能的，这在用户体验上是不人性化的，因此我们要将返回的各类信息进行分类，根据人们的使用习惯，可以大致分为美食类，娱乐设施类，酒店类等等。这里我将其分为衣食住行游玩生活购物等几大类，以及根据人们当今的生活选择作了热门的推荐：包括有美食，酒店，网吧，超市，快递，厕所等等，可以增大用户的体验。2.1.6搜索功能实现仅仅依靠小程序本身进行智能推荐也是不尽完美的，用户还是希望能够根据自己的需要获得所需要的位置信息，因此这里增添了搜索栏功能，这里可以使用微信的wxsearch（）在小程序地图显示的界面上方面增添搜索栏目，用户输入自己所需要的信息后可以跳转到已经分类好的周边信息。搜索功能的实现也大大增添了用户的体验度。2.1.7路线导航实现在使用微信小程序得到了自己的目的地后，自然而然是要获取导航信息的，同时考虑到不同交通工具的使用，将导航路线分为了驾车，公交，步行以及骑行。使用者可以根据自己的实际情况选择适合自己的路线。2.1.8转发功能实现微信小程序的一个明显的使用特点就是可以”共享”，微信小程序中提供了转发功能，可以将信息分享给好友或者群聊，朋友圈。微信官方开发文档也提供了api可供使用:OnShareAppMessage(),用户可以点击右上角转发。2.2开发环境2.2.1开发环境选型微信小程序自己有自己的开发语言,虽然它看似重新定义了一套新的标准规范,但实际上它和前端的开发所使用的标准是相差无几的,包含了HTML,CSS,以及JS(JavaScript),同时小程序的官方文档也提供了大量的api供使用。因此对于绝大多数程序员来说，通过阅读学习小程序的官方文档是可以快速上手进行开发的。对于开发市场而言，微信小程序有着众多优势，如：无需下载安装，用完即走；内部接口众多，功能丰富；有着强大的微信生态环境，已经迅速成为开发者快速开发项目的首选。许多APP也推出了对应的小程序，小程序在市场上的占有比例也在不断地增加，前景一片光明。因此，对于选择微信小程序作为开发环境，是有着长远的考虑的。2.2.1开发环境介绍微信小程序依靠着它鲜明的特点，得到了广大用户的推崇和喜爱。究其原因，它是一款不需要下载即可使用的应用，相较于其他app，需要下载安装才能使用，这不仅仅是会占用了手机的内存，同时还需花费时间等待下载安装。小程序实现了应用“触手可及”的梦想，它就像是存储在云端一样，即拿即用。微信小程序提供的是专门的开发者工具——微信Web开发者工具，方便快捷。2.2.3微信小程序开发环境搭建微信小程序开发工具环境搭建步骤如下所示:（1）首先在微信公众平台官网/上按要求进行注册，注册完即可登入微信小程序开发界面；（2）用开发工具进行下载，根据自己的操作系统选择不同的开发工具，支持Windows32位，Windows64位，MacOSX系统，本人选择的是Windows64位系统，按指引进行下载；（3）下载完成后，点击下载完成的图标进行安装，等待安装完成；（4）进入微信开放平台/进行身份信息的注册。在移动开发一栏里填写应用的名称——“基于微信小程序的智能地图导航”以及该应用的一些基本信息。完善资料后等待平台的审核。待到审核通过后拿到官方提供的AppId就可以开启你的小程序开发之旅。2.3小结这一章节阐述了本系统中使用的一些关键技术以及该项技术的一些环境的配置，以及对整个系统进行需求分析，包括系统得到各项小方面的分析和开发环境方面的介绍。本平台的功能主要由用户位置信息定位，用户位置展示，获取用户当前位置的周边信息，周边信息的分类，周边信息的推荐，导航路线显示，用户搜索。开发工具为微信公众平台提供的微信小程序开发工具—微信Web开发者工具。3关键理论和技术3.1小程序的架构3.1.1小程序框架构成这里首先要介绍一下微信小程序的框架,每个微信小程序在进入编辑前已经初始化并且已经包含了一些已经配置好的代码文件,其中必不可少的有app.js,app.json,app.wxss这三个。在这中，以.js文件为后缀的是脚本文件，在这个文件中，主要负责监听并处理小程序的生命周期函数，声明全局变量。在这个文件中，我们可以调用框架所提供的各种各样丰富的API来满足开发者的需求；而以.json为结尾的是配置文件，app.json文件是对整个小程序的全局配置，在这个文件中我们可以配置小程序是由哪些页面组成的，所有在微信小程序中使用的页面都必须在这个文件中注册，同时一些其他的配置，如小程序窗口的背景色，导航条的样式，标题等等，值得注意的是，在该文件中不可添加任何注释。以.wxss为后缀的是样式文件，app.wxss是整个小程序的公共样式表。关于这个文件的使用，我们可以在页面组件的class实行上直接使用app.wxss中声明的规则样式。值得注意的是，每一个小程序的页面下的都包含由同路径下相同名字的4个不同的后缀文件组成，如：logs.js,logs.json,logs.wxml,logs.wxss，其中页面的样式表和配置文件是非必要的，当这个页面存在了页面的样式文件，则它的规则会覆盖app.wxss中的规则，当不指定样式表时，就会默认app.wxss中的样式规则。同理，appjson中的windows中的配置项在使用当前页面的配置文件时也会被覆盖，反之则不会。3.1.2小程序视图与逻辑交互小程序开发框架的目标是通过尽可能高效，容易的方式使得开发者可以在微信中开发出具有原生APP那样的体验。微信小程序的框架提供了自己的视图层描述语言wxss和wxml，以及基于JavaScript的逻辑层框架，增加App和Page方法进行程序和页面的注册，并在视图层与逻辑层之间提供了数据与事件之间的传输与交互系统，可以让开发者更为方便的把开发重点聚焦于数据与逻辑上。框架的核心是一个响应的数据绑定系统，整个系统可以分为两层：视图层和逻辑层（View和AppService）,框架可以让视图与视图保持非常简单的同步。当数据需要作出修改的时候，只需要在逻辑层作出修改，视图层就会做出相应的更新。如：在视图层中:<view>Hello{{message}}</view><buttonbindtap=’changemessage’>Clickme!</button>在逻辑层中:VarhelloData={ message:’world’}Page（｛data:helloData,changeName:function(e){ this.setdata({ name:’Wechat’ })}})在这个例子中，我们可以清楚的看到通过框架我们将逻辑层中的数据中的name与视图层的name进行了绑定，所以在页面打开的时候我们看到的是Helloworld；当我们点击按钮的时候，视图层会发送changeName事件给逻辑层，逻辑层找到相对应的事件处理函数，并且执行了setdata的操作，将name改为了Wechat。此时该数据和视图层已经完成了绑定。3.1.3基础组件小程序的框架提供了一套基础的组件，这些自带特殊风格以及逻辑的组件使得微信小程序的开发者可以通过这些基础组件的任意组合开发出具有强大功能的微信小程序。组件是视图层的基本构建块，具有一些功能和微信风格。组件通常包括开始标记和结束标记。该属性用于装饰组件，内容位于两个标记内。这里不展开描述，具体参考小程序官方开发文档。3.1.4页面管理小程序结构处理整个小程序中页面的路由，允许页面之间的跳转和转换，并为页面提供完整的生命周期。如果开发人员记录数据，生命周期函数，方法等，则applet结构可以帮助开发人员管理所有复杂的操作。结构中需要的页面。3.1.5丰富的API小程序的框架提供了各种各样丰富的微信API，可以让开发者方便的调用微信自己提供的能力，比如获取用户的信息，本地存储，微信支付等等功能。4整体设计与实现4.1界面的设计基于微信小程序的轻巧性，拟定了一个小程序界面设计指南和建议。设计指南基于对用户知情权和操作权的充分尊重。旨在在微信生态系统中创建用户友好，高效和一致的用户体验，同时优化适应和支持不同需求，为用户和小型程序提供商创造双赢局面。为了防止用户在微信中使用小程序服务，必须设计复合体以减少未绑定设计元素对用户目标的干扰，礼貌地向用户显示服务由该计划提供。引导用户使用。每个页面都必须有明确的目的，以便用户每次进入新页面时都能快速了解页面内容。原则上要确定关键点，我们应该尽量避免页面上与决策和用户操作无关的其他干扰因素。鉴于该微信小程序的主要功能是实现智能地图导航，因此对于该小程序，页面分为了两个，首页面是map组件的显示，通过getRegeo(Object) 获取地址的详细信息，并指定一个marker将其显示在地图上，同时将智能推荐的栏目以滚轮的方式显示在地图组件下方，同时为了用户的需要，将搜索栏加在了导航栏的下面，使用户可以搜索自己所想要到达的地方，用户在input栏中输入后，可以根据搜索结果跳转到已经定义并且注册好的不同的页面去，跳转的页面在为了保证用户的体验情况下，决定不添加与查询不相关的业务入口，因为与用户的目标无关，易造成用户的迷失。去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户决策和操作的帮助内容。Index.wxml中部分关键代码如下：<viewclass="section"><viewbindtouchstart="bindInput">{{keywords}}</view></view><viewclass="map_container"style="bottom:{{rpxHight}}rpx;"><mapbindcontroltap="clickcontrol"bindmarkertap="makertap"bindregionchange="mapchange"class="map"id="map"latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"scale="16"showLocation="true"><cover-viewclass="c-v1"><cover-imagebindtap="clickcontrol"src="/images/circle1.png"></cover-image></cover-view></map></view><scroll-viewbindscroll="bindscroll"bindtouchend="touchend1"bindtouchmove="touchmove1"bindtouchstart="touchstart1"class="map_textmap_text2"scrollTop="{{scrollTop1}}"scrollY="{{listType==1}}"style="height:{{rpxHight}}rpx;"wx:if="{{bottomType==2}}"><viewclass="map-2f-r"wx:for="{{markers}}"wx:key="key1"><imagebindtap="chooseMark"class="m-3"data-item="{{item}}"lazyLoad="{{true}}"mode="aspectFill"src="{{item.photos||'/images/zwtp.png'}}"></image><viewclass="f-c"><viewclass="f-ra-c"><viewbindtap="chooseMark"class="t-om-4"data-item="{{item}}">{{}}</view><imagebindtap="makePhoneCall"class="m-11animatedpulseinfinitefaster"data-tel="{{item.tel}}"src="/images/ddx.png"wx:if="{{item.tel&&item.tel.length}}"></image></view><viewbindtap="chooseMark"class="t-om-5"data-item="{{item}}">{{item.address}}</view></view></view></scroll-view>在点击搜索框后跳转到了inputtip页面，可以进行搜索，也可以在设计好的页面布局中的衣食住行游玩等栏目根据自己的需要选择点击栏目，例如选择了’酒店’，则会触发跳转事件到主页面，在主页面显示周边的位置信息。Inputtip.wxml的关键代码如下:<formbindsubmit="formSubmit"reportSubmit="true"><viewclass="section"><inputbindconfirm="search"bindinput="bindInput"confirmType="search"placeholder="搜索"></input></view><buttonclass="text_boxf-ra-c"data-name="{{}}"formType="submit"wx:if="{{isSearch}}"wx:for="{{tips}}"wx:key="key"><viewclass="o-12f-ra-c"><textclass="{{item2==searchVal?'highlight':''}}"data-name="{{}}"wx:for="{{List}}"wx:for-item="item2"wx:key="key2">{{item2}}</text></view></button><viewclass="f-co-4"wx:if="{{!isSearch}}"wx:for="{{zhoubians}}"wx:for-item="item1"wx:key="key1"><viewclass="o-5f-ra-c"><viewclass="o-6f-rj-ca-c"style="background:{{item1.color2}};"><viewclass="o-7"style="background:{{item1.color1}};"></view></view><viewclass="o-8">{{}}</view></view><viewclass="f-rf-wo-9"style="border-left:20rpxsolid{{item1.color1}};"><buttonclass="btn"data-name="{{}}"formType="submit"wx:for="{{item1.list}}"wx:for-index="index2"wx:for-item="item2"wx:key="key2"><viewclass="o-1f-rj-ca-c"><viewclass="f-rj-ca-co-10{{index2%3==1?'o-11':''}}"><imageclass="o-2"src="{{item2.img}}"wx:if="{{item2.img}}"></image><viewclass="o-3">{{}}</view></view></view></button></view></view></form><cover-viewclass="f-ra-cb-ccover-ad"><adunitId="adunit-6489f88483a40316"></ad></cover-view>4.2定位的实现要实现智能地图导航最基础的是要先实现定位，关于定位，微信小程序开发者工具的官方文档中有提供了相对应的api可供调用:wx.getlocation（OBJECT）,可以获取当前的地理位置，速度，同时可以使用wx.chooselocation(OBJECT)打开地图显示的位置，然而这样获取到的定位信息不是很准确，原因是百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间没有进行互转，当前互联网地图的坐标系现状：（1）地球坐标(WGS84)：国际标准，从专业GPS设备中取出的数据的坐标系，国际地图提供商使用的坐标系。（2）火星坐标(GCJ-02)也叫国测局坐标系，中国标准，从国行移动设备中定位获取的坐标数据使用这个坐标系，同时国家规定：国内出版的各种地图系统（包括电子形式），必须至少采用GCJ-02对地理位置进行首次加密。（3）百度坐标(BD-09)：百度标准，百度SDK，百度地图，Geocoding使用。在查阅了关于各个版本sdk的资料后，决定通过获取高德key，并下载安装微信小程序的sdk，同时为了保证高德小程序SDK中提供的功能的正常使用，需要设置安全域名。这里的具体操作如下：登录微信公众平台，在"设置"－>"开发设置"中设置request合法域名，将

中添加进去即可。在使用了高德下的微信小程序sdk后，通过使用AMapWX构造函数,使用AMapWX基本方法getRegeo（Object）获取地址的详细信息,其成功的回调方法的返回信息中有用的信息有(1):latitude:Marker的经度;(2)longitude:Marker的经度;(3)regecodeData:逆地理编码数据，其中逆地理编码API的服务地址的URL请求为/v3/geocode/regeo?parameters。关键代码如下：getRegeo:function(){vart=this;returne(s.mark(functione(){vara,n,o,i,c,d,u,h;returns.wrap(function(e){for(;;)switch(e.prev=e.next){case0:returnwx.showLoading({title:"正在搜索",mask:!0}),e.prev=1,e.next=4,r.getRegeo();case4:a=e.sent[0],n=,o=a.desc,i=a.latitude,c=a.longitude,d=a.regeocodeData.addressComponent.city,h={city:d,latitude:i,longitude:c,textData:{name:n,desc:o},keywords:u="美食"},t.setData(h),t.getPoiAround(u),e.next=16;break;case12:e.prev=12,e.t0=e.catch(1),wx.hideLoading(),console.log(e.t0);case16:case"end":returne.stop();}},e,t,[[1,12]]);}))();},4.3周边信息的显示为了能够成功使用，需要在高德平台申请得到key,并在小程序中添加key（”在高德地图开发平台得到的key”），并将下载下来的文件放置在个人的文件目录下，并在js中引入才可成功调用。原理：当前高德开放平台的周边查询api的实现机制，是使用request接口请求远程的https接口，然后返回参数中位置的某种类型的周边信息，最后再把数据动态绑定到页面。步骤：1创建地图容器，map组件的创建已经在前面index.wxml中说明。2引入高德地图微信小程序sdk3调用getPoiAround(Object)得到周边的信息，周边搜索API服务地址：URL：

/v3/place/around?parameters。这里小程序给这个url发起请求，返回用户需要的数据后，进行页面的渲染，就可以得到我们的页面显示。关键代码如下：getPoiAround:function(t){vara=this;returne(s.mark(functione(){varn,c,d,u,h,l,p,g,f,m,w,x;returns.wrap(function(e){for(;;)switch(e.prev=e.next){case0:returne.prev=0,n=o.systemInfo(),c=n.windowWidth,d=n.windowHeight,u=(750/c*d).toFixed(0),e.next=6,r.getPoiAround(t);case6:if(h=e.sent,l=h.markers,p=h.poisData,l&&l.length){e.next=13;break;}returnwx.hideLoading(),wx.showModal({content:"没有搜索到地点,换一个试试",showCancel:!1}),e.abrupt("return");case13:if(l.forEach(function(t,e){vara=p[e];t.iconPath="/images/marker.png",t.tel=a.tel.length?a.tel:"",t.photos=a.photos[0]?a.photos[0].url:"";}),a.setData({markers:l,bottomType:2,keywords:t,rpxHight:u-400,listType:2}),wx.navigateBack({delta:1}),!(g=a.data.formid)||!l.length){e.next=26;break;}returnf="最近的结果：名称："+(l[0].name||"")+"，地点："+(l[0].address||""),m={name:t,formid:g,result:f},e.next=22,o.api("login");case22:w=e.sent,x=w.code,m.js_code=x,i.postApiData("indexform",m);case26:wx.hideLoading(),e.next=32;break;case29:e.prev=29,e.t0=e.catch(0),console.log(e.t0);case32:case"end":returne.stop();}},e,a,[[0,29]]);}))();},4.4搜索栏目的实现本微信小程序在实现了可以显示周边信息的时候，为了智能化以及满足个人用户的需求，这里需要增添一个input组件，这个input组件会生成一个搜索框，当用户不需要推荐的时候，可以点击搜索框，点击后可以输入文本，同时在js文件中会触发bindinput事件，这样就可以完成逻辑层上数据的交互。bindInput:function(t){vara=this,r=t.detail.value;if(r){this.setData({searchVal:r});vari=this.data,s=i.lonlat,o=i.city;n.getInputtips(o,s,r).then(function(t){t&&t.tips&&(t.tips.forEach(function(t){vara=;List=e.getHilightStrArray(a,r);}),a.setData({tips:t.tips,isSearch:!0}));}).catch(function(t){console.log(t);});}elsethis.setData({isSearch:!1});},search:function(t){vare=t.detail.value;this.bindSearch({value:e});},formSubmit:function(t){vare=t.detail,a=e.formId,n=;this.bindSearch({value:n}),this.setData({formid:a});}});4.5路线的导航在得到自己所需要的目的地后，基本的路线导航仍是必要的。在这里考虑到不同人群使用的交通工具的不同，将导航路线分为四种，驾车，步行，公车，骑行；以及将路线规划以及所需价格在逻辑上也通过代码实现了。vare=t.latitude,a=t.longitude,i=t.latitude2,s=t.longitude2,n=t.city,o=,u=t.desc,c=[{iconPath:"/images/mapicon_navi_s.png",id:0,latitude:e,longitude:a,width:23,height:33},{iconPath:"/images/mapicon_navi_e.png",id:1,latitude:i,longitude:s,width:24,height:34}];this.setData({latitude:e,longitude:a,latitude2:i,longitude2:s,markers:c,city:n,name:o,desc:u}),this.getRoute();},onShareAppMessage:function(t){console.log(t);},changeType:function(t){vare=t.target.dataset.id;e!=this.data.cindex&&(this.setData({cindex:e}),this.getRoute());},getRoute:function(){vare=this,a=this.data,i=a.latitude,s=a.longitude,n=a.latitude2,o=a.longitude2,u=a.types,c=a.cindex,d=a.city,l=u[c],r=s+","+i,h=o+","+n;t.getRoute(r,h,l,d).then(function(t){e.setRouteData(t,l);}).catch(function(t){console.log(t);});},setRouteData:function(t,e){if("getTransitRoute"!=e){vara=[];if(t.paths&&t.paths[0]&&t.paths[0].steps){vari=t.paths[0].steps;wx.setStorageSync("steps",i),i.forEach(function(t){t.polyline.split(";").forEach(function(t){vare={longitude:parseFloat(t.split(",")[0]),latitude:parseFloat(t.split(",")[1])};a.push(e);});});}this.setData({polyline:[{points:a,color:"#0091ff",width:6}]});}elseif(t&&t.transits){vars=t.transits;s.forEach(function(t){vare=t.segments;t.transport=[],e.forEach(function(e,a){if(e.bus&&e.bus.buslines&&e.bus.buslines[0]&&e.bus.buslines[0].name){vari=e.bus.buslines[0].name;0!==a&&(i="--"+i),t.transport.push(i);}});}),this.setData({transits:s});}"getDrivingRoute"==e?(t.paths[0]&&t.paths[0].distance&&this.setData({distance:t.paths[0].distance+"米"}),t.taxi_cost&&this.setData({cost:"打车约"+parseInt(t.taxi_cost)+"元"})):"getWalkingRoute"!=e&&"getRidingRoute"!=e||(t.paths[0]&&t.paths[0].distance&&this.setData({distance:t.paths[0].distance+"米"}),t.paths[0]&&t.paths[0].duration&&this.setData({cost:parseInt(t.paths[0].duration/60)+"分钟"}));},goDetail:function(){wx.navigateTo({url:"/pages/info/info"});},nav:function(){vart=this.data,e=t.latitude2,a=t.longitude2,i=,s=t.desc;wx.openLocation({latitude:+e,longitude:+a,name:i,address:s});}});4.6转发功能的实现微信小程序实现转发功能由两种方式:一种是比较常见的，用户点击右上角转发，另一种是通过button组件触发事件实现转发。这里我们使用的是第一种方式，在官方文档中我们可以搜索到OnShareAppMessage()这个api，具体使用如下:在Page中定义该函数，设置页面的转发信息。Page({onShareAppMessage:function(res){if(res.from==='button'){console.log(res.target)}return{title:'转发标题',path:'路径',success:function(res){},fail:function(res){}}}})5后台开发5.1后端设计概要微信小程序的本质是静态显示页面，例如小型商业程序中心，我们可以看到的产品实际上是通过数据接口传输的，这些数据是在后台添加的。总之，一个小程序的三个部分：1.小程序端（显示）;2.数据接口（传输数据，以后台代码编写）;3.后台（添加各种数据并将其保存到服务器，通过数据接口向微信小程序提供数据）；其中要从数据库取数据，肯定得要去访问数据库的，你写一个服务端的程序接口，查数据库，然后指定一些参数，请求方式等等，你的小程序直接通过这个url，带上一些参数去请求你的服务端的程序，服务端程序再从数据库去取数据，返回到接口，接口再返回到你的小程序里面就可以了。5.2服务端的配置5.2.1微信小程序云开发前面的是熟悉服务器搭建的配置方式，对于不熟悉后台开发的可以使用微信小程序的云开发。开发人员可以使用云来开发和开发微信小程序和小游戏，并使用云功能而无需配置服务器。云开发为开发人员提供全面的云支持，削弱后端，操作和维护概念，不需要配置服务器，使用平台提供的API用于基本业务开发的表单，可以执行快速在线和迭代操作所使用的云服务是兼容的而不是互斥的。目前提供三种基本功能来支持：(1)云功能：在云端运行的代码，由微信私有协议自然认证，开发人员只需要编写自己的业务逻辑代码;(2)数据库：可以在小程序的前端和云功能中操作的JSON数据库;(3)存储：将云文件直接上传或者下载到小程序的前端，在云开发控制台中进行可视化管理。云功能是在云（服务器端）中运行的功能。在物理设计中，云功能可以由多个文件组成，占用一定的计算资源，如处理器内存，每个云功能完全独立，可以部署在不同的区域。开发人员不需要购买或创建服务器，而是编写功能代码并将其部署到云端以在小程序端调用它，并且还可以调用云功能。云函数的编写方式与本地定义的JavaScript方法相同，代码在Node.js云中运行。当小程序调用云函数时，定义的代码在Node.js运行时环境中执行。我们可以在云功能中执行网络查询和其他操作，就像在Node.js环境中的JavaScript一样。我们还可以通过云后端SDK使用各种服务，例如使用开发工具包中提供的数据库和存储API。基于云的云功能的独特优势是与微信登录身份验证的无缝集成。当小程序调用云函数时，云函数的传入参数被注入到用户的小程序openid中