1.仿香哈菜谱界面设计-微信小程序源码
2.仿香哈菜谱微信小程序的底部有5个导航标签:学做菜、头条、美食圈、消息、我的,标签导航选中时导航图标和导航文字都会变为红色
3.打开微信开发者工具,在该项目的pages目录下新建5个目录,分别为index、head、food、message、mine,对应学做菜、头条、美食圈、消息、我的
4.在该小程序的公共设置app.json文件配置页面路径以及配置窗口表现
5.在该小程序的公共设置app.json文件的导航标签tabBar下分别设置5个导航,并设置导航栏属性
6.“学做菜”界面中海报轮播的图片,在微信小程序里有专门的swiper滑块视图组件来实现这个效果,并且在swiper滑块视图组件里有一个搜索框
7.宫格导航有菜谱分类、视频、美食养生、闪购4个导航
8.微信小程序作为客户端,它的数据来源于服务端。由于香哈菜谱没有免费对外开发api,所以只有模拟服务端提供的香哈头条列表的数据,有了数据,页面才能动态地进行渲染。
9.香哈头条里有菜谱的图片、美食名称、分类、浏览数量以及评论数量,因为香哈头条列表信息在很多页面都是同样的展现方式,就可以把它制作成模板,达到一次制作、多次使用的效果。
1