写小程序有一个多月了,有一些感想,有一些心得,也有一些吐槽。
思维比较发散,想到哪写到哪。
选择 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半残 等等等等,但是有些东西真心没法忍:
-
wx.request()
,对于习惯了promise
的同学来说,没法忍。有时间的朋友可以自己封装,也可以用 mp-req,封装了自动wx.login()
、拦截器、请求缓存等。 - 路由半残,小程序路由仿照get请求的形式,传任何类型的参数,都会变成
String
。怎么讲,也不是不能用。不能忍的同学可以用 mp-router。 - 没有 类似 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()
可用。