Wepy-小程序踩坑之旅

引言

• 最近公司须要作一个小程序的项目，正好发现了wepy这么一个跟vue的开发方式相似的框架，不过提及来跟vue相似，可是用起来还真不是那么简单。固然仍是先给出官方文档连接，方便查阅，有些细节还真的是在那只言片语间了。
• 微信小程序开发文档中有个搜索按钮，不过不要相信它是万能的，不少东西就是搜索不到的，好比arrayBufferToBase64这样的api，因此在使用某个功能的时候，尽量找到该功能对应的组件、API

官方文档

• 小程序的官方文档
• wepy官方文档

下面是已经踩过的坑

标签中的指令简写

• 跟Vue相似
  • 对于动态赋值的属性可使用 :attr="value" 的方式
  • 对于绑定事件可使用@click="fn"的方式

data使用注意点

• 对于视图中须要用到的数据，应该事先在data中定义一下，哪怕此时没有数据，也应该定义一个空值

WePY中的methods的使用

• 只能声明页面的bind、catch事件，不能声明自定义方法
• 自定义方法应该跟methods平级

页面跳转

• navigateTo() 和 redirectTo() 不容许跳转到 tabbar 页面，
• 只能用 switchTab() 跳转到 tabbar 页面

文件上传

• 上传文件没有传统html中的文件域(<input type="file"/>)，要想上传文件只能使用API： uploadFile()

更新DOM$apply

• 若是须要更新DOM，应该在随后调用组件实例的$apply方法，才能更新到页面中

this.name="abc"; this.$apply() 

• PS：对于性能要求较高的应用，不要频繁的调用$apply()更新DOM，能够根据实际状况更新

父组件向子组件传递数据，经过prop的方式传递

• 若是须要传递动态数据，须要.sync修饰符
• 若是须要子组件数据同步到父组件，须要在定义prop的时候设置twoWay:true

mixin

• wepy的mixin，与vue中的mixin执行顺序相反
  • wepy中，会先执行组件自身的，再执行mixin中的
  • vue中对于钩子函数，会先执行mixin中的，再执行组件自身的；vue中methods若是和mixin同名，那么只会执行自身的方法

关于canvas和base64

• 小程序中能够进行canvas相关操做，可是跟纯html中的canvas有所不一样（api差别），canvas的使用都应该参照：小程序中的canvas

arrayBuffer和base64互转

• 本段内容在文档中是搜索不到的，可是确实是支持的，使用以下2种方式：
  • wx.arrayBufferToBase64(arrayBuffer)
  • wx.base64ToArrayBuffer(base64)

命名规范

• 小程序内部定义的实例API都以$开头，因此咱们在定义实例属性、方法的时候不能以$开头，以便区分