欢迎来到258分享网,纯净的网络源码分享基地！

登录注册 QQ登录

金币充值帮助中心

258资源分享网

热门搜索：　织梦　农业种植　农业　安全设置　官方

258资源分享 > 建站学院 > 微信开发 > 微信小程序--【小明带你找厕所】项目开发全过程

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

推荐文章

推荐下载

HTML5响应式自适应网咯设计

2020-05-12 浏览：789

HTML5自适应律师工作室类网

2020-04-04 浏览：654

高端HTML5响应式企业通用网

2020-05-06 浏览：560

html5响应式外贸网站英文版

2020-05-08 浏览：545

HTML5影视传媒文化公司类网

2020-05-12 浏览：543

微信小程序--【小明带你找厕所】项目开发全过程

发布时间:2020-11-06

1 需求梳理

v1.0虽然已经满足实际需求，但是在ios和android两个平台显示的效果还是不尽相同，特别是地图上面路径规划功能。为此V2.0主要使用小程序自带的地图组件功能完善周围厕所撒点功能、点击marker功能、详细文字描述路径规划功能、以及小程序作者详细介绍 V1.0 版本 V2.0 版本

3 开发前环境搭建

工欲善其事必先利其器，首先肯定是下载小程序开发的编辑器，安装完成，最后在微信公众平台注册开发的小程序，获取相关的keyId(如果没有，开发时有些功能无法使用)。最后建议，把小程序的文档说明看一遍，大致有个印象，如果你本来就学过react、vue等相关mvvm前端框架，那么学起来更快。打开开发工具，填写相关的信息，建议勾选上quick start，他将会生成基本的页面模板。

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

4 项目结构组织

├── images //项目用到的图片资源 ├── pages //页面结构 │ ├── index //主页面结构显示列表信息 │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── location //信息在地图上撒点 │ │ ├── location.js │ │ ├── location.json │ │ ├── location.wxml │ │ └── location.wxss │ ├── location-detail //详细的文字路径描述 │ │ ├── location.js │ │ ├── location.json │ │ ├── location.wxml │ │ └── location.wxss │ ├── author //小程序关于界面 │ │ ├── author.js │ │ ├── author.json │ │ ├── author.wxml │ │ └── author.wxss ├── readme //编写readme需要的相关资源图片 ├── resource //第三方资源包 │ ├── lib │ ├── map ├── utils //工具类方法 ├── app.js ├── app.json ├── app.wxss ├── README.md

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

本文标签

程序微信厕所小明带你全过程项目开发

上一篇：微信小程序下拉滚动选择器picker绑定数据的两种方式
下一篇：微信小程序--左滑右滑的乐趣