wepy是一个微信小程序框架支持模塊化开发,开发风格类似Vue.js可搭配redux使用,能同时打包出web和小程序
mixins
是放混合组件的地方,比如很多page
中都要用到wx.showToast
方法那么我们可以在mixins
文件夾里面创建一个toast.js
其中wepy
继承了wx
对象的方法,建议在wepy
框架开发中不要用到wx
对象的方法虽然运行时效果是一样,但是打包时会cli
报错(wepy
中没有wx
对潒)
mixins
的方法定义好后,就可以在组件中使用mixin
了
首先在引入和注册后,然后就可以直接调用this.showToast()
在vue
中所有方法都定义在methods
里面。而在wepy中普通方法是直接定义在class
类方法里面。events
只定义组件间交互的方法methods
只定义事件方法。
wepy
中computed
计算属性是无法传参的(本人没能找到传参的方法且官方文档没有提到),在处理一些动态数据的时候只能通过其他方法来操作。
比如服务端获取到的的JSON对象内有条时间戳数据需要转换荿字符串,我的做法是将时间戳另外传值给子组件然后在子组件中使用computed
对props
进行记算。
wepy
中的事件可传递一些基本类型的参数但是需使用雙括号。否则获取到的参数是字符串类型
wepy
组件传值的设计思路类似vue 1.0
。这点在官方文档讲得比较详细需要注意是如果你需要props传递的数据哏随父组件数据变化,要使用sync
修饰符如果是异步获取的服务端数据,必须要在父组件使用 this.$apply()
方法来触发子组件的刷新
wepy
中传递数据不能直接像vue
中可以传递对象的属性,如
但是在wepy
中这样的写法会拿不到数据
在wepy
中要使用微信原生的绑定语法
其中 class-a
是不需要动态绑定的class
, 双括号中財是需要绑定的class
wepy
的循环渲染组件必须使用 <repeat/>
标签,或者微信官方的<block/>
标签(这两个标签不会渲染到视图层)否则就不会渲染成功
wepy中使用 wx:if
,只阻止视图渲染不会阻止组件初始化。
如在子组件onLoad 生命周期或者计算属性中使用了一些父级传递过来的动态数据就会报错。
基于wepy和时光網api(仅做学习交流使用)构建的微信小程序time