小程序选择器
目前小程序支持的选择器有：.class,#id,element（选择所有的view组件）,element,element(交集选择器)，
::after（view::after）在view组件后边插入内容，::before（view::before）在view组件前边插入内容
小程序标签
：相当于div元素
：相当于img元素
：相当于span标签，行内元素
：相当于button按钮
- type属性：primary:绿色按钮，warn:红色按钮，default：白色按钮
- size属性：default:默认尺寸，mini:小尺寸
：相当于html中的body，它的高度由内容撑起来；page也是一样
小程序组件
开放能力
open-data
作用：它能够获取用户公开的一些信息
注意： 目前在微信小程序模拟器上可以拿到用户头像和昵称等，但是在真机上是拿不到的，防止用户隐私泄露。
type属性：
- userAvatarUrl：获取用户的头像
- userNickName：获取用户昵称
轮播图
swiper
在 swiper 中放swiper-item，有几个swiper-item就代表有几个轮播图，swiper-item中可以放图片、文字等元素
indicator-dots
作用：是否显示面板指示点
默认值：false
注意：要设置属性值的false或者true时，要加花括号;变量也是加双花括号
<swiper indicator-dots="{{true}}">
autoplay
作用：自动播放
默认值：false
<swiper indicator-dots="{{true}}" autoplay="{{true}}">
interval
作用：搭配自动播放的时间间隔，默认是5秒
默认值：5000
类型：number
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="2000">
block
使用场景：当组件中使用了wx：for，并且还有子组件等时，小程序建议用block嵌套上有子组件的该元素，并将循环语句应用到block标签上。
<!-- 轮播图 -->
<swiper>
<block wx:for="{{imgUrlList}}" wx:key="index">
<swiper-item>
<image class="avatar" src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
注意：它只是一个框，它不生成实际的标签，类似于html中的transition标签。
小程序路由跳转
页面路由
作用： 凡是在根目录下的app.json文件下添加的路由记录，它们之间是可以相互跳转的
例如：
根目录下的 app.json文件
{
"pages":[
"pages/welcome/welcome",
"pages/index/index"
]
}
路由跳转函数：navigateTo(){}
例如：
wx.navigateTo({
url: '/pages/index/index',
})
注意：微信小程序页面跳转自动有一个动画效果，且左上角还有一个返回按钮，可以返回上一个页面
路由重定向函数：redirectTo(){}
例如：
wx.redirectTo({
url: '/pages/index/index',
})
注意：它不能返回到上一个页面，返回按钮变为返回主页(小房子按钮),主页是根目录下app.json中配置的第一行。
配置小程序入口
在根目录下的app.json文件中进行如下设置：
"entryPagePath": "pages/index/index"(你想要初始进入的页面路径)
小程序导入样式文件
语法：@import ......
页面注册的钩子函数
简介：它类似于vue中的生命周期函数，有多个，这里只举例一个
onLoad
简介：小程序的钩子函数，页面创建时执行
格式：onLoad:function(options){
// 页面创建时执行
}
小程序的网络请求
作用：它的效果和axios一样，小程序独有的。
wx.request()
例如：
onLoad(options) {
wx.request({
url: 'http://minipro.daqitc.net/news/all/3',
})
},
复习tips
垂直外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 注意：只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
发生情景：
(1)、当是兄弟元素之间：
解决办法：
- 给其中一个div套一个div，并给这个外层div开启BFC（设置overflow：hidden）
(2)、当是父子元素之间：
解决办法：
-
1、给父元素开启BFC（设置overflow：hidden）。
此时父子元素属于不同的BFC管理。父元素属于根标签的BFC，子元素属于父元素的BFC管理。
-
2、给父元素添加border，此时父子元素的margin就不相邻了。
\
