原生小程序开发大坑component的生命周期函数created中setData无效(小程序弹层代码封装)

话不多说直接上demo(~~~~~~~~~~~~但是一定要仔细看~~~~~~~~~)

我这里要实现的功能是实现一个黑色背景框

可以调整文本框的位置，比如现在是在中间，还可以放到头部，和尾部
只需要传递 top center bottom

这样就会出现在头部

底部


因为我设置的有默认值，所以不传参的话默认就是在中间部分展示

为什么我组件里可以写入，标签呢？
这里我用到了插槽技术

插槽slot

这里就是我封装的组件

slot这里我就不讲了，如果需要的朋友多的话，我会抽时间给大家写一个关于slot的使用，不过react，vue，小程序他的插槽逻辑都是一样的，会一个就都会了。

开始正题为什么要修改setData里的参数呢？

因为我这里使用的是flex布局，可以快速调整子元素的位置，就是简单。

align-items 可以操作元素的y轴就是竖着的位置

这里我需要用到三个值：flex-end，flex-start，center
flex-start：就是在头部展示在父元素内最上面，官方一点的话（与交叉轴的起点对齐。 向上对齐）
flex-end：则反之，（与交叉轴的终点对齐。 向下对齐）
center：字母意思就是，在父组件的中间展示 (与交叉轴的中点对齐。 居中对齐)
但是我刚才需要传入组件的参数是： top、center、bottom
为什么要这样做呢?

1. 让后期人员使用更加的方便
2. 语义化更明显，方便维护
3. 单纯就是为了方便

这个时候就需要我对他做一个初始化把传递出来的参数，返编译一下，动态的赋值给元素

自定义组件(component)有那些生命周期

符合我们条件的情况无非就两个钩子函数created、attached
先使用created

问题出现了setData失效了
我这里的log已经说明created执行了

先来排错,验证setData执行了没有

这里看着data里的参数也被修改了，这是为什么呢页面没有渲染上呢？

在created中 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

如何解决component的生命周期函数created中setData无效的问题呢？

重点：用之前还是仔细看看开发文档吧，要细心一点
解决办法：使用attached钩子(在组件实例进入页面节点树时执行)

这就解决完了~~
接着刚才的问题继续往下来
第二种解决办法就是使用数据监听器observers，检测这个值的变化再去变化data的值

贡献一下自己封装的弹窗代码,如有改良请联系我

js文件

Component({
  /**
   * 页面的初始数据
   */
  data: {
    myposition: ''
  },
  properties: {
    position: {
      type: String,
      value: 'center' // top center bottom
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */

  observers: {
    position: function (position) {
      const myposition = position == 'center' ? position : position == 'top' ? 'flex-start' : position == 'bottom' ? 'flex-end' : 'center'
      this.setData({ myposition })
    }
  },
  methods: {
    groupCloseFn() {
      // 关闭弹窗
      this.triggerEvent('myevent', {}, {})
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

wxml文件

<view bindtap="groupCloseFn" class="windowcontent" style="align-items: {{myposition}};">
      <view class="windowcontent-slotbox" catchtap="stop">
            <text style="background:white">我是myposition的值:{{myposition}}text>
            <slot>slot>
      view>
view>
1
2
3
4
5
6

css文件

.windowcontent {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
}
.propscontent {
  background-color: white;
  height: 300px;
  width: 300px;
}
.windowcontent-slotbox {
  display: flex;
  justify-content: center;
  width: 80%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

如何使用呢？

先引入，那个页面要用，就在对应的json文件里调用

"usingComponents": {"blackwindow": "/pages/components/blackwindow"}
1

wxml使用

  <blackwindow position=’center‘ bind:myevent="CloseRulesGroupFn" wx:if="{{ruleIsShow}}">
  
   
        <view class="rule-box">
            <view class="activity-click" hover-class="none" hover-stop-propagation="false">
                <view class="rule-box-activity" bindtap="abc">助力规则view>
                <image class="rule-box-close" src="https://api.mini.test.zhongjiu.cn/app/zhuli/closed.png" bind:tap="CloseRulesGroupFn">image>
            view>
            <view class="rule-box-test">
                这是活动规则，测试文本这是活动规则规则，测试文本这是活动规则规则，测试文本这是活动规则规则，测试文本这是活动规则规则，测试文本这是活动规则规则，测试文本这是活动规则，测试文本这是活动规则，测试文本这是活动规则，测试文本
            view>
            <view class="rule-box-button" bind:tap="CloseRulesGroupFn">知道了view>
        view>
    blackwindow>
1
2
3
4
5
6
7
8
9
10
11
12
13
14