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 等要领

未完待续—————–

    原文作者:小色小魔
    原文地址: https://segmentfault.com/a/1190000013860866
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