原文链接最近，小程序的开发越来越火。作为各产品线额外的服务入口，以其轻快、强大的社交链接吸引了大量用户和用户。开发商。业界开发框架层出不穷，wepy、mpvue、taro等，都在朝着更快、更强大的方向发展，大有统一H5、微信、支付宝、百度、今日头条小程序的大势。本文旨在探讨基于mpvue框架的地图小程序开发思路，分享总结。话不多说，先体验一下：github源码地址：https://github.com/WarpPrism/...vue框架开发小程序。mpvue最近升级到2.x版本，支持微信、支付宝、百度、今日头条小程序。与传统方式相比，mpvue开发有以下优势：完善的组件化开发能力：提高代码复用性完整的Vue.js开发体验便捷的Vuex数据管理解决方案：轻松构建复杂应用快速的webpack构建机制：自定义构建策略和开发阶段hotReload支持使用npm外部依赖使用Vue.js命令行工具vue-cli快速初始化项目H5代码转换编译成小程序目标代码从个人体验来看，还是很顺畅的，传统的Seamlessly从web应用开发转向小程序开发，基本零门槛。需要注意的是小程序的局限性和与vue的区别：小程序使用相对像素rpx进行样式布局，不支持部分css选择器。目前，只有#id|类|标签|标签，标签|::after::Before，所以要特别注意联合生命周期，mpvue混合了小程序和vue的生命周期，详见http://mpvue.com/mpvue/#_3，还是有很多坑这个地方，比如在小程序中，页面卸载的时候，vue实例并没有被销毁。这样一来，下次进入该页面时，页面状态就不会发生变化。卸载时必须手动重置状态等。mpvue会封装小程序的数据对象，一般以$mp开头，比如event.$等小程序的组件有区别，比如mp.detail.target和vue成分。不要以为vue组件的特性就可以用，比如slots、异步组件等，最好不要混淆vuestore和wxlocalstorage，根据不同的需求选择不同的。存储方式不使用vue路由，而是使用小程序原生的导航机制。然后，我们搭建开发环境，mpvue脚手架开箱即用：#全局安装vue-cli#一般$npminstall--需要sudo权限globalvue-cli@2.9#根据mpvue-quickstarttemplate#新手可以一路回车选择默认的$vueinitmpvue/mpvue-quickstartmy-project#安装依赖，开始吧$cdmy-project$npminstall$npmrundev接下来完善文件构造并添加config、store、mixins等模块，如图：app.json是小程序专用文件，还需要完善：{"pages":["pages/citylist/main","pages/citydetail/main"],"permission":{"scope.userLocation":{"desc":"您的位置信息将用于显示小程序位置界面的效果"}},"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#eee","navigationBarTitleText":"全球地铁，全程为你","navigationBarTextStyle":"black"}}然后就可以愉快的写Vue代码了，点击一个页面，点击另一个页面，组件，store，数据-驱动，随便你，有腾讯地图+小程序，我们重点说说地图的接入，腾讯地图为小程序提供了两个对接端口，一个是个性化的地图展示，一个是专用的SDK，两者一起完善地图小程序生态(1)个性化地图展示需要开发者注册并申请一个开发者密钥(key)，并在管理后台绑定小程序，然后设置个性化地图的样式，才可以使用：查看旅游指南其中map是小程序的原生组件，原生组件脱离了WebView的渲染过程，其级别最高。因此，无论z-index是多少为页面中的其他组件设置的，不能叠加在原生组件上，说白了，原生组件是微信客户端提供的，不属于浏览器自带的，为此，小程序提供了一个cover-view和cover-image组件，可以叠加在一些原生组件上，这两个组件也是原生组件，但是使用限制和其他原生组件不一样，作者因为这个坑浪费了很多时间，以及有时候开发工具是可以用的，但是真机上的组件完全乱七八糟，所以还是要在真机上调试。对于原生组件，不要使用太复杂的css，因为它的很多css属性都没有得到很好的支持。map可以定义多个参数，经纬度就不用说了，scale是指缩放比例，也就是地图的比例尺，polyline在地图上绘制折线，markers是用来在地图上标记点的，show-location是用于显示用户的位置，show-Compass显示一个指北针。(2)专用SDK，目前提供这些能力：search(options:Object)位置搜索，搜索周边poi，如：“酒店”、“餐饮”、“娱乐”、“学校”等。getSuggestion(options:Object)用于获取输入的关键字补全和提示帮助用户快速输入reverseGeocoder(options:Object)提供从坐标到坐标位置的文本描述的转换。输入坐标返回地理位置信息和附近的poi列表。geocoder(options:Object)提供从地址描述到位置坐标的转换，这与反向地理编码过程正好相反。direction(options:Object)提供驾车、步行、骑行、公交的路线规划能力getCityList()获取全国城市列表数据getDistrictByCityId(options:Object)通过城市ID返回城市下属的区县:Object)计算一个点到多个点的步行和行车距离我们使用公共交通路线我们以规划为例（以下代码简化）：第一步，初始化地图SDK对象importconfigfrom'@/config'从'../../assets/lib/qqmap-wx-jssdk.importQQMapWX.js'//这里是解压版的代码constQQMapSDK=newQQMapWX({key:config.qqMapKey||''})query在上一页传入，坐标是浮点数，可以通过geocoder接口获取。this.fromLocation={纬度：+query.from.split(',')[0]||-1，经度：+query.from.split(',')[1]||-1}this.toLocation={纬度：+query.to.split(',')[0]||-1，经度：+query.to.split(',')[1]||-1}//查询地图路线queryMapRoutine(){QQMapSDK.direction({mode:'transit',//'transit'（中转路线规划）//如果from参数不填，则默认当前地址来自：this.fromLocation,to:this.toLocation,success:(res)=>{控制台。log('路线规划结果',res);让路线=res.result.routes;this.routes=routes.map(r=>{//分别解析每条路由规划returnthis.parseRoute(r)})console.log('parsedroutes',this.routes)}})}第三步，路由解析，生成路线描述等//解析路线，包括距离、时间、描述、路线、起点终点等parseRoute(route){letresult={}//出发时间result.setOutTime=formatTime(newDate())result.distance=route.distance<1000?`${route.distance}m`:`${(route.distance/1000).toFixed(2)}km`result.duration=route.duration<60?`${route.duration}minutes`:`${parseInt(route.duration/60)}hours${route.duration%60}minutes`result.desc=[]//每条路线分为很多步，例如比如先走路，再坐公交，再坐地铁等。route.steps.forEach(step=>{//if(step.mode=='WALKING'&&step.distance>0){//result.desc.push(`朝${step.direction}走${step.distance}米`)//}if(step.mode=='TRANSIT'&&step.lines[0]){letline=step.lines[0]if(line.vehicle=='BUS')line.title=`公交车-${line.title}`if(line.vehicle=='RAIL')line.title=`铁路`result.desc.push(`${line.title}:${line.geton.title}—>${line.getoff.title}，途经${line.station_count}站`)}})result.polyline=[]result.points=[]//得到每一步的折线，即路线图for(leti=0;i广州塔15公里1小时地铁5号线广州火车站->珠江新城，乘坐地铁3号线6站珠江新城->广州塔，1站，我们将通过direction接口执行一个简单的路线规划功能，然后将生成的数据绑定到地图组件上，一个简单的小程序就做好了，是不是很简单呢？当然，如果你想做的更好，还得调用其他类似的接口，逐步完善细节更多实现请参考源码和小程序本身。如果对你有帮助，可以star支持。另外，这里还有一个音频web应用，发布在gitee页面http://crystalworld.gitee.io/...有兴趣的朋友可以看看，我会加上开发教程和源码以后有空再码，再码一次分享。
