微信小程序学习笔记(7.18)

程序员文章站 2022-03-28 17:56:28

自定义组件的使用若该页面存在大量重复内容可以使用自定义组件，可以理解为封装函数，避免重复性减少工作量。创建自定义组件可以观察到自定义组件的josn配置文件中的component项是true，而普通的page.josn文件中的配置里面的component都是空的{ "component": true, "usingComponents": {}}普通page文件.josn{ "usingComponents": {}}components和page的连接部位在page的j...

自定义组件的使用

若该页面存在大量重复内容可以使用自定义组件，可以理解为封装函数，避免重复性减少工作量。

创建自定义组件

微信小程序学习笔记(7.18)
可以观察到自定义组件的josn配置文件中的component项是true，而普通的page.josn文件中的配置里面的component都是空的

{
  "component": true,
  "usingComponents": {}
}


普通page文件.josn
{
  "usingComponents": {}
}

components和page的连接部位在page的josn文件中

**{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}**

在josn文件中配置过后，调用components中的Tabs就会显示出在Tabs文件中封装好的内容
微信小程序学习笔记(7.18)

自定义组件小案例

正常写法是把标签的内容写死

WXML

<view class="tabs">
  <view class="tabs_title">
    <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view>
  </view>
    <view class="tabs_content">内容</view>
</view>

WXSS

.tabs{

}

.tabs_title{
  display: flex;
  padding: 10rpx;
}

.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active{
  color: red;
  border-bottom: 10rpx solid currentColor;
}

微信小程序学习笔记(7.18)

自定义组件把内容放在JS文件的data 中

  data: {
    Tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ]

  },

WXML

<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->
    <view
    wx:for="{{Tabs}}" 
    wx:key="id"
    class="title_item {{item.isActive ? 'active' : ' '  }}"
    >
    {{item.name}}
    </view>
  </view>
    <view class="tabs_content">内容</view>
</view>

微信小程序学习笔记(7.18)

1.普通页面的JS回调函数放在data的同层中即可，但是在组件中的JS文件写法稍有不同，我们必须把回调函数放在methods里面！

methods: {
    handleItemTap(e)
    {
      console.log(e)
      const index=e.currentTarget.dataset.index;
      let tabs=this.data.tabs;
      tabs.forEach((v,i)=>i===index? v.isActive=true : v.isActive=false);
      this.setData({
        tabs:tabs
      })
    }

  }

2.在这样一个循环的view中加入一个参数 data-index={{index}}，就是循环时候的索引值，随着循环的发生而改变。

<view >
  <view class="tabs_title">
    <view
    wx:for="{{tabs}}" 
    wx:key="id"
    class="title_item {{item.isActive ? 'active' : ' '  }}"
    bindtap="handleItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
    </view>
  </view>
    <view class="tabs_content">内容</view>
</view>

循环中添加点击事件的原理

因为是一个循环view在其中绑定事件，我们可以在控制台打印一下这个event的情况，我们可以在 e.currentTatget.dataset.index里面找到此时选中的循环索引
微信小程序学习笔记(7.18)

微信开发中的遍历数组 array.forEach(element => { });

而这里的索引值其实和data的tabs中的id有关联，当两者相同是就触发active激活WXSS样式。这里用到了微信中的写给数组的循环方法
array.forEach=((v,i)=> 加入条件语句)
这里的v就是array数组中遍历的单位，而这个例子中则是使用三目运算符如果两者相同时就把 isActive 设置成 true 否则设置为 false，在用setData方法事实更新数组里的控制激活的bool值。

自定义组件父组件向子组件传递数据

子组件中有专门接受传递数据的接口

微信小程序学习笔记(7.18)
父类传递

<Tabs aaa="abc"></Tabs>

子类接受接口，需要定义上传数据的名称，类型，value，如果value为空默认上传的值

  properties: {
    aaa:{
      type:String,
      value:""
    }

  },

微信小程序学习笔记(7.18)
可见在微信开发中父类组件向子类传递数据的接口规定的开发者传递数据的方式。
如果觉得aaa这样的数据太简单，那么传递一个醒目一点的。
首先把数据放到页面的js文件中去
JS文件

// pages/demo12/demo12.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"论坛",
        isActive:false
      },
      {
        id:2,
        name:"应用",
        isActive:false
      },
      {
        id:3,
        name:"我的",
        isActive:false
      }
    ]

  },

组件中接受传递数据接口

  properties: {
  tabs:{
    type:Array,
    value:[]
  }

  },

WXML上传参数

<Tabs tabs="{{tabs}}"></Tabs>

由此实现了父类组件向子类组件传递数据的方法，如果小程序存在一些重复的组件我们就可以在page.js中准备好数组，在子类组件中根据类型写好需要传递的数据接口完成传递，使得开发减少了重复工作，大大提高了灵活性。
微信小程序学习笔记(7.18)

子类组件向父类组件中传递数据

问题引入：在选中后，data里面的数据没有更新，比如选中了我的，但是首页的isActive还是true

微信小程序学习笔记(7.18)

解决方法子类触发父类组件的自定义事件，同时传递参数给父类组件 this.triggerEvent(“父组件中自定义事件名称”,要传递的参数)

修改子类JS，以前子类是用来修改tabs但是父类触发的事件也会修改到tabs，这时就会造成数据不能动态改变。现在子类的工作就是触发父类事件，传递index参数也就是当前选中的项

  methods: {
    handleItemTap(e)
    {
     
      const index=e.currentTarget.dataset.index;
      this.triggerEvent("itemChange",{index})
      
    }

  }
})

给父类绑定自定义事件（要和子类组件触发的名称一致属性名字是：bind+子类中定义的父类触发事件）

