微信小程序自定义组件方案

前言：小程序已于11月初开放了小程序组件功能，但事件方面还不是很完善，有的组件暂时可能还是要用其他方式来实现，这里简单记录下开发小程序自定义组件的要点。

在小程序官方开发组件开发功能之前，自定义组件的数据和方法必须挂在页面上，于是要点就在于将组件的私有数据和方法挂到页面上，同时避免不同组件间，同一组件不同实例间，组件与页面间的命名矛盾；其二，在组件内修改其数据，在页面上调用组件内的方法，写法上需稍留意。

实现方案：

• wepy: 小程序组件化开发框架

  • 支持自定义组件开发，其他特性可通读一遍其文档
  • 自定义组件的支持较完整
  • 属于框架，开发上提供了多种便利，可使用sass/less，可引入npm包，可自定义组件等，但运行小程序所需文件由框架生成，开发调试上就多了一层，可见文档[目录结构说明]和[重要提醒]
  • 使用此框架开发的人看起来也蛮多的，常用的UI/功能类组件有相应的实现，有投入使用的项目，wepy在更新中，有微信交流群
  • 框架设计初衷是一份代码可同时运行于小程序和web端，目前生成小程序版本是完善的，web版本目前可生成预览版，看起来暂时还不能投入使用
  • 综上，新开小程序项目考虑选用
  • 2017-12-01更新：wepy项目地址已迁移到 https://tencent.github.io/wepy/ （原来是：https://wepyjs.github.io/wepy/） ， 看到地址里的 tencent，以后做小程序果断选用wepy框架

• wux: 微信小程序自定义组件

  • 在微信小程序官方开发方式基础上
  • 关键文件component.js，给组件私有数据和方法加前缀$wux.[componnetname].[实例名]，可查看具体例子的AppData面板
  • 可只将需要的组件加入到自己项目中使用，也可基于此方法开发自己需要的组件
  • 基于此方式开发滚动评论组件的例子

• wx-component

  • 在微信小程序官方开发方式基础上
  • 看其使用说明感觉实现方式是不错的，不过我没有测试或实际应用过
• 微信小程序官方自定义组件