微信版小明找新V2.0

微信版小明找厕所V2.0升级为本地微信自带的地图路径规划、在地图上显示所有marker点、添加关于页面

 

 

 

先不废话直接扫描体验

预览

1 需求梳理 1.1 前言

在去年的时候、已经使用react-native开发过找厕所APP https://github.com/liumingmusic/react-native-full-example网站测速直接扫描体验

预览

1 需求梳理 1.1 前言

在去年的时候、已经使用react-native开发过找厕所APP https://github.com/liumingmusic/react-native-full-example在这里也要感谢vczero的react-native相关课程和书籍的支持才完成APP开发。今天年初微信发布了小程序以简约方便体验走进了人们的视线作为一款功能简单使用频率低的APP是一种很大的冲击虽然现在小程序以功能的不健全不像刚刚发布时那么火但是它的无需下载、无需安装体验方便也是一种优势所以对于之前开发的找厕所APP打算开发出一款对应功能的小程序方便以后生活使用。

1.2 功能需求

V1.0 版本

 打开直接定位

 厕所信息已列表方式进行展示按当前定位点最近进行排序

 默认显示1000内最多是个公共厕所

 列表显示厕所名称、位置信息和步行距离

 列表页面具有刷新功能以避免网络延迟获取不到数据

 显示列表进行点直接打开微信自带地图网站建设维护获取不到数据

 显示列表进行点直接打开微信自带地图可以根据选择是否显示路线和打开本地地图APP进行导航

V2.0 版本

 可以在地图上面展示所有厕所的位置并且标记

 直接在小程序端进行路径规划ios和android一样

 默认选择步行方式

 制作关于界面

2 设计阶段

3 开发前环境搭建 3.1 小程序编辑器下载

工欲善其事必先利其器首先肯定是下载小程序开发的编辑器安装完成网站建设维护安装完成最后在微信公众平台注册开发的小程序获取相关的keyId(如果没有开发时有些功能无法使用)。最后建议把小程序的文档说明看一遍大致有个印象如果你本来就学过react、vue等相关mvvm前端框架那么学起来更快。

3.2 创建项目、快速开发

打开开发工具填写相关的信息建议勾选上quick start他将会生成基本的页面模板。

之后创建项目就会生成基本的页面模板

4 项目结构组织 ├── images //项目用到的图片资源 ├── pages //页面结构 │   ├── index //主页面结构 显示列表信息 │   │   ├── index.js │   │   ├── index.json │   │   ├── index.wxml │   │   └── index.wxss │   ├── location //信息在地图上撒点 │   │   ├── location.js │   │   ├── location.json │   │   ├── location.wxml │   │   └── location.wxss │   ├── about //小程序关于界面 │   │   ├── about.js │   │   ├── about.json │   │   ├── about.wxml │   │   └── about.wxss ├── readme //编写readme需要的相关资源图片 ├── resource //第三方资源包 │   ├── lib │   ├── map ├── utils //工具类方法 ├── app.js ├── app.json ├── app.wxss ├── README.md 5 开发阶段

逻辑不是很难(参看源码即可)只需要考虑到没有权限、没有网络和没有数据的页面显示情况的特殊处理。这里需要提醒的是数据来源是腾讯提供的周围搜索所以需要在小程序中绑定请求的url然后在编辑器项目选项配置中刷新按钮调试才会正常请求。如果自己开发接口进行访问一定要是https协议。

6 预览、上传、审核

在编辑器左边的项目按钮可以对正在开发的项目进行预览这样就可以边开发边调试。