微信小程序学习笔记(7.18)

子类JS完成触发父类自定义事件和传递当前选择的index，现在父类来完成对于tabs的数据修改

  handleItemChange(e){
    console.log(e)
    const index=e.detail.index;
    let tabs=this.data.tabs;
    tabs.forEach((v,i)=>i===index? v.isActive=true : v.isActive=false);
    this.setData({
      tabs:tabs
    })  
  },

通过以上步骤我们实现了 tabs数组数据的动态变化
微信小程序学习笔记(7.18)

自定义组件slot标签

可以理解为一个占位符，和上面的tabs一样，多个page可以使用，内容数据放在page用专门接口上传，再调用到slot时就会显示

子类WXML

  <view class="tabs_content">
      <slot></slot>
    </view>

父组件的WXML

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <view>父组件传递来的</view>
</Tabs>

微信小程序学习笔记(7.18)

由上每个页面的内容一样，使用控制语句改变每个页面的内容

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <view>
  <block wx:if="{{tabs[0].isActive}}">选中首页，显示首页内容</block>
  <block wx:if="{{tabs[1].isActive}}">选中论坛，显示论坛内容</block>
  <block wx:if="{{tabs[2].isActive}}">选中应用，显示应用内容</block>
  <block wx:if="{{tabs[3].isActive}}">选中我的，显示我的内容</block>
  </view>
</Tabs>

微信小程序学习笔记(7.18)

应用生命周期

1.onLaunch（）

小程序启动就会触发

onShow（）

当应用被用户看到的时候，比如切换页面的时候，对应用进行页面效果重置

onHide()

页面被隐藏的时候触发，暂停或清除定时器避免浪费内存

onError()

在应用发生代码错误的时候触发，收集用户的错误信息

onPageNotFound（）

当小程序启动找不到入口页面就会触发，也就是小程序启动后进入一个不存在小程序中的page页面就会触发

页面生命周期

data

onLoad

发送异步请求初始化页面

onShow

页面显示触发

onReady

页面渲染完毕触发

onHide

页面隐藏触发，如果小程序hide也意味着页面隐藏，页面跳转页是页面隐藏

onUnload

页面卸载的时候触发，navigator的opentype中的关闭当前页面就会触发页面卸载

onPullDownRefresh

监听用户的页面下拉，页面下拉刷新页面

onReachBottom

监听用户页面上拉触底，往往就是处理上拉触底触发加载下一页数据

onShareAppMessage

用户右上角转发时触发，监听转发操作

onPageScroll

监听页面滚动，页面滚动就可以触发

onResize

页面尺寸发生变化的时候触发，当小程序在手机中发生横屏竖屏的时候页面触发大小改变
在全局josn中配置后小程序可以支持自动旋转

onTabltemTap

监听用户使用tabbar页面时触发，点击当前页面也是tabbar页面，点击自己的tab导航栏就会触发

本文地址：https://blog.csdn.net/qq_45031555/article/details/107424139

微信小程序学习笔记(7.18)

自定义组件的使用

若该页面存在大量重复内容可以使用自定义组件，可以理解为封装函数，避免重复性减少工作量。

创建自定义组件

components和page的连接部位在page的josn文件中

自定义组件小案例

正常写法是把标签的内容写死

自定义组件把内容放在JS文件的data 中

1.普通页面的JS回调函数放在data的同层中即可，但是在组件中的JS文件写法稍有不同，我们必须把回调函数放在methods里面！

2.在这样一个循环的view中加入一个参数 data-index={{index}}，就是循环时候的索引值，随着循环的发生而改变。

循环中添加点击事件的原理

微信开发中的遍历数组 array.forEach(element => { });

自定义组件父组件向子组件传递数据

子组件中有专门接受传递数据的接口

子类组件向父类组件中传递数据

问题引入：在选中后，data里面的数据没有更新，比如选中了我的，但是首页的isActive还是true

解决方法子类触发父类组件的自定义事件，同时传递参数给父类组件 this.triggerEvent(“父组件中自定义事件名称”,要传递的参数)

给父类绑定自定义事件（要和子类组件触发的名称一致属性名字是：bind+子类中定义的父类触发事件）

子类JS完成触发父类自定义事件和传递当前选择的index，现在父类来完成对于tabs的数据修改

自定义组件slot标签

可以理解为一个占位符，和上面的tabs一样，多个page可以使用，内容数据放在page用专门接口上传，再调用到slot时就会显示

由上每个页面的内容一样，使用控制语句改变每个页面的内容

应用生命周期

1.onLaunch（）

onShow（）

onHide()

onError()

onPageNotFound（）

页面生命周期

data

onLoad

onShow

onReady

onHide

onUnload

onPullDownRefresh

onReachBottom

onShareAppMessage

onPageScroll

onResize

onTabltemTap

微信小程序 数据封装，参数传值等经验分享

微信小程序 css使用技巧总结

微信小程序地图导航功能实现完整源代码附效果图（推荐）

详解基于mpvue微信小程序下载远程图片到本地解决思路

微信小程序 支付简单实例及注意事项

C#微信小程序服务端获取用户解密信息实例代码

微信小程序 限制1M的瘦身技巧与方法详解

微信小程序和独立app哪个好 微信小程序和app区别及优劣势对比

微信小程序是什么？ 微信小程序和公众号有什么区别

微信小程序侧边栏滑动特效(左右滑动)

微信小程序数据封装，参数传值等经验分享

微信小程序支付简单实例及注意事项

微信小程序限制1M的瘦身技巧与方法详解

微信小程序和独立app哪个好微信小程序和app区别及优劣势对比

微信小程序是什么？微信小程序和公众号有什么区别