经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
关于小程序胡言乱语
来源:cnblogs  作者:致爱丽丝  时间:2020/5/19 11:24:45  对本文有异议

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"

  • 跳转标签类似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:当页面的尺寸发生改变时触发
        * 用于小程序发生横屏竖屏切换时触发

原文链接:http://www.cnblogs.com/hjk1124/p/12915327.html

 友情链接: NPS