小程序开发与实战 学习视频： https://www.bilibili.com/video/BV1Gv411g7j6?p=9&spm_id_from=pageDriver

实现导航栏和tabBar。tabBar看下图： 参考文档：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 所有的属性对应的信息都可以在参考文档里面查看。 导航栏 app.json文件，内容是一个json对象，即是以key-value形式存在。所有的key必须要用双引号包括起来，值可以是各种类型，不如字符串、数组、对象等。 在app.jason中 配置属性entryPagePath 这个可以配置启动首页。如果不配置，就默认page的第一个路径为启动首页。 删除自带的logs页面 1、 删除app.json文件里面的pages下的logs路径配置； 2、 删除logs目录 首先删除pages下面的路径，不然直接去删除logs文件的话，一刷新，程序就自动给你配置回来了。 删除logs文件：右键–>删除–>移动到回收站 配置pages属性 默认情况下，自带了两个页面；只要在pages里定义了页面路径，就会生成对应的页面。 格式：“pages/页面文件夹名称/页面文件名称”，而这两个名称要一致 所有的路径必须以pages开头 根据上边的图，创建咨询（consult）路径、课程（course）路径、我的（mine）路径

配置window属性 用于设置小程序的状态栏、导航条、标题、窗口背景色。

navigationBarBackgroundColor：设置导航栏背景颜色，默认值是#000000黑色。16进制的。 比如设置其他颜色，可以用取色器去获取然后设置。 navigationBarTextStyle：设置导航标题颜色，默认是白色。但是仅支持黑色和白色。 navigationBarTitleText：设置导航栏标题文字内容。 backgroundColor：设置窗口的背景颜色，默认是16进制的白色。正常是看不到窗口的背景色的，因为被页面挡住了，当我们下拉页面的是时候才能看到。（微信朋友圈下拉看朋友圈） backgroundTextStyle：下拉loading的样式，默认是白色，仅支持黑色（dark）和白色（light）。这个也是看不到的，和上面那个属性一样。 下拉刷新和上提加载 enablePullDownRefresh：是否开启全局的下拉刷新，默认是false不开启。是boolean类型的。 onReachBottomDistance：页面上拉触底时间出发时距页面底部距离，默认是50，单位为px。（微信朋友圈往上拉） tabBar tabBar：底部tab栏的表现。如果小程序是一个多tab应用（可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。 list属性：tab的列表，详见list属性说明，最少2个最多5个tab pagePath：页面路径，在list里面写，必须在pages中先定义。 iconPath：图片路径，大小限制为40kb，建议尺寸但不一定为81px×81px，不支持网络图片。而且当position为top时不显示icon。在list里面写。 selectdIconPath：选中的图片路径，icon大小限制为40kb，不支持网络图片。而且当position为top时不显示icon。在list里面写。 color：tab上的文字默认颜色，仅支持16进制的颜色。 selectedColor：tab上的文字选中颜色，仅支持16进制颜色。 backgroundColor：tab的背景色，仅支持16进制颜色。 BorderStyle：tabBar上边框的颜色，仅支持黑色和白色。 custom：自动义tabBar。默认为false position：设置tabBar的位置，在且仅支持顶部或者底部。 图片资源 在根目录下创建images文件夹，然后把需要的图片素材粘贴进去。注意：不支持Ctrl+C和Ctrl+V这种模式的复制粘贴。 然后在images上右键–在资源管理器中打开，将刚刚复制的图片复制进去 然后修改 效果：这个还可以点击切换 但是颜色跟图片有差异，所以还要改字体颜色。用取色器取色 效果：

搜索框由两个容器组成。一个外部容器包裹着一个内部容器。 在微信小程序中，定义容器使用的是view。可以在view里面定义内容。 微信小程序一个页面对应四个文件，js文件、json文件、wxml文件和wxss文件 js文件：js文件； json文件：配置文件（app.json/index/course……）； wxml文件：HTML文件 ； wxss文件：css文件 注意：.json是配置文件，其内容必须符合json格式内部不允许有注释。 JSON有两种数据结构： 名称/值对的集合：key : value样式； 值的有序列表：就是Array； 而在JSON的文档中说明只要是不符合上面两种结构的都不被支持，并提示错误 所有的注释都是Ctrl + / 作为快捷键

1、 删除index.wxml自带的demo代码 2、 在index.wxml文件中定义两个嵌套view，布局容器的特点：整个容器占据100%视口。 3、 引入view图片和文字。在微信小程序中定义图片使用的是image组件；定义部分文字用条text标签。View属性特点：独占一行 a) 首先引入图片 b）写代码。在pages–>index–>index.wxml

4、实现样式。微信小程序中的样式都是写在对应的wxss文件中。 设置图片大小，首先删除index.wxss里自带的demo样式代码 设置搜索文字大小和样式 在pages–>index–>index.wxss中

微信小程序中提供了轮播图组件： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html swiper属性：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。 从官方文档中复制swiper，WXML放在index.wxml中再修改 JAVASCRIPT放在index.js中再修改。但是得把index.js中的data数据先删除再复制进去 轮播图需要用的这三张图片，将这三种图片复制放到images文件夹中

设置自动轮播。通过swiper相关属性设置 pages–>index–>index.wxml中。在view结束标签下面另起轮播代码，别放错位置。