API名称:Command.elemMatch(condition: Object|Command): Command小程序端基础库：2.8.3 [图片] 查询的对象数组 [图片] 查询后[图片] 想要查询对象数组中的座位号来更新isUsing状态，想要返回座位号对应的对象，但是返回了该对象数组的全部，求大神看看哪里出了问题

前言我相信很多小伙伴看完上次的《微信小程序开发快速入门-小程序之开发前准备（1/5）》已经迫不及待想要开始编码了，今天就满足大家把代码给大家安排上！ 今天主要分享的内容有以下 2 个点： 1. 项目结构及代码分析 2. 码仔备忘录项目 在这里我们会从官方提供的案例去阅读代码中的秘密，阅读完成之后我们再从零到一写一个小项目就叫码仔备忘录。在这个过程中我会从前端基础讲起，先从显示层然后再去做逻辑层，循序渐进带领大家做一个小程序。 项目结构分析[图片] 我们先要分析最外层的目录结构以及文件： pages 下面都是有两个文件夹，这个下面代表两个页面一个是index一个是logs。utils文件夹是存在工具js文件，属于工具类。然后下面有三个以app开头的文件，这三个属于全局文件。app.js：全局App实例，是全部页面共享的。其他页面可以通过getApp()获取该实例，通常会把全局的对象存放在这里面供所有页面调用，如：用户对象。app.json：包含全局配置，所有的页面都需要配置到这里面，还有小程序头部样式。这里注意pages数组的第一项代表小程序的首页。更多配置看可以查看：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html。app.wxss：全局样式，这里面的样式全部共享到所有页面，无需额外引用。project.config.json：这个是基于整个⼯具的配置，例如界⾯颜⾊、编译配置等等。不需要你在 配置⽂件⾥⾯修改，⽽是通过⼯具的功能操作后，⾃动在这⾥会⽣成配置。配置详细可见：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html project.private.config：私有化配置与 project.config.json 配置一样只是权限不一样。sitemap.json：小程序搜索配置，详细可见：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html通常在开发过程中我们只会关注 app.js,app.json,app.wxss 这三个文件。 页面结构外层了解完后，再继续深入了解： [图片] 每个页面都有四个文件。 1. js：负责页面逻辑。如：登录操作，点击触发的事件处理等等 2. json：负责页面配置。如：⻚⾯的标题，⻚⾯的导航栏颜⾊等等 3. wxml：负责页面布局。如：有几个元素，如何摆放顺序等等 4. wxss：负责页面样式。如：元素⼤⼩，颜⾊等等 为了让大家更好都理解，我用游戏LOL来举个例子： 1. wxml：英雄 2. wxss：皮肤 3. js：技能 4. json：附文 到这里我们有提到页面配置和全局配置，这两个配置有一样的地方，但是很多不同到配置项，具体可见页面配置详情：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html 在一个页面中，通常主要用到wxml、wxss、js。json文件大部分可以不用，直接删除不受任何影响。 小程序中的wxml，wxss，js 相当于网页开发中的html，css，js。 分析完目录结构后我们在来看看更具体的代码。 项目代码分析小程序运行机制最开始是从app.json配置项解析。 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" } 然后再来看看首页，在这里不看页面的逻辑处理，先看页面的展示结构布局，打开调试器的Wxml来分析以下。 [图片] 这里面有三个元素，头像，名字，欢迎文案。结构是从上到下排列下来。 可以看到布局代码中有view、text，这些都是小程序组件。 组件都是以标签的形式成对出现。每个组件都有属性，如：class属性。 小程序组件列表：https://developers.weixin.qq.com/miniprogram/dev/component/ 后续会结合案例来单独讲解常用的组件，大家可以大概了解下小程序的组件类型。 那么组件的颜色、大小、居中以及之间的距离都是属于样式。 [图片] 我们可以看到这个Hello World文本距离上面有200px的距离，这种是属于样式信息，样式都是写在wxss里面的。 [图片] 在这里说明下，小程序是自动引入当前文件夹同名的样式，网页开发则需要手动额外引入。 现在大家看到这里以及大概了解一些基本概念。接下来由于官方案对于初学者来说有些复杂，接下来我们来从零到一写一个简单的页面。 基于现在的项目我们删除一些无用的代码。大家把utils文件夹删除，logs文件夹删除，app.wxss样式删除，app.json文件只留下index路径，代码如下。 { "pages":[ "pages/index/index" ] } 然后index文件夹下面的四个文件删除，再右键新增Page，这样就会直接新增好四个空的基础文件。然后我们得到的就是这样的一个页面。 [图片] 清空掉一切无用代码后，接下里我们要开始搞个小程序项目了。最近听说码仔最近有个需求，我们去帮帮它！ 码仔备忘录需求分析需求背景：由于码仔每天有做不完的事情，所以经常忘记一些事情。这样时候码仔需要一个备忘录用于记录自己的事情。 码仔需求： 1. 我希望有一个记录文字备忘录的功能，为了解决我健忘的毛病。 2. 我希望可以同时记录多条备忘录，因为要做的事情实在太多了。 3. 我希望可以删除备忘录，眼不见心不烦，做完了就不想在看了。 项目界面： 1. 开启页面 2. 列表页面 1. 无数据状态 2. 有数据状态 3. 添加页面 [图片] 布局编写先从启动页面开始，布局分析： [图片] 一共是两个元素，一个是码仔图片，一个是按钮。 首先在项目中新建一个images文件夹存放码仔图片和按钮背景图与pages文件夹同级。 [图片] 在新建的时候注意选择最外层的文件，如：app.js，因为只有这样建立的文件夹才会与pages同层级，否则如果选中pages那就是与在pages下一级文件夹了。建立好images文件夹后右键打开文件夹，把下载好的素材图片改好名字放入文件。 [图片] 准备好素材之后我们开始对页面做布局代码编写。 通常我们都会用view容器来包裹住所有组件。image组件就有个src属性用于放显示的图片路径。 具体可以查看image的文档，https://developers.weixin.qq.com/miniprogram/dev/component/image.html 有问题查文档，我们可以把文档当作字典来使用，用的时候就针对性查阅。 代码如下： <view> <image src="/images/home_logo.png"></image> <view>按钮</view> </view> 这里我们是用view组件包裹来一个image组件和view组件，那么这个时候有人就说为什么不用button组件？因为button组件用起来比较麻烦，button自带很多样式，布局起来比较麻烦。除非要用到button到特殊能力，否则通常情况下是不用button组件的，view组件可以通过css来完成按钮样式。 看下上面代码显示的样式，我们会发现图片有些变形。 [图片] 这个是为什么呢？我们通过调试器Wxml定位看下。 小技巧：wxml用旁边的小鼠标可以点击元素快速定位布局。 [图片] 我们可以看到图片组件有个默认样式宽度320px、高度240px。 接下来我们给这个图片来个样式。通常是根据图片的实际大小来设置宽度和高度。 这张图片是500x468，那么给它来一个样式。 [图片] <view> <image src="/images/home_logo.png" style="width:468rpx;height: 500rpx;"></image> <view>按钮</view> </view> 知识点：样式选择器从图片样式上来看，没有问题了。但是这里其实还包含个css知识点。上面用style属性来直接编写样式叫行内样式。这种虽然可以实现效果但是不够灵活，所以更好的写法实在wxss里面写。 代码如下： index.wxss .logo{ width: 500rpx; height: 468rpx; } index.wxml <view> <image src="/images/home_logo.png" class="logo"></image> <view>按钮</view> </view> 这种是最常用的类选择器，还有一种类型选择器，写法如下： index.wxss image{ width: 500rpx; height: 468rpx; } index.wxml <view> <image src="/images/home_logo.png" ></image> <view>按钮</view> </view> 能达到效果都一样，一个是类选择器主要是针对具体的组件引用样式，类型选择器就是这个页面所有这种类型的组件都会被应用这个样式。如果是在一个页面多个组件都是同样都样式就用类型选择器，如果是单个就用类选择器。 知识点：样式优先级还有一种情况就是如果有多个页面都用同一个样式，那就把样式放在app.wxss里面这样可以所有页面都共享这个样式，这样可以减少重复代码编写。这个时候有人会说了，如果公共样式里面有都，我当前页面重复了会怎么样呢？就近原则，当前样式大于公共样式，无论是样式还是配置一样原则。 接下来我们回过头来再次选中图片来看看这个图片的样式。 [图片]我们可以看到结合刚才的原则，两个都是类型选择器样式，我们当前的样式就覆盖了默认的图片样式。不知道有没有人发现了一个小细节，默认样式的宽高单位和我们自己写的单位不一致，一个是px另外一个是rpx。那么这两个有什么区别呢？ 知识点：rpx看下文档对rpx解释： rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 在iPhone6上1px = 2rpx。拿上面那张图举例500x468，px就是250x234才能显示一样的大小。这个rpx是小程序独有的，可以用于适配各种屏幕做到等比例缩放，所以以后咱们就用rpx。 具体对比效果，你可以通过切换模拟器机型来体验px和rpx的效果。px为固定大小，rpx为自适应大小。 好了，到这里继续写下面的代码，写完图片样式之后，我们再来看看按钮。我们可以看到素材按钮其实也是一张图片，我们把原来的view组件改成image组件。这里需要注意的是这个时候需要把类型选择器改成类选择器，因为两个都是image图片样式也不是一样的，所以我们还是选择用类选择器的写法。 看效果，用上面同样的写法来完成 [图片] wxml <view> <image src="/images/home_logo.png" class="logo" ></image> <image src="/images/home_btn.png" class="btn"></image> </view> wxss .logo{ width: 500rpx; height: 468rpx; } .btn{ width: 550rpx; height: 150rpx; } 接下来还要写个改变下背景颜色，这个时候我们可以给page设置一个背景颜色。 [图片] 在这里肯定你会有疑问，page这个组件好像没在布局里面写呀，它是哪里来的？这个就是小程序每个页面都会自己套一层page组件，可以通过调试器的Wxml看到page组件。通常我写背景颜色都用它，page文档里面也没有说明，有时候需要大家细心观察。 知识点：Flex布局接下来还需要把这两张图片居中显示，这个时候就要用到css最常用的Flex布局了。我们可以把包裹这两张图片的view看成一个容器，然后控制容器的样式来改变容器内里面组件的布局样式。 看效果 [图片] wxml <view class="container"> <image src="/images/home_logo.png" class="logo" ></image> <image src="/images/home_btn.png" class="btn"></image> </view> wxss .container{ /* 显示类型 ：弹性布局 */ display: flex; /* 排列方向：垂直方向，从上到下 */ flex-direction: column; /* 纵轴对齐方式：居中 */ align-items: center; /* 向上的边距：100rpx */ margin-top: 100rpx; } .logo{ width: 500rpx; height: 468rpx; } .btn{ width: 550rpx; height: 150rpx; } page{ background-color: #F8D300; } 这个flex布局方式非常常用，所以要重点学习。 Flex 布局教程：语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 然后再来看下与效果图的对比，按钮和上面logo图片距离相隔168像素，给btn样式加一个外边距的样式margin-top样式。 如果前端基础弱的同学可以外边距的教程：https://www.runoob.com/css/css-margin.html [图片] 添加完距离之后在看看效果。 [图片] 最后就差头部这个标题栏部分了，之前就有提到如果是全局配置就找在app.json。来看看全局配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 在配置里面有个window对象里面配置下navigationBarBackgroundColor属性配置成主色调。 看下效果 [图片] app.json { "pages": [ "pages/index/index" ], "window": { "navigationBarBackgroundColor":"#F8D300" } } 好了，我们第一个小程序静态页面大功告成。 最后这一章节主要是带着大家完成来一个小程序静态页面，主要目的是为了让大家了解下小程序到页面和样式。在此再次强调Flex布局非常重要。大家一定要反复练习，后续会被频繁使用到。