Live2d Test Env

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{
100%;
height: calc(100vw * 原图h / 原图w);
}
swiper swiper-item image{
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:当页面的尺寸发生改变时触发
        * 用于小程序发生横屏竖屏切换时触发