小程序 心得 & 坑（包含ECharts 和 Wux-Weapp

写小程序有一个多月了，有一些感想，有一些心得，也有一些吐槽。

思维比较发散，想到哪写到哪。

选择 mpvue，uniapp，taro，还是用原生？

如果只是因为开发人员更熟悉 vue/React 的语法，而去选择mpvue或者taro，我认为是没有必要的。小程序原生语法吸收了现代框架的特点，上手很快。小程序的文档里，语法是最不重要的部分，而需要花时间阅读的是api，登录流程、原生组件、wxml节点信息获取等等等等。也就是说，即使用了轮子，还是要花时间阅读小程序文档。

如果是看中第三方框架解决了原生语法的一些问题，比如数据流管理、渲染速度（据说uniapp和taro比原生更快）等，可以考虑用轮子。

但是第三方轮子最终毕竟还是会转译成原生语法，小程序不支持的东西第三方框架肯定也不支持，还可能会有新的坑，可能会出现既要读第三方框架的文档，还需要读小程序文档的情况，技术选型时应考虑清楚。

UI 组件库选择

• WeUI ---------->和微信保持分风格一致
• Vant Weapp------------>电商类支持完整
• colorUI ----------> 颜色丰富
• iview Weapp -------------> 风格清新，组件兼容性好
• Wux Weapp ------------> 个人开发者出品，组件异常丰富，让人垂涎。但是偶尔会遇到 bug，入坑需谨慎
• taroUI ---------->和taro绑定（应该是吧？），风格偏硬朗，适合工具类小程序

不用**，臣妾做不到啊

小程序一些不太给力的地方都能忍一忍，比如一个组件4个文件，npm半残 等等等等，但是有些东西真心没法忍：

1. wx.request()，对于习惯了promise的同学来说，没法忍。有时间的朋友可以自己封装，也可以用 mp-req，封装了自动wx.login()、拦截器、请求缓存等。
2. 路由半残，小程序路由仿照get请求的形式，传任何类型的参数，都会变成 String。怎么讲，也不是不能用。不能忍的同学可以用 mp-router。
3. 没有 类似 cookie 这种可以缓存数据且会过期的 cache 可用，setStorageSync()存的数据不会过期。解决方案的话可以用setStorageSync() 加过期时间封装一个。

我遇到的 Wux weapp 组件库的 bug

用了 Wux 大概4、5个组件，遇到一些疑似bug。

• DatePickerView 日期选择器 maxDate和minDate传入 yyyyMMdd HH:mm:ss格式的时间字符串时，在 iOS 下年份的 pickview 会消失。
• Picker 选择器 options 的 value 为 Number时，组件无法正确初始化到选定的value。

是否如微信官方所说，小程序能保证多端一致性？

很遗憾，没有。wxss 在三端（模拟器/iOS/Android）依然会有不一致的情况，模拟器看到的页面无法保证在 iOS/Android 可以保持一致； 甚至 Components内一些生命周期函数在模拟器上都有些意料之外的情况。

当然这些问题微信官方早晚会解决 :) 。

列表渲染 Components 时遇到的小问题

有些朋友可能会在Component()之外var/let一些全局变量。需要注意的是，在列表渲染该组件时，该变量的作用域在 page 内所有的该组件，某个子组件内改变该变量的值，会影响其他子组件。

ECharts 在小程序中的一些问题

• ECharts 在 iOS 和 Android 下，默认的 font-size不同。
• 在小程序中，ECharts 的 tooltip 默认不展示 X 轴的值。
• y轴数据为 null 时，tooltip 处理略有不同，浏览器端展示-，小程序中展示null，且触发 tooltip 时 小程序端 canvas 图表会消失。
• 在同一 ec-canvas（ECharts 的包装） 下多次 chart.setOption(option)时，建议 chart.setOption(option, true)刷新，否则可能会有图表重叠的问题。
• canvas 在小程序中是最高层级，z-index设得再高都无法被遮盖。小程序官方提供了cover-view，但是兼容性不太好。目前没有太好的解决办法，一般是在需要遮罩时将ec-canvas的 hidden="true"。

那些文档里没有写（或者我木有看到）的事

• 在 Component()中可以使用observers取代properties中的observer，性能更好，支持同时监控多个data字段。注意：只有this.setData()能触发observers，this.data.x = x无法触发。
• this.setData({x:x}) 包括两个操作：1) this.data.x = x，这个操作是同步的；2) 把data更新到view，这个操作是异步的。
• 切换 tab 时无法触发任何文档中的生命周期事件，包括onHide() 和 onSHow()，只有一个未完全支持的事件onTabItemTap()可用。