（2）默认首页
（3）页面样式
页面配置文件中的配置项会覆盖app.json的window中相同的配置项
例如：全局window的文字颜色为红色，指定页面window的文字颜色为蓝色，最终页面呈现效果为蓝色
（4）页面跳转
redirectTo：关闭当前页(卸载)，跳转到指定页
navigateTo：保留当前页(隐藏)，跳转到指定页
switchTab：只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换
（5）如何使用父子组件
在父组件的xx.json里面
{
"usingComponents": {
"sales": "/pages/sales/sales" //加上子组件的路径
}
}
在父组件的xx.wxml里面 ，加入子组件的标签名
<!--pages/cart/cart.wxml-->
<scroll-view scroll-y="true" >
<view class="cart-pc"><image src="/assets/barbar/img/index2.jpg" mode="widthFix" ></image></view>
<view class="cart-pc"><image src="/assets/barbar/img/index1.jpg" mode="widthFix" ></image></view>
<sales></sales> //这个就是子组件的标签名
</scroll-view>
（7）框架组件
7-1）view： 相当于div
hover-class:按住的样式类
7-2）scroll-view ：可滚动视图区域
scroll-x 允许可视化区域横向滚动,
scroll-x=“true”，默认不允许横向滚动 （就是左右滚动）
首先设置滚动方向为scroll-x=“true”,
然后在设置white-space为nowrap不换行，
最后需要将容器中包裹的标签的display设置为inline-block
<scroll-view scroll-x="true" style="width:100px; white-space:nowrap;height:100px;">
<view class="gray" style="display:inline-block; width:100px; height:100px; background:gray "></view>
<view class="red" style="display:inline-block; width:100px; height:100px; background:red "></view>
<view class="green" style="display:inline-block; width:100px; height:100px; background:green "></view>
<view class="yellow" style="display:inline-block; width:100px; height:100px; background:yellow "></view>
<view class="blue" style="display:inline-block; width:100px; height:100px;background:blue"></view>
</scroll-view>
scroll-y 允许可视化区域纵向滚动,scroll-y=“true”，
默认不允许纵向滚动 （就是上下滚动）
只需要在view里面加入mode=“widthFix” 就可以让图片的宽度与屏幕宽度一致， 高度自适应
<scroll-view scroll-y="true" >
<view class="cart-pc"><image src="/assets/barbar/img/index1.jpg" mode="widthFix" ></image></view>
<view class="cart-pc"><image src="/assets/barbar/img/index2.jpg" mode="widthFix" ></image></view>
</scroll-view>
7-3）轮播图：swiper
微信小程序轮播图实现
微信小程序的轮播图可以用官方给的swiper组件。
下图是官方给出的swiper属性，截取了比较常用的一些属性。
swiper使用
微信小程序的.wxml文件中：
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imageList}}" wx:key="imageList.url" >
<swiper-item>
<image src="{{item.url}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
.js文件中
data: {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
imageList:[
{"url":"../../../static/image/1.jpg"},
{ "url": "../../../static/image/2.png" },
{ "url": "../../../static/image/3.jpg" }, 这个就是要加入的图片，到时候网络请求时，进行切换
}
7-4）在设置页面的时候，需要在最大的盒子里面，设置宽度为750rpx
然后里面的盒子和 图片，也是需要设置宽度为750rpx
7-5)基础组件
icon:图标组件
progress:进度条
rich-text:富文本
text:文本
button：按钮
checkbox:多选组件
checkbox-group:多项选择器组件
label:用来改进表单组件的可用性。
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。
form组件
7-6）wxml
数据绑定
使用双大括号将变量进行包裹，一般可以绑定内容和组件属性，还可以把数据绑定用在控制语句中
<view>{{message}}</view>
<view wx:if="{{condition}}"></view>
7-7）
列表渲染
wx:for
wx:for-item=“itemname”：可以指定数组当前元素的变量名
wx:for-index=“dex”：可以指定数组当前下标的变量名
条件渲染
wx:if
wx:elif
wx:else
7-8）wxss
尺寸单位
所有的设备屏幕宽度都为750rpx,可以实现对任意屏幕大小的设备进行自适应布局
如果手机底部按键会有遮挡的话，只需要使用padding-bottom:env 来告诉微信进行自动适配
盒子模型
元素有块级元素和行内元素，元素的显示方式是由display属性控制，通过margin和padding来确定盒子的位置
块元素
行内元素
行内块元素
浮动和定位
浮动
清除浮动
只需要用到clear属性
在需要浮动的那个块元素的下面，增加一个块元素（view），设置样式，clear:both; height:0;
因为块元素的宽度会继承父级，所以不用设置，然后加上以后，就会把盒子顶下去，从而清除浮动塌陷
两点需要注意：
（1）清除浮动的元素本身不能为浮动元素
（2）清除浮动的元素必须是块级元素
<view style="border:1px; border-style:solid">块级元素</view>
<view style="border:1px; border-style:solid；float:left">浮动元素</view>
<view style="clear:both; height:0"></view>
<view style="border:1px; border-style:solid">块级元素</view>
定位
相对定位
绝对定位
固定定位
弹性布局
flex布局的元素大小是可伸缩的，可根据需要扩展尺寸来填满可用空间
display:flex
flex-direction （元素布局方向）
justify-content（对齐方式）
7-9）如何引入Vant Weapp这个UI库
（1）在项目文件夹里，按照shift+右键，选择“Windonw PowerShell”