astak16 / mbp-oldisland-20190616

旧岛开发实战

20190616 like组件开发

知识点：

1. display: inline-flex动态自适应
2. 消除不必要的空白，特别是字体，font-size和line-height设置一样大小
3. 开发组件形成自己的风格，比如：v-like，v是法语vent的首字母，表示林间有风

20190616 组件的封装

1. 封装性，开放性。那些是要封装在内部，哪些是要开放出来的
2. 粒度（组件封装的难点）
3. 非常简单的功能 非常复杂的功能

20190617 路径导入文件

1. import导入文件不能使用绝对路径，只能使用相对路径
2. component中注册组件可以使用绝对路径，也可以使用相对路径

20190618 自定义事件

组件内部

this.triggerEvent('like',{ behavior },{})

第一个参数是事件名，第二个参数在event.detail中可以访问到，通过这个参数可以做一些自己做一些自定事件

wxml页面中使用组件

组件中使用bind:like="onLike"就可以绑定自定义事件了。

js中监听自定义事件

onLike () {
  ...
}

小技巧

一个表达式在条件为true时才会被执行，可以简化成下面这种

1 && 2    //2，当第 1 个表达式为 true 时，执行第 2 个表达式
0 && 2    //1，当第 1 个表达式为 false 时，不执行第 2 个表达式

20190619 observer

自定义组件需要对传外部传进来的数据进行处理，数据发生改变时obserber会被触发

正常这样设置的话，08会被渲染成8，前面的0会自动被去掉

properties{
  index{
    type: Number,
    observer (newVal) {
      let val = newVal > 10 ? '0' + newVal : newVal
      this.setData({
        index: val
      })
    }
  }
}

如果是这样设置的话，会进入死循环，因为在用setData设置index时是Number类型。

那么在在properties中的index如果设置为Number，08会变成8相对于之前传进来的8没有发生改变，所有不会触发obserber，但是将properties中的index设置为String，那么就会无限在Number和String之间不停切换了。

properties{
  index{
    type: String,
    observer (newVal) {
      let val = newVal > 10 ? '0' + newVal : newVal
      this.setData({
        index: val
      })
    }
  }
}

解决这个问题有两种方式

1. 在data中设置一个变量_index，通过setData去改变_index

properties{
  index{
    type: String,
    observer (newVal) {
      let val = newVal > 10 ? '0' + newVal : newVal
      this.setData({
        _index: val
      })
    }
  }
}
data: {
  _index: 0
}

20190620 behaviors

新建一个classic-beh.js文件用来定义behavior，写代码的时候使用Behavior这个关键字，其他的和写Component一样

behaviors是一个多继承的关系，如果出现了重名的properties和data最后一个的的属性会被继承，但生命周期函数不会被覆盖，都会被执行一遍。

20190620 获取currentIndex和latestIndex

getLatest()获取到的是最新一期期刊，通过localStorage存储到本地。在切换下一张期刊时，通过比较currentIndex和latestIndex，来控制左边一个箭头是否可以点击。

说明：

currentIndex 是最新一期期刊的 index latestIndex 是通过 getLatest() 获取到的最新 index