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

导语

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

背景

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

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

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

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

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

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

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

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

小程序简介

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

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

开发

(1)Config配置：

├─ src

├─── config

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

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

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

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

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

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

使用云数据库：

// markers表 数据格式

{

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

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

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

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