点击上方的“Java ”，选择“设为明星”

做一个积极的人，而不是一个积极的失败者！

源代码精品专栏

预览

图像名称

图像名称

图像名称

图像名称

图片名称 1 需求排序 1.1 简介

去年我开发过一款厕所搜索APP，也感谢相关课程和书籍的支持，帮助我完成了APP的开发。今年年初微信发布了小程序，以简洁、便捷的体验进入人们的视线，作为一款功能简单、使用频率较低的APP，受到了不小的震动。虽然小程序由于功能不全，目前还没有刚发布时那么火爆，但不需要下载安装，便捷的体验也是一个优势。所以针对之前开发的厕所搜索APP，我计划开发一款相应功能的小程序，以备将来使用。

1.2 功能需求

V1.0

版本 2.0

2 设计阶段

设计流程图3 前期开发环境搭建3.1 下载小程序编辑器

工欲善其事，必先利其器。首先要下载小程序开发的编辑器并安装。最后在微信公众平台注册你开发的小程序，并获取相关的（如果没有，开发时有些功能会无法使用）。最后建议大家先看小程序的文档，有个大概的了解。如果之前已经学过相关的MVVM前端框架如Vue，学习起来会更快。

3.2 创建项目并快速开发

打开开发工具，填写相关信息，建议勾选一下，会生成一个基本的页面模板。

图像名称

创建项目后会生成一个基本的页面模板

图片名称 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，然后在编辑器项目选项配置中刷新按钮，这样调试就能正常请求了。如果自己开发访问的接口，那一定是协议。

6 预览、上传、审核

点击编辑器左侧的项目按钮，可以预览正在开发的项目，方便边开发边调试。

图像名称

开发完成后就可以上传了。在小程序开发管理界面，你可以选择刚刚提交的项目作为体验版，让身边的朋友先试用一下。注意，选择体验版后，还需要在用户身份界面绑定体验者（最多可以绑定十位体验者）。如果在体验过程中发现bug，还可以修改，毕竟还没上线呢。

7 发布

体验完之后如果发现bug可以修改，重复步骤直到所有问题解决，然后就可以上线了。点击按钮审核（我用了两天时间）。通过后你绑定的微信会推送消息提醒你。审核不代表已经发布，需要登录管理平台通过小程序手动发布审核。发布后可能因为网络原因会有一定的延迟，发布的信息在小程序里是搜索不到的。耐心等待，过一段时间就好了。

8 结论

总体来说开发难度不大，特别是对于已经熟悉 Vue 语法的同学来说。开发前先看官网介绍和开发文档，有个大概的了解。然后在网上找找小程序相关的 UI 框架，搭配使用，再看腾讯或者高德地图关于小程序的地图 API 文档。

目前的功能有些简单，但对于实用来说已经足够了，有时间会进行改进。

项目地址