微信小程序案例3——仿香哈菜谱微信小程序
文章目录
- 项目步骤
-
- 第一部分 导航栏设计
-
- 第一步：
- 第三步：
- 第四步
- 第五步：
- 第二部分：
-
- 第1步：轮播图
- 第2步 ：宫格导航
- 第3步：香哈头条初始化数据
- 第4步：香哈头条列表渲染及绑定数据
- 效果
- 讲解
-
-
- 1 swiper轮播图
- 2 WXML 模板
- 3 WXML引用
-
- import引用
- include引用
- 4 WXML 列表渲染
-
- wx:for列表渲染单个组件
- block wx:for列表渲染多个组件
- wx:key指定唯一标识符
- 布局讲解
-
项目步骤
第一部分 导航栏设计
第一步：
新建一个xhcp项目
第二步：
打开App.json配置文件，在pages数组里添加5个页面路径:“pages/cook/cook”“pages/
headline/headline”“pages/food/food”“pages/message/message”pages/me/me”，保存后会自动生成
相应的页面文件夹;删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹。
app.json
{
"pages":[
"pages/cook/cook",
"pages/headline/headline",
"pages/food/food",
"pages/message/message",
"pages/me/me"
]
}