image标签
- 有默认宽高 320 × 240
- mode属性决定图片的显示方式和宽高适配
* scaleToFill:默认；不缩放直接拉伸至满image元素
* aspectFit:保持纵横比，确保长边被显示，常用于于轮播图
* widthFix:保持纵横比，高度根据宽度等比例拉伸，用于平常页面 - lazi-load属性决定图片是否懒加载，默认false
swiper与swiper-item标签
- swiper:轮播外层容器组件，必须与swiper-item配合使用
- swiper-item:轮播项,普通的块级元素
- swiper存在默认样式：
* 默认宽高：100% × 150px
* 内部图片也存在默认宽度和高度 320 × 240
* swiper高度无法实现由内部撑开
* 解决办法：先找到原图的宽度和高度，等比例给swiper定宽高
找到原图的宽和高，然后得出比值 swiperW / swiperH = 原图w / 原图h
swiperH = 100vw(100%swiperW ) * 原图h / 原图w
swiper{
width:100%;
height: calc(100vw * 原图h / 原图w);
}
swiper swiper-item image{
width:100%;
}
还需要给图片添加 mode = "aspectFit"
navigation标签
- 跳转标签类似a标签
- open-type属性表示跳转方式
1. navigation: 默认；跳转到指定页面，不跳转tabbar
2. redirect：覆盖当前页面，不跳转tabbar
3. switchTabbar:覆盖其他页面，跳转tabbar
4. relauch:关闭所有页面，打开应用内的某个页面
5. navigationBack:回退页面
自定义组件
- 自定义组件的注册
1. 根目录下新建components目录
2. components目录下新建tabs目录
3.开发者模式下右键新建component - 自定义组件的使用
1. 视图目录下新建index1
2. 在index1.json的usingComponents项新增键值对：
3. index1.wxml引入Tabs组件
//index1.json
{
"usingComponents": {
"Tabs": "../../commonents/Tabs/Tabs"
}
}
父向子传递数据
- 父组件向子组件传递数据通过标签属性的方式来传递
- 子组件通过components.js里的properties接收父组件传递过来的数据
- 子组件可以直接将其作为子组件内部的data内的数据直接使用在子组件内部
//index1.wxml
<Tabs aaa="aaa123" />
//tab子组件 tab.js
properties: {
//接收的组件值
aaa: {
// type : 要接收的类型
type: String,
// value:默认值
value: \'\'
}
}
//子组件tabs内使用父组件传递来的值 tabs.wxml
这是组件 接收到的父组件的数据---》{{aaa}}
[].foreach()
使用foreach遍历数组时，修改了v会导致原数组被改变
list.foreach((v,i)=>{
i === v.index ? v.isActive = true : v.isActive = false
})
对象的结构赋值
- 解构对复杂类型的操作是赋值了其引用地址的操作
let tab = this.data.tab
let {tab} = this.data
简单实现深拷贝
let arr = JSON.parse(JSON.stringify(this.data.arr))
生命周期
整个程序的入口文件是APP.js
单个页面的入口文件是Page.js
单个组件的入口文件是Component.js
- 应用的声明周期
1. onLaunch:应用被启动时触发的函数，仅执行一次
* 页面刚被启动时就可以获取用户信息，并可以被页面使用
2. onShow:应用被用户看到时触发的函数
* 对应用的数据或页面效果进行重置
3. onHide:应用被隐藏时触发的函数
* 暂停或清除定时器
4. onError(err):当应用的代码发生了报错的时候就会触发
* 应用报错时，收集用户报错信息，通过异步请求，将错误的信息发送出去
5. onPageNotFound:当页面不存在时触发函数
* 第一次进入应用如果找不到入口页面时触发
* 通常在这里重新定义页面的入口的入口文件
// app.js
//不能跳到tabbar
onPageNotFound(){
wx.navigateTo({
url: \'\',
})
}
- 页面的声明周期
1. data : 页面的初始数据
2. onload:监听页面加载时触发的函数
* 发送异步请求来初始化页面数据
3. onshow:页面显示时触发的函数
*
4. onReady:页面渲染完毕触发的函数
5. onHide：页面被隐藏时触发的函数
6. onPullDownRefresh:用户下拉时触发的函数
* 通常用于用户下拉动作后对页面效果或数据进行初始化
* 执行该函数需要page/app.json配置允许下拉 "enablePullDownRefresh": true
7. onReachBottom：监听用户上拉触底事件，页面高度不够所以页面不能滚动，不能滚动就不能触底
* 通常用于上拉发送请求加载下一页的操作
8. onShareAppMessage：用户点击右上角分享时触发
* 自定义分享按钮配置也应该在onShareAppMessage里实现
//onShareAppMessage:触发share事件时自定义界面
onShareAppMessage: function () {
return {
title:"转发的标题",
path:"以/开头，决定用户要进入的界面",
imageUrl:"图片的地址，可以是本地图片，也可以是网络图片，如果没有则默认将当前页截图作为分享页图片发送出去"
}
}
自定义分享按钮
9. onPageScroll(options): 当页面滚动时触发函数
* 在小程序里页面滚动到一定距离时显示会顶按钮：[https://www.bilibili.com/video/BV1Kt411V7rg?p=65](https://www.bilibili.com/video/BV1Kt411V7rg?p=65)
10. onReSize:当页面的尺寸发生改变时触发
* 用于小程序发生横屏竖屏切换时触发