地铁地图开源小程序

本项目包含“地铁地图”微信小程序源码，并介绍如何基于此源码配置并发布自己的地铁小程序。

截屏

概述

很多地铁爱好者和设计师都绘制了自己风格的地铁地图，但却不懂编程，无法提供高效的展示程序。

本项目以「地铁通-」开发的《地铁地图》微信小程序作为演示，详细介绍如何使用本程序提供的开源代码注册、配置和发布自己的地铁小程序。

具体步骤

注册小程序账号

只要进入，按照提示填写信息并提交相应材料，就可以拥有自己的小程序账号。

应用程序小程序

注册成功后，登录小程序管理平台，申请你的小程序、管理权限、查看数据报表、发布小程序等操作。

当心

安装小程序开发工具

进入开发者工具下载页面，根据你的操作系统下载对应的安装包进行安装。

打开小程序开发者工具，通过微信扫描二维码登录开发者工具。

别担心，我们没有编写任何代码，我们只是使用这个开发工具来导入这个项目的源代码。

选择开发者工具右侧的+，然后选择，输入项目名称，源代码地址，以及之前申请的。

按下按钮之后，整个导入源代码生成自己的小程序的过程就完成了。

配置小程序源代码

配置页

打开app.json可以修改App名称。打开\\.json可以更改主页。

"navigationBarTitleText": "地铁图"

配置城市列表

演示程序已经覆盖了所有有地铁的城市，如果只想发布部分城市，可以打开data\city.js，将剩余城市删除。

{ key: "bj", lat: 39., lng: 116., name: "北京", : "", : "", py: "bj", : "" }

{ key: "sh", lat: 31., lng: 121., name: "上海", : "", : "", py: "sh", : "" }

配置地铁徽标

你可以将demo中的图标替换为你自己绘制的各个城市的地铁标志。

徽标

徽标

配置地铁地图 URL

考虑到地铁地图更新的便捷性，本demo将所有线路图放在服务器上，用户选择城市后，会从服务器下载图片并缓存。（缓存时间为10分钟）

需要将demo的URL改成你自己的URL，打开data\city.js，将其改成你自己的服务器URL。

：''

demo图片存储地址如下：

（北京地铁图）

（上海地铁地图）

预览并发布小程序

预览小程序

一切配置工作已经完成，下面我们在手机上测试一下我们的小程序。

点击开发工具右上角按钮，生成预览二维码，可以用微信扫描进行安装测试。

上传小程序

测试OK之后，我们需要先将小程序代码上传到微信服务器。点击开发工具右上角的按钮，输入版本号，比如1.0.0，即可上传代码。（如果找不到按钮，可以点击开发工具右上角的>>图标）

提交微信评论

上传成功后，我们需要登录小程序管理平台，将代码提交给微信团队审核。

发布小程序

提交后1-2个工作日内完成审核，通过审核后其他人可以在微信中搜索并使用你的小程序。

当心

如果小程序无法正确显示电路图，请检查：

其他

如何赚钱

目前最简单的方式就是将微信广告集成到小程序中，微信规定小程序用户数1000以上即可开通广告。

登录小程序管理平台，进入“推广”=>“流量大师”页面申请开通。

大概的广告单价可以简单理解为0.02元/展示，也就是说如果每天有1000个广告展示，那么每天的收入大概就是20元左右。

实际显示效果如下图：

如何实现换乘查询及车站信息功能

我们已经在另外一个小程序《小地铁通》中实现了这些功能，具体怎么开放还在考虑中。

地铁-

目前小程序只能实现相对轻量的功能，完整功能的App可在此下载。

iOS 下载 下载

祝你好运

玩得开心，请给我反馈。如果您发现任何错误（对于新手来说，这是不可避免的），请指出它们，如果您可以包含一个修复程序，我将不胜感激！

欢迎大家点赞或者点赞，表达你们的支持，这对我以及我项目的发展都是莫大的帮助，再次感谢。

电子邮件：

QQ聊天群：

执照

麻省理工学院