微信小程序开发教程

写在前面

最近公司业务扩展，启动了微信小程序项目。我有幸参与其中开发，从需求调研到开发设计，从测试验证到部署上线，亲历了从无到有的过程，也熟悉了小程序的基本开发流程。问过百度，求过大神，踩过坑，也写出不少的bug，总而言之最后算是顺利保证了项目的进度。所以，打算把这段时间小程序的开发，整理成文档，按照一个完整项目，陈述一段开发过程，给后来进行小程序开发的同学参考或者是借鉴。

功能展示

一：首页布局

该模块主要运用小程序scroll-view，navigator，swiper实现了页面的上下滚动定位，菜单滑块，以及页面跳转等功能

二：地址定位

该模块主要运用小程序API和百度地图API相互结合，实现当前定位，以及当前区域内的地址模糊匹配功能

三：首页搜索（模板应用一）

该模块主要运用小程序模板功能，实现页面嵌套，降低了页面的复杂度，提高了程序的健壮性

四：首页过滤（模板应用二）

该模块主要运用小程序模板功能，实现页面嵌套，降低了页面的复杂度，提高了程序的健壮性

五：详情页选项

该模块主要运用swiper标签，实现了滑块与选项之间的动态关系切换的功能，以及模板的再次应用

六：详情页菜单

该模块主要实现了侧边栏与内容页面的动态关联，以及金额计算等功能

七：订单页面

该模块主要实现了列表页面的渲染

八：我的

该模块主要实现了微信授权登陆以及登陆用户信息的获取

九：二维码分享

该模块主要实现了线下扫面二维码直接跳转小程序的功能

十：小程序推送

该模块主要实现了由小程序发起的微信推送功能

十一：未完成功能，待续…

开发前的准备

《老子》中有言：“合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下”。所以，在小程序开发之前，必要的基础知识和基本技能是必须熟悉与掌握的。小程序的官方文档，是我们开发前进行技术扫盲的重要一步。内容不多，只需要把官网的简易教程篇幅看完就足够应付本套教程接下来的开发了，阅读时间加上动手时间不足半个小时。下面我把网址给大家帖出来，以便大家直接访问（https://developers.weixin.qq.com/miniprogram/dev/）

当大家看完官网的简易教程之后，基本上已经掌握了如何创建一个小程序项目，以及小程序的目录结构，接下来就开始我们美团外卖小程序之旅吧，十天时间，让你开发出一个完整成型的小程序项目！

关注本人公众号，第一时间获取最新文章发布

特别感谢

项目开发之前，有幸在github上找到一位前辈所写的仿美团外卖小程序，从上面得到颇多的启发与灵感。所以本着不再重复造轮子的思想，就再次借鉴该前辈的项目，在此基础上补充功能，细化页面，最终给大家呈现一个高仿真的美团外卖小程序。在此贴上前辈代码地址，以示致敬（https://github.com/tzc123/wx_project_meituan）