微信小程序菜单开发 第1篇
然后，在父页面中使用封装好的组件
注意：要传入父页面通过接口获取到的数据给封装好的组件
到此，就能得到开头的那种效果了，如果需要进一步封装，可以增加一些功能。
微信小程序菜单开发 第2篇
wxml页面中这里只是做了个简陋的样子，具体想要展示成什么效果请根据需求进行编写，比如右侧加上展示的图片、可跳转的
例如：增加图片显示
样式文件我使用的是less格式，如何使用less插件、快速编写样式，请查看以下博客：
微信小程序菜单开发 第3篇
创建一个叫做CategoryRolling的组件，方便调用，你也可以叫其他名字
如何快速创建组件请参考：
微信小程序菜单开发 第4篇
首先，整个项目使用uniapp来开发的。
接下来，就开始详细讲解该页面的每个布局和功能。值得注意的是此页面是需要占用微信最上面（最右边分享和home）胶囊按钮区域。故需要在uniapp项目下文件中的pages字段中添加：
_navigationStyle_: _custom_ 用于定义页面的导航栏样式。具体来说，它表示自定义导航栏，即小程序将不再使用系统默认的顶部导航栏，而允许开发者自行设计和实现导航栏的外观和功能。
首先定义顶部搜索框的响应式尺寸变量
接下来则需要用()微信小程序提供的 API来获取当前页面右上角胶囊按钮（小程序标题栏中的菜单按钮）的布局位置信息。
得到具体数值后，定位搜索框位置和样式
首先地址文本和右边的点单外卖是左右分布的（地址信息从数据库中拉取，并且默认进入点餐页面是选择在点单处）
由于商家数据是由商家在后台管理系统中上传（这里的后台也是由微信小程序实现，如何实现两个小程序云环境共享，可以参考上一篇文章。），这里需要定义商家信息的响应式变量：
从数据库admininfo中获取商家信息
注意：授权的APPID是用户端的APPID（APPID就是上面创建小程序时让你保存的APPID）
在白名单中田间的网址：
注意：应用选择你刚刚创建的应用，配额不要超过限制即可
需要分配配额的服务列表：
在uniapp项目中的文件的源码视图/* 小程序特有相关 */中添加：
今天就写到这，如有疑问可以留言哈，看到都会解答~