17666030540

网站建设 APP开发 小程序

KNOWLEDGE/知识

分享你我感悟

您当前位置>主页 > 知识 > 小程序 >

借助小程序·云开发制作校园导览小程序丨实战

发表时间:2020-05-14 21:33

文章来源:快明科技

浏览次数:

 
 

导语

       偌大校园,寻路犯难。没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景。

 

背景

刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收到那么一张卡通绘制的校园地图:

 

这种静态图片可以让我们快速地了解到所需的地理位置信息,但使用和思考过后,会发现以下问题:

(1)地理位置信息粒度高,而同一个地点通常具有多个服务功能和别名,增加认知成本。

(2)地理位置信息变更导致地图信息过时。一旦服务网点迁移或更名,需要重绘地图,带来一定的延迟和信息滞后。

(3)入口较深。存储在手机上的地图并不是那么好找,尤其是随着时间的推移。

(4)无法准确的定位当前所处位置,需要寻找参照物,这是静态地图致命的缺点。

(5)缺乏更为详细的地点介绍,只能在有限的画面里堆积内容。

为此,我设计了一款校园导览应用,用当下流行的微信小程序结合云开发能力,低成本高效能地解决了以上问题。此外,我还根据对市面上的同类应用进行设计上的研究,在界面和交互设计上做功夫。下面我会进行简短的介绍。

小程序简介

 

南苑导览是一款由学生独立开发的以地图为载体,提供中山大学南方学院(南苑)具体地点的位置信息、导航、校园历史及文化介绍的小程序。旨在解决校园导航标识不到位、地图形式低效单一、信息设计不够好等问题,为来南苑新人和游客提供更加完美的出行体验。

仅需修改地图配置文件,即可适配任意场景(校园、景区)的小程序个性化地图定制。技术栈:原生小程序 TypeScript gulp vantUI 云开发能力。2019 微信小程序高校大赛 · 华南赛区二等奖。

开发

(1)Config配置:

   
  1. ├─ src

  2. ├─── config

  3. ├───── index.ts // 入口

  4. ├───── cloud.ts // 云开发相关配置

  5. ├───── info.ts // 应用介绍信息

  6. ├───── markerStyle.ts // 地图marker样式

  7. ├───── panorama.ts // 第三方全景地图配置(个人类型无webview权限,默认关闭)

  8. └───── secret.ts // 腾讯地图key等敏感信息(可选)

 

使用云数据库:

 

   
  1. // markers表 数据格式

  2. {

  3. _id: "5ce8fe1c29c7a8581bc1e989", // id,云数据库录入upsert更新用

  4. type: "生活服务", // 场景名称

  5. icon: "shfw", // marker默认图标,为场景名称拼音缩写

  6. scale: 15.0, // 场景在地图上的缩放值,可选。已废弃,用includePoints代替

  7. position: 0, // 指定在各个场景中的排列顺序

  8. data: [ // 该场景下的地点markers

  9. {

  10. name: "孙中山铜像", // 地点名称

  11. short_name: "铜像", // 名称缩写

  12. desc: "中山铜像...", // 描述信息

  13. logo: "tx", // 地点logo,缩写拼音, 如作各院系logo展示

  14. icon: "tx@2", // 自定义marker图标,“@”后数字为图标相较于默认图标的缩放值

  15. images: 3, // 图片数量,作云存储拼接路径用(cloud://cloudRoot/1教/n.jpg)

  16. panorama: 0, // 全景场景id

  17. latitude: "23.635875", // 经度

  18. longitude: "113.678965", // 纬度

  19. contact: { phone: "020-123456", address: "出门左转" } // 联系方式

  20. }

  21. ]

  22. }

使用 excel 进行数据维护,通过 python pandas 进行数据清洗,使用 jsonlines 库输出符合云数据库的 JSON Lines 格式文件,以 upsert 形式导入数据库。

数据更新流程如下:

 

加载并清洗数据 使用 request 或云数据库进行异步数据请求时。由于 app.js 中的 onLaunch 和首页 index 的 onLoad 的执行顺序不是固定的,所以如果首页有基于 app.js 请求的数据时要注意生命周期的问题。

 

   
  1. // index

  2. async loadMarkers() {

  3. let markers;

  4. if (app.globalData.config.debug) {

  5. // 本地

  6. markers = mockMarkers;

  7. } else {

  8. // 云

  9. await wx.cloud

  10. .callFunction({

  11. name: "loadMarkers"

  12. })

  13. .then((res: any) => {

  14. markers = res.result.data;

  15. });

  16. }

  17. app.globalData.markers = markers;

  18. }

  19.  

  20. clearMarkers(markers: any[]) {

  21. let num = 0; // 每个marker都要有一个id

  22. for (const i of markers) {

  23. for (const j of i.data) {

  24. j.id = num;

  25. num = 1;

  26. j.iconPath = `/assets/images/markers/${j.icon ? j.icon : i.icon}.png`;

  27.  

  28. ...

  29.  

  30. // 自定义气泡样式

  31. j.callout = Object.assign(

  32. { content: j.short_name ? j.short_name : j.name },

  33. app.globalData.config.markerStyle.calloutStyle

  34. );

  35. }

  36. }

  37. return markers;

  38. }

巧用 MapContext: 你不需要去手动地为每个场景设置 scale,用 includePoints 即可让地图视野自动覆盖到当前所有 POI。 你也不需要去手动地去获取权限设置用户位置,用 moveToLocation 即可轻松定位。

   
  1. // index

  2. onReady() {

  3. this.setData!({

  4. mapContext: wx.createMapContext("map")

  5. });

  6. }

  7.  

  8. includePoints(padding: number) {

  9. this.data.mapContext.includePoints({

  10. padding: [padding, padding, padding, padding],

  11. points: this.data.markers

  12. });

  13. }

  14.  

  15. locate() {

  16. this.data.mapContext.moveToLocation();

  17. }

使用云存储管理图片:

添加新图片时,直接修改 images 字段即可,文件夹目录为地点名称。

   
  1. <!-- 地点详情页 轮播图 -->

  2. <swiper

  3. indicator-dots="{{imgUrls.length > 1}}"

  4. autoplay="{{true}}"

  5. interval="3000"

  6. duration="1000"

  7. >

  8. <block wx:for="{{imgUrls}}" wx:key="{{index}}">

  9. <swiper-item>

  10. <image

  11. src="{{item}}"

  12. class="slide"

  13. data-id="{{index}}"

  14. bindtap="previewImage"

  15. />

  16. </swiper-item>

  17. </block>

  18. </swiper>

   
  1. for (let i = 0; i < marker.images; i ) {

  2. imgUrls.push(

  3. this.data.cloudRoot

  4. "images/"

  5. (marker.short_name || marker.name)

  6. "/"

  7. i

  8. ".jpg"

  9. );

  10. }

 

交互设计

如果你在微信上搜索「导览」二字,看到的小程序大多都是一个模板,页面层级深,界面拥挤,列表式的信息展示并不符合我们日常使用地图 APP 的经验。为此,我做出了多项改良,效果如下:

 

更好的视野 - 自定义导航栏与侧边栏 因为只有特定的页面需要使用自定义导航栏,所以只需要设置页面级的 config:
   
  1. "navigationStyle": "custom"

 

接下来获取胶囊按钮位置信息:

   
  1. bounding: wx.getMenuButtonBoundingClientRect();

 

动态地设置样式:

   
  1. <!-- SIDE MENU -->

  2. <view

  3. class="sidebar"

  4. hidden="{{toggleRoutes}}"

  5. style="top:{{bounding.height bounding.top 10}}px"

  6. >

  7. ...

  8. </view>

 

FAB 与侧边栏设计:
这里我把最主要的定位、搜索和路线推荐功能在视觉上成为整体,通过点击 FAB 弹出菜单选项。侧边栏的地点场景菜单设计为下拉滚动,注意使用半遮设计来提醒用户滚动。同时,为了让界面更加精简,侧边菜单会在点击 FAB(Float Action Button)和母按钮时 toggle 显示与隐藏。

 

用点击代替滚动 - scroll-into-view 在路线面板和搜索页中,使用到了 scroll-view 组件,利用其 scroll-into-view 特性,实现点击代替滚动的操作,同时也能起到提醒后置选项的作用。

 

   
  1. windowWidth: wx.getSystemInfoSync().screenWidth;

   
  1. <scroll-view class="route" scroll-x scroll-into-view="{{focusPointId}}">

  2. <view

  3. class="points"

  4. style="width:{{routes[routeIndex].count * 140 < windowWidth ? windowWidth : routes[routeIndex].count * 140}}rpx;"

  5. >

  6. ...

  7. </view>

  8. </scroll-view>

 

更好的视角- 全景功能 结合 web-view 和全景服务平台,可以为一款地图导览应用增色不少。

 

总结

云开发让小程序开发者无需搭建服务器,使用平台提供的 API 即可快速地进行业务开发、上线和迭代,免费的基础版完全可以满足中小应用的需求。「南苑导览」借助腾讯云开发能力,上线以来,帮助到了许许多多的新生和来客,实现了产品价值。最后,期望官方早日开放自定义地图底图能力,让开发者能够个性化地图,探索出更多的应用场景!
 

本文由快明科技整理发布,如需转载请联系852657156@qq.com

相关案例查看更多