小程序开发总结3

第二阶段的总结

哈哈哈，放假回来一周，还是没怎么进入状态。。

1. 微信小程序中的swiper是用来做轮播的，不能用来做选项卡切换。选项卡切换用到了wx:if。需要注意的地方：

   ①绑定的事件后可直接传入参数

   ②点击切换事件：

   clickTab(e) {
       e = +e
       if (this.currentTab === e) return
       this.currentTab = e
   }

   ③在点击切换时，相应地加载数据：

   async handelTab(type) {
       type = +type
       if (this.currentTab === type) return
       this.currentTab = type
       this.consumptionList = []
       this.optometryList = []
       this.hasMore = true
       await this.loadData(this.id, this.currentTab, 10)
   }

2. 小程序没有select组件，自己做的筛选样式，详见pages/workbench/index.wpy

3. 文字过长显示省略号，给定宽

   .name{ 
     width:100rpx;
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
     }

4. scroll-view使用竖向滚动时，需要给一个固定高度

5. Wepy使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查，一来可以不用关心页面多次setData是否会有性能上的问题，二来可以更加简洁去修改数据实现绑定，不用重复去写setData方法。代码如下：

   this.title = 'this is title'

   但需注意，在函数运行周期之外的函数里去修改数据需要手动调用$apply方法。如：

   setTimeout(() => {
       this.title = 'this is title';
           this.$apply();
   }, 3000);

6. 小程序运行命令npm run server;wepy build —-watch;

7. 小程序没有table组件，具体详见pages/workbench/addBasicData.wpy

8. 小程序使用了很多flex布局

9. wx.showToast icon只有success和loading,没有error,warning….

10. WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue的用法是不一致的。

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