微信小程序开发实战（第2版）入门--【开发实战（第2版）】_美食列表"微信小程序黑马程序员

微信小程序开发实战（第2版）目录集链接在此：

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

视频学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。
选择原因参见《详细解析黑马微信小程序视频–【思维导图知识范围】》
在本文中，比较详尽的分析了视频各集的知识点。

教材选择

本系统的由来呢，就是收到了《微信小程序开发实战（第2版）》这本书。

下载了这本书的案例之后，发现案例比第一版精致太多了，而且很多的案例都用了服务端（node.js）于是就想写这本书的一个系列。

准备工具

电脑

事实上，真的是只要能打开网页，能看到本文的电脑都足够用了。
最低的要求可能也就1000元左右。
下图的老爷机电脑，用来开发微信小程序也是足够（后台用 node.js,PHP ,JAVAWEB ,SpringBoot）都是可以的。

当然了，也许用下面的配置的人更多，毕竟游戏与生产力并用嘛

node.js

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。 [2]
Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。 [3]

V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类脚本语言编写出来的代码运行速度获得了极大提升，又节省了开发成本。对性能的苛求是Node的一个关键因素。
Javascript是一个事件驱动语言，Node利用了这个优点，编写出可扩展性高的服务器。Node采用了一个称为“事件循环(event
loop）”的架构，使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能，又能减低开发复杂度的架构。这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些，但仍提供很好的性能。
Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问，
直观，易懂。尤其是对于熟悉onmouseover、onclick等DOM事件的用户，更有一种似曾相识的感觉。
虽然让Javascript运行于服务器端不是Node的独特之处，但却是其一强大功能。不得不承认，浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端
运行的平台，但因为上述特性，Node发展迅猛，成为事实上的平台。
在Node启动的很短时间内，社区就已经贡献了大量的扩展库（模块）。其中很多是连接数据库或是其他软件的驱动，但还有很多是凭他们的实力制作出来的非常有用的软件。

因为node.js 这个东西又会影响另一个主流技术VUE ，所以安装的时候，最好是把版本的问题先考虑好。
具体参见《VUE的环境安装–【环境篇】》
简单的说，我用的版本就是。其实呢，我平时用的电脑有win7/win11两个平台，不过，node14也可以绕过WIN7的阻拦安装上的。不过，我还是建议大家使用win11。

vue 安装
node: v14.19.0;
node-sass: ^4.14.1;
sass-loader: ^7.3.1;

Node.js 历史版本下载地址：https://nodejs.org/dist/

微信小程序开发者工具

直接去官网下载就好了。
https://open.weixin.qq.com/home

打开官网之后，向下找。

导入项目

第一步是什么，准备好的工具（电脑），开发工具之后，当然是打开一个项目！不是new，直接open别人家的漂亮项目不香么？
这里看得出来，你的学习需要两个设备，一个是电脑（安装了微信开发者工具），另一个是手机（安装了微信）。
如果是这样，那就”项目“->”导入项目“ 后面就会出现图2
当然了，也有可能是这样

图2： 打开项目
点击 “+”号。

图2： 打开项目界面。
然后在图2 中 目录里选中 本文的资源。要注意的是选中的目录中要是主目录。

图3： 一个微信小程序的目录主目录样子
然后使用测试号。

图4： 打开微信小程序界面填好信息
点击新建就行了。
当然了，后期熟练了，你可以直接鼠标双击app.wxss(学会了那都是后话。)

打开小程序

终于看到了漂亮的小程序界面，
小程序的开发者工具，主要就分为三个大可视区，
”模拟器“,“编辑器”，“调试器” 他们都可以用上面的按钮进行切换。

电脑配置差一些的就多等一会，（受硬件及网络影响）

动手实践

发现目标

打开之后，默认情况下，”模拟器“,“编辑器”，“调试器”这三个绿色的大按钮是“亮的”，你也可以点一下，看看灰了之后是什么样子。
找到“编辑器”里的“资源管理器”，找到app.json文件。单击打开，
找开 “window” ,“tabBar” 两段
这个文件的详解参见《微信小程序的目录解析–【浅入深出系列002】》

开始动手

将windows块改成

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#39b54a",
        "navigationBarTitleText": "shop",    
        "navigationBarTextStyle": "white"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}
1
2
3
4
5
6
7
8
9
10
11
12
13

最后如图：

图7：改好代码之后的样子

检查效果

从这个例子中可以稍稍看到了一个简单而又比较精致的小例子。
可以从这些个案例中对比一下，当然了，好看不好看，有的时候也是因人而异的

所以，我要介绍一下这本书的目录:

目录
第1章 微信小程序入门 1
1.1　初识微信小程序 1
1.1.1　什么是微信小程序 2
1.1.2　微信小程序的特点 2
1.1.3　微信小程序的发展前景 3
1.1.4　微信小程序的宿主环境 4
1.2　微信小程序开发前准备 5
1.2.1　注册微信小程序开发账号 5
1.2.2　获取微信小程序AppID 8
1.2.3　安装微信开发者工具 9
1.2.4　创建微信小程序项目 10
1.3　微信小程序开发基础 12
1.3.1　微信小程序的项目结构 12
1.3.2　微信小程序的页面组成 12
1.3.3　微信小程序的通信模型 13
1.4　微信开发者工具的使用 13
1.4.1　认识微信开发者工具 13
1.4.2　微信小程序的项目设置 17
1.4.3　微信小程序开发常用快捷键 18
1.5　微信小程序的项目成员 20
1.5.1　项目成员的组织结构 20
1.5.2　项目成员的分工 21
1.5.3　项目成员和体验成员的管理 21
1.5.4　项目成员的权限 22
1.5.5　添加项目成员和体验成员 23
1.6　微信小程序的发布上线 24
1.6.1　微信小程序的版本 24
1.6.2　微信小程序的上线流程 25
本章小结 27
课后练习 27
第2章 微信小程序页面制作 29
【案例2-1】个人信息 29
案例分析 30
知识储备 30
　1. WXML简介 30
　2. WXSS简介 31
　3. 常用组件 31
　4. 页面路径配置 31
　5. view组件 32
　6. image组件 33
　7. rpx单位 35
　8. 样式导入 35
案例实现 36
【案例2-2】本地生活 37
案例分析 37
知识储备 38
　1. swiper和swiper-item组件 38
　2. text组件 39
　3. Flex布局 40
案例实现 42
【案例2-3】婚礼邀请函 45
案例分析 45
知识储备 47
　1. 导航栏配置 47
　2. 标签栏配置 47
　3. vw、vh单位 49
　4. video组件 49
　5. 表单组件 50
案例实现 54
本章小结 64
课后练习 64
第3章 微信小程序页面交互 65
【案例3-1】比较数字大小 66
案例分析 66
知识储备 66
　1. Page( )函数 66
　2. 数据绑定 68
　3. 事件绑定 69
　4. 事件对象 70
　5. this关键字 71
　6. setData( )方法 71
　7. 条件渲染 72
　8. 标签 72
　9. hidden属性 73
案例实现 73
【案例3-2】计算器 75
案例分析 75
知识储备 76
　1. data-*自定义属性 76
　2. 模块 77
案例实现 77
【案例3-3】美食列表 85
案例分析 85
知识储备 86
　1. 列表渲染 86
　2. 网络请求 87
　3. 提示框 88
　4. WXS 89
　5. 上拉触底 91
　6. 下拉刷新 91
案例实现 92
【案例3-4】调查问卷 97
案例分析 98
知识储备 98
　双向数据绑定 98
案例实现 98
本章小结 102
课后练习 102
第4章 微信小程序常用API（上） 104
【案例4-1】音乐播放器 104
案例分析 104
知识储备 106
　1. scroll-view组件 106
　2. slider组件 107
　3. 标签 108
　4. 背景音频API 109
案例实现 110
【案例4-2】录音机 121
案例分析 121
知识储备 122
　1. 录音API 122
　2. 音频API 123
案例实现 124
【案例4-3】头像上传下载 127
案例分析 128
知识储备 128
　1. 选择媒体API 128
　2. 图片预览API 129
　3. 文件上传API 130
　4. 文件下载API 131
案例实现 131
【案例4-4】模拟时钟 134
案例分析 134
知识储备 134
　1. canvas组件 134
　2. 画布API 135
案例实现 137
本章小结 142
课后练习 143
第5章 微信小程序常用API（下） 144
【案例5-1】罗盘动画 144
案例分析 144
知识储备 145
　动画API 145
案例实现 147
【案例5-2】用户登录 151
案例分析 151
知识储备 151
　1. 登录流程时序 151
　2. 登录API 153
　3. 数据缓存API 154
　4. 头像昵称填写 155
　5. App( )函数 157
案例实现 158
【案例5-3】查看附近美食餐厅 162
案例分析 163
知识储备 163
　1. 腾讯地图SDK 163
　2. map组件 168
　3. 地图API 169
　4. 位置API 170
　5. 路由API 170
案例实现 172
【案例5-4】在线聊天 176
案例分析 176
知识储备 177
　1. WebSocket API 177
　2. SocketTask 178
案例实现 179
本章小结 184
课后练习 184
第6章 综合项目——“点餐”微信小程序 186
【任务6-1】项目开发准备 186
开发背景 186
项目模块划分 187
项目初始化 187
【任务6-2】封装网络请求 189
任务分析 189
任务实现 189
【任务6-3】用户登录 192
任务分析 192
任务实现 193
【任务6-4】商家首页 196
任务分析 196
任务实现 196
【任务6-5】菜单列表页 201
任务分析 201
任务实现 202
【任务6-6】购物车 209
任务分析 209
任务实现 210
【任务6-7】订单确认页 220
任务分析 220
任务实现 220
【任务6-8】订单详情页 227
任务分析 227
任务实现 228
【任务6-9】订单列表页 231
任务分析 231
任务实现 232
【任务6-10】消费记录页 238
任务分析 238
任务实现 238
本章小结 241
课后练习 241
第7章 微信小程序开发进阶 243
【案例7-1】自定义标签栏 243
案例分析 244
知识储备 245
　1. 创建自定义组件 245
　2. 使用自定义组件 246
　3. 使用自定义组件渲染标签栏 247
　4. Vant Weapp组件库 248
案例实现 249
【案例7-2】电影列表 253
案例分析 253
知识储备 254
　1. WeUI组件库 254
　2. navigator组件 256
案例实现 257
【案例7-3】待办事项 262
案例分析 262
知识储备 263
　1. uni-app框架概述 263
　2. HBuilder X开发工具 264
　3. 创建uni-app项目 265
　4. uni-app项目的目录结构 266
　5. 将uni-app项目运行至微信小程序 266
　6. uni-app项目的全局配置文件 267
案例实现 268
本章小结 272
课后练习 272
第8章 uni-app项目——“短视频”微信小程序 274
【任务8-1】项目开发准备 274
项目展示 274
项目初始化 276
【任务8-2】公共头部区域 277
任务分析 277
任务实现 277
【任务8-3】导航栏区域 279
任务分析 279
任务实现 279
【任务8-4】轮播图区域 281
任务分析 281
任务实现 281
【任务8-5】视频列表区域 283
任务分析 283
任务实现 283
【任务8-6】视频详情页 285
任务分析 285
任务实现 286
本章小结 292
课后练习 292

配套资源

微信小程序开发实战（第2版）–【开发实战（第2版）】-【案例2-1】个人信息
https://download.csdn.net/download/dearmite/88212288

鼠标方案

另外，本例中使用的鼠标指针方案是我最常用，最喜欢的方案

霓虹线条鼠标指针方案资源下载
https://download.csdn.net/download/dearmite/88211804

附：怎样安装自己喜欢的鼠标指针方案 如何安装鼠标指针

下载并安装指针方案：
01
下载自己喜欢的鼠标指针方案，解压：

02
解压后我们会看到文件夹下有很多 ani动态光标文件 中有一个 ini文件，右键单击 ini文件（安装文件.ini），执行【安装】命令：

03
等待安装结束后打开【控制面板】→【鼠标】（Win XP 与 Win 7 操作均相同）：

04
打开【鼠标属性】窗口，选择【指针】选项卡，在方案中找到刚才安装的指针方案【Crystal Clear】，然后单击窗口又下脚的【应用】→【确定】完成安装！

第二种方案