微信小程序笔记

父向子组件传值

• 父组件在使用子组件的标签时,添加属性,就传递到子组件
  <Tabs myData="qwq"></Tabs>
• 子组件在 properties中接收

    myData:{
      type:String,
      value:''
    }

• 使用 在组件中直接引用即可

子组件向父传值

• 触发父组件的自定义事件,同时传数据给父组件

this.triggerEvent('父组件的自定义事件名称',数据)

子组件
tabBarTap(e){
    let id = e.currentTarget.dataset
    this.triggerEvent('itemChange',id)
}


父
<Tabs myData="qwq" tabs="{{tabs}}" bind:itemChange="handleItemChange"></Tabs>

handleItemChange(e){
    console.log(e.detail)

    let id = e.detail
    let tabs = this.data.tabs
    tabs.forEach((v,i) => v.id == id.id ? v.isActive=true:v.isActive=false);
    // 重新更新data
    this.setData({
        tabs
    })
},

实现tab内容切换

父
<Tabs myData="qwq" tabs="{{tabs}}" bind:itemChange="handleItemChange">

    <block wx:if="{{tabs[0].isActive}}">00000</block>
    <block wx:elif="{{tabs[1].isActive}}">11111</block>
    <block wx:else="{{tabs[2].isActive}}">222222</block>
      
</Tabs>

子
<view class="content">
    <slot ></slot>
</view>

生命周期

app中的生命周期

• onLaunch
  • 小程序初始化完成时触发，全局只触发一次
  • 可以获取用户个人信息
• onShow
  • 小程序启动，或从后台进入前台显示时触发 多次触发
  • 对应用的数据进行更新或者重置
• onHide
  • 清除定时器等操作
• onError
  • 收集错误日志,通过异步请求将错误发送出去
• onPageNotFound
  • 要打开的页面不存在时触发
  • 可以通过js跳转到某个页面(不能跳转到tabbar)

页面的生命周期

• onLoad
  • 异步获取数据
• onShow
• onReady
• onUnload 原来的a 为redirect才会触发
• onPullDownRefresh 下啦刷新
• onReachBottom 上啦加载
• onShareAppMessage 分享
• onPageScroll 页面滚动

使用字体图标

• 去阿里云字体库https://www.iconfont.cn/home/index
• 搜索相关图标,新建项目,加入购物车
• 进入我的项目 选择 Font class
• 生成在线链接 打开 复制css代码到一个css文件
• 在项目中使用class="iconfont icon-icon_shoucangmia"