小程序开发总结2

WePy 小程序框架

看了一下 GitHub 上发现这个框架适合我们，而且star也不错，所以就采用了这个框架。
WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。

picker、picker-view、多列

picker 从底部弹出，不能自定义样式；
多列的时候直接在picker下写数据就可以了；
picker-view 可以自定义位置、高度、触发事件按钮等；
多列的时候需要在picker-view中picker-view-column标签，一个picker-view-column标签就代表一列；
在picker-view中只能picker-view-column标签，其他标签不会显示的；
多列
多列是依赖于picker的，在picker中定义多个数据变化的值就可以实现多列了；比如：

<picker mode="multiSelector" 
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange" 
    value="{{multiIndex}}" 
    range="{{multiArray}}">
    
    // 当前选择：
    {{multiArray[0][multiIndex[0]]}}， 
    {{multiArray[1][multiIndex[1]]}}，
    {{multiArray[2][multiIndex[2]]}}

wepy组件

将组件引入使用,组件要写在components文件下，并且类继承wepy.component；
先在父组件script标签中import引入子组件，如:(import Child from ‘./Child’)；
在js中的components下声明下子组件，给子组件一个id标识，如:(components = { ChildTag: Child })；
根据声明的子组件在相应的地方使用子组件标签，如:()；这样就可以实现子组件的引入了。
子组件与父组件之间的传参需要
1. 先在子组件的props中定义一下参数，如:(props={ title: { type: Number, default: 50,twoWay: true }})；
2. 在父组件中接收参数是通过子组件的attribute进行获取，如:()；
3. 在父组件中也可以在data中设置参数的变化，如:(data = { parentTitle: ‘p-title’ })；这样就可以实现父子组件之间的传参了，虽然在项目中没有被用到，但是也体会了一下这样的传参方式；

在日历组件中有点击确定和取消的事件，点击确定时还要将选好的时间参数传递到父组件中；在wepy中有三种关于事件传递的方法，如下：
1. $broadcast事件是由父组件发起，所有子组件都会触发事件，除非事件被手动取消；
2. $invoke是一个组件对另一个组件的直接调用，通过传入的组件路径找到相应组件，然后再调用其方法；
3. $emit与$broadcast正好相反，事件是由子组件发起的父组件会依次接收到$emit事件; 在日历这里我用的是$emit，因为需要子组件触发然后传到父组件；在父组件中自定义时候使用@customEvent.user绑定用户自定义组件事件，其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀；目前有三种后缀：
  - default: 绑定小程序冒泡事件事件，如bindtap；
  - stop: 绑定小程序非冒泡事件，如catchtap；
  - user: 绑定用户自定义组件事件，通过$emit触发；

具体实现是这样的：

// 子组件： 确定
   handleConfirm() {   //点击事件
    const time = this.year+ '-' +
                this.month + '-' +
                this.currentDay+ '  '+
                this.currentHour+':'+
                this.currentMinute
          this.$emit('childConfirm', time) //将事件传递给父组件
   }
// 父组件：    
 parentConfirm(time, e) { //传递过来的事件并接收参数
    this.showCalendar = false
    this.remindTime = ''
    this.currentDate = time
 }

注：子组件传递过来的参数和父组件接收的参数的顺序是相反的，比如：
子组件：this.$emit(‘childConfirm’, num, props1, props2)
父组件：parentConfirm(props2, props1, num, event)
前两个参数是确定的，第一个是事件名，第二个是个数字；但是我感觉第二个参数也就是num是可以不是数字的；

参考文档：https://wepyjs.github.io/wepy/#/