Wepy-小程序踩坑记

引言

用过原生开发的小程序也知道除了api 其余功能性的内容并很少对于须要作大型项目来讲是比较难入手的，所以朋友推荐的wepy我就入坑鸟。。。
这么一个跟vue的开发方式相似的框架，不过提及来跟vue相似，可是用起来还真不是那么简单。api开发仍是和部分vue有出入，所以以下记录，入手的教程就不发了只发踩坑。

官方文档

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

下面是已经踩过的坑

wepy 问题查找

https://github.com/Tencent/we...
比较建议在这里查找下遇到的问题以后在提问毕竟这里都是收集比较齐全

标签中的指令简写

跟Vue相似

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

data使用注意点

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

WePY中的methods的使用

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

this 运用

小程序里修改data 里面的属性或者赋值都须要利用this.setdata()而wepy 基本就是利用this.属性便可。若是是异步返回或者更新dom须要this.$apply()触发脏值检测

页面跳转

navigateTo() 和 redirectTo() 的差异。

navigateTo()保留当前页面，跳转到应用内的某个页面(即：显示顶部导航栏左上角返回按钮，能够有返回路径）
redirectTo()关闭当前页面，跳转到应用内的某个页面（即：不显示左上角返回按钮，如须要返回在页面内本身添加按钮写路径或者利用wx.navigateBack()和 getCurrentPages() 获取当前的页面栈，决定须要返回几层。

• 简单来讲若是你须要tabbar有返回就用navigateTo，不须要就用redirectTo
• 只能用 switchTab() 跳转到 tabbar 页面

文件上传

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

更新DOM$apply

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

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

• PS：对于性能要求较高的应用，不要频繁的调用$apply()更新DOM，能够根据实际状况更新父组件向子组件传递数据，经过props的方式传递
• 若是须要传递动态数据，加上.sync的修饰符就能够解决（:prop.snyc='item'）
• 若是须要子组件数据同步到父组件，须要在定义props的时候设置twoWay:true
• (全部异步数据传递必须用$apply，同步的话才能使用.sync)

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都以$开头，因此咱们在定义实例属性、方法的时候不能以$开头，以便区分

同名组件共享同一实例及数据

循环渲染组件时，容易出现组件数据相互污染。能够用最外层的组件监听事件冒泡以修改数据，同时触发事件的组件用setTimeout包裹，保证执行顺序。

循环渲染组件：

wepy的循环渲染组件，必须使用 <repeat>标签，或者微信官方的<block>标签(这两个标签都是不会渲染到dom的）不然就不会渲染成功。

组件component 没有 onLoad 等页面事件

• 页面中设置好 this.$broadcast('someEvent', option);
• 组件监听事件则能够解决

page

页面类，继承自wepy.component，拥有页面全部的属性与方法。
所有属性继承自wepy.component。而wepy.component没有onLoad 等方法

未完待续-----------------