对应的git地址：https://gitee.com/ling-xu/wx-1-hash-menu

一，底部导航标签设计

第一步：素材和页面准备：

将所需要的图片素材放置到pages文件夹下，然后在app.json中设置五个页面，把两个旧的页面删除，设置标题栏样式：
图片素材我放这里：

链接：https://pan.baidu.com/s/1M9NTIP0_o3sp_EA1aelpTw
提取码：a8a7

第二步：设置底部导航标签

二，宫格导航的设计

三，自定义数据

模拟来自服务器的数据：在cook.js文件中：
利用onload生命周期函数，在页面的第一次加载时初始化数据：
这里创建了一个数组，里面有5个对象

data:{array:[]},onLoad:function(options){var array = this.initData();this.setData({array:array});},initData:function(){var array = [];var object1 = new Object();object1.img = '../images/list/food-1.jpg';object1.title='爱心早餐';object1.type='健康养生';object1.liulan='20696浏览';object1.pinglun='7评论';array[0] = object1;var object2 = new Object();object2.img = '../images/list/food-2.jpg';object2.title='困了只想喝咖啡';object2.type='家庭医生在线';object2.liulan='29628浏览';object2.pinglun='13评论';array[1] = object2;var object3 = new Object();object3.img = '../images/list/food-3.jpg';object3.title='橘子吃多变小黄人';object3.type='家庭医生在线';object3.liulan='19585浏览';object3.pinglun='6评论';array[2] = object3;var object4 = new Object();object4.img = '../images/list/food-4.jpg';object4.title='搜狐新闻，手机用久了';object4.type='广告';object4.liulan='4688浏览';object4.pinglun='4评论';array[3] = object4;var object5 = new Object();object5.img = '../images/list/food-5.jpg';object5.title='困了只想喝咖啡';object5.type='家庭医生在线';object5.liulan='29628浏览';object5.pinglun='13评论';array[4] = object5;return array;},

四，由自定义的数据进行列表渲染

现在进行列表的渲染，其实和vue的列表渲染差不多的

五，将这个列表渲染制作成模板

小程序学习笔记（6）-菜谱小程序的制作相关推荐

微信小程序学习笔记2——一些小程序列表
[高频使用] 美团外卖滴滴公交查询车来了大众点评+ 京东购物摩拜单车滴滴出行DiDi 携程酒店机票火车票 [旅行] 驴妈妈门票预订飞常准查航班海南航空微应用南航e行去哪儿出行朋友家 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
小程序学习笔记（1）
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到组件是具有一定的功能的代码的集合移动端适配: 物理像素:是图 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
【小盐巴学习笔记】—美团吃饭哪家强？Python词云分析告诉你
[小盐巴学习笔记]-美团吃饭哪家强?Python词云分析告诉你效果图前言一.爬虫分析 1.分析网址 2.分析数据二.完整代码 1.爬取美团牛排店评论 2.绘制词云图 3.词云分析总结效果图 ...
【C#】 WinForm窗体应用程序学习笔记（一）
WinForm窗体应用程序学习笔记(一) 由于控制台应用程序的运行结果都是通过控制台输出的,不能提供良好的用户体验,为此,C#提供了WinForm窗体应用程序.WinForm具有一系列丰富的控件,用于 ...
Linux进程线程学习笔记：运行新程序
Linux进程线程学习笔记:运行新程序周银辉在上一篇中我们说到,当启动一个新进程以后,新进程会复制父进程的大部份上下文并接着运行父进程中的代码,如果我们使新进程不运行原父进程的代码,转而运行另外一 ...

小程序学习笔记（6）-菜谱小程序的制作