wepy一些问题和解决方案

小程序开发和传统的web开发有相识的地方,但是也有不同的地方,要区分。

computed属性名和props属性名重复

  • 如果那个组件的渲染值是重名的computed属性,每次点击都是之前的计算加上最新计算的值
  • 定义computed属性名的时候避免和props属性名重复

父子组件传值和Vue中的区别

  • Vue中的prop传值默认是只要父组件的数据改变,子组件同时改变,但是这种模式在wepy中是静态的 也即 :name="name"是静态的,父组件改变name子组件还是不会变,子组件还是父组件第一次传进来的值
  • wepy要做到父组件数据变的同时,子组件也跟着变,要加个修饰符.sync,也即:name.sync="name"
  • 还有一个是双向绑定的问题,Vue中可以通过$emit事件的方式实现,这里wepy可以在子组件中的props配置类型、默认值、以及是否双向中的twoWaytrue,就实现了双向数据流
  • 默认twoWay的值是false,如果不是特别需要,请按单向数据的方式传递数据最好,再配合$emit、$broadcast、$invoke,尽量少用,除非是表单这种

如何给当前自定义组件或者页面类添加静态属性

  • 可以在constructor构造函数中添加静态属性,但是要添加super(),才可以使用this来添加静态属性
  • 由于constructor执行时间比较早,所有在这里面的变量,可以直接用于wepy组件,也就是可以和data的数据一样用于数据绑定,但是原生组件只能放在data
  • 如果有些数据是一次性的,不会改变的(静态),最好在constructor中定义,不要都放到data中,data中的数据都会被转换成Observable数据的

组件与组件通信$broadcast、$emit、$invoke

  • 这些方法不可以在constructor调用,可以在onLoad中调用
  • events用于定义事件,用于接收用的
  • 如果想传数据给子组件,可以使用$broadcast('eventName', ...args),但是所有的后代组件都会触发该事件,如果后代组件的events.eventName有定义到,会调用其函数,并将args传给其函数
  • 如果想传数据给父组件可以使用$emit,同理,父组件(到根组件)的events要事先定义好事件
  • $broadcast和$emit都会一次触发多个事件,定义events的时候要注意
  • $invoke('./componentName', 'methodName', args)可以直接调用指定组件的方法methods中定义的方法,如果是调用父组件可以用../往上层走,如果要调用下层的./oneLevelComponentName/twoLevelComponentName
  • 如果有很多组件都公用一个方法methods或者events,还可以使用mixins

区分Page、App、Component、Mixin这些实例

  • 有些生命周期钩子是那个实例特有的,有些生命周期是所有都共享的

components不同于Vue或React的组件

  • 小程序的组件和Vue和React组件是有区别的
  • 在wepy中引入组件在components中,和Vue的一样,但是使用的时候是不同的,一个组件对应一个id,如果在同一个模板中使用同一组件超过2次,它们会共享数据
  • 共享数据指的是props等,可以测试一下,同一个组件传入的props名一样,值不一样,最终所有组件那的那个props值是最后一个值
  • 因为它们共享同一个props,多个组件一起使用,类似定义多个同名的函数一样,最后使用的是最后一个函数
  • 为了避免这种情况下可以用同一个组件去定义多个组件名{ coma: Button, comb: Button },实际上就是new多一个Button
  • 也就是说小程序中的组件在使用的时候,不会自动地new一个新的组件,而是同一个组件,而像Vue和React这样的组件,它们会new一个新的Button实例
  • 还有一种情况是,在循环体<repeat>中,在小程序中就会去new一个新的组件实例,如果你的内容重复,又不想定义多个组件名(new 多个组件),可以使用循环体<repeat>
  • 还有一种情况是slot,如果那个组件和数据无关,只是单纯的用于slot模板,它们最终生成的标签是不同的,因为这些生成的模板和数据无关,如果生成的模板中包含数据,那生成那部分关联数据的元素都是一样的
  • 这里说的数据是<view class='{{ className }}' >{{ data }}</view>这些花括号中的数据classNamedata,它们是共享的,所以它们最终生成的视图是一模一样的
  • 小程序的组件和目前流行的web组件有很大的区别,不能老用web组件传值得思维思考(很多莫名的bug),多从广播(订阅)的角度思考

repeat注意点

  • 分两种情况
//repeat包着元素view text等
<repeat for="{{mylist}}">
<view>{{item.name}}</view>
</repeat> //repeat包着自定义组件
<repeat for='{{myList}}'>
<List :mylist.sync="mylist"></List>
<Item :item='item'></Item>
</repeat>
  • 不支持在repeat的组件中使用propscomputedwatch等特性
  • 在使用repeat的时候,尽量使用纯文本渲染的组件,纯组件
  • 原生组件的情况下,可以使用.或者[]的方式选择想传的数据,但是自定义组件不可以,要整个数据传入,或者传入item([{}, {}]这种格式的数据),item就是wx:item
  • 数据源要在data中,才有效果,静态属性不行
  • 尽量只包含一个组件,出现多个组件,会出现莫名的bug,其它的功能再在这一个组件内部处理,然后组件间的通信通过$broadcast、$emit、$invoke
  • 使用组件多使用$broadcast、$emit、$invoke的方式传值,别老想着使用props,会有很多莫名的bug
  • 关于$broadcast、$emit、$invoke,可以通过mixins拯救一下,唯一没什么莫名bug的

Object.create(null)

  • 上面返回的对象不带原型链,也即不包含Object原生对象的信息
  • 小程序中一些数据,像data需要的对象要带原型链,不能用这个,否则在绑定数据到模板的时候会报错

字符串双引号""和单引号''

  • 在模板中务必使用"",别用''
  • :age='2':age="2",前面的''是传不了2age的,除非使用"2"
  • 在模板中最外层字符串最好用""不要使用'',比如定义事件函数的时候'handlerTap("123")',这里是不成功的给handlerTap传递参数"123",但是"handlerTap('123')"就可以
  • 正确用法:@tap="handlerTap('love')",最外层用"",最内层''

mixins的computed顺序问题

  • mixins中的computed执行顺序和vue的相反,也即先执行component或者页面的定义的,然后再执行mixins中的
  • 还有就是延迟的问题,mixins的慢于组件或者当前页面定义的,如果想在当前页面获取mixins的一些值,会获取不到

组件传值和模板绑定问题

  • 一个是上面提到的字符串要用双引号
  • 然后就是要区分原生组件和自定义组件

原生组件:就是小程序自带的组件<view>、<text>、<image>等等,这些原生组件绑定数据,要求数据必须在data中,如果绑定的数据不在data中将不会渲染

<template>
<view class="{{className}}">{{text}}</view>
</template> <script>
import wepy from 'wepy' // 注意:这个是组件实例
export default class Test extends wepy.component {
data = {
text: 123,
className: 'hahah'
} // 由于computed最后返回值会成为data中一部分,computed也可以用于原生组件数据绑定
// 但是在repeat的时候,不可以使用这个,repeat的时候不可以使用computed和watch
computed = {
text () {
return this.text + 1
}
}
}
</script>

自定义组件:绑定数据可以是data中,也可以用自定义函数,或者静态变量来绑定数据,且绑定数据的方式要和原生小程序的一样,不能用vue的方式

<template>
<UserComponent :fn="fn()" :staticV="staticVar" :text="text"/>
</template> <script>
import wepy from 'wepy' // 注意:这个是页面实例
export default class Index extends wepy.page {
constructor () {
super()
this.staticVar = 123
} data = {
text: 123
} // 自定义函数
fn () {
return '123'
} // 由于computed最后返回值会成为data中一部分,computed也可以用于原生组件数据绑定,如果和data中的属性重名,优先使用computed的
computed = {
text () {
return this.text + 1
}
}
}
</script>

原生组件的绑定只能是data中的数据,不可以像vue中的那样绑定数据,但是如果是自定义的组件就可以像vue那样绑定数据。还有methods自能用于定义事件处理程序,不能把自定义函数定义在里面

也就是碰到原生组件的时候,请用原生小程序的方式处理,碰到自定义组件的时候才考虑用你vue的方式处理,也就是区分原生组件和自定义组件非常重要

图片和导航的路径问题

  • 不要在组件中使用相对定位,如../这种,因为当组件被引入到某个页面时,会相对哪个页面,导致路径无法复用
  • 使用绝对定位,/,在小程序中,/是指的当前项目的文件夹,例如:/pages/index,这里的首个字符/就相当于@/都是指向/src目录
  • 如果是图片,如@/assets/icons/logo.png可以用/assets/icons/logo.png,因为第一个字符是/就相当于@/,表示/src目录之下
  • 如果是导航wx.navigateTo,如果导航到/pages/user,不要使用/或者../,直接user,最终会自动拼成/pages/user,也就是说微信默认/pages/+user

canvas中的canvas-id不能动态赋值

  • 可以通过slot来实现一个组件,不同canvas-id
  <component-name sid="canvas">
<canvas canvas-id="canvas"></canvas>
</component-name>
  • component-name是一个组件,接收sid只要是为了可以wx.createCanvasContext(this.sid)
  • 其实我们在组件的内部只需要知道canvas的id,并且调用wx.createCanvasContext(this.sid),所以我们可以把canvas独立成slot

在一个组件中引入另一个组件作为子组件,子组件的样式<style>不起作用

  • 是因为父组件没有<style>标签,导致子组件不编译<style>标签的内容
  • 最好还是每个组件都添加<style>标签,即使里面没有内容

wepy一些问题和解决方案的更多相关文章

  1. wepy+vant-weapp踩坑记

    最近用了几个月的wepy框架,碰到了挺多问题,这里总结一下 1.clone的代码无法再本地运行,wepy报错 解决方案: 执行命令 : `npm install wepy-cli@1.6.1-alph ...

  2. wepy框架开发小程序遇到的node-sass问题解决方案

    一.报错图 二.解决方案 主要是windows平台缺少编译环境, 1.先运行: npm install -g node-gyp 2.然后运行cmd:(右键点击:以管理员身份运行) 输入:npm ins ...

  3. 小程序组件化框架 WePY 在性能调优上做出的探究

    作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...

  4. 小程序第三方框架对比 ( wepy / mpvue / taro )

      众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...

  5. 微信小程序框架——wepy使后感

    更新:2018年1月10日15:32:22 在ios8及部分机型下会有样式混乱的问题,经查找,原因是缺少浏览器前缀,需要加prefix. 解决方案见链接:wepy-less-autoprefix 另外 ...

  6. 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...

  7. 【已解决】wepy中使用分包加载报错

    问题: "xxx.js 出现脚本错误后者未正确调用Page()"       最近看小程序启动时间(性能监控),启动时间比较长,所以考虑使用分包加载.       但在使用过程中遇 ...

  8. Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.这里做一个大体的汇总,废话不多说,直接开始给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识 问题汇总 Q: ...

  9. 使用wepy框架搭建微信小程序采坑记(一)

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

随机推荐

  1. ffmpeg文件生成m3u8文件及ts切片程序(一)

    ffmpeg文件生成m3u8文件及ts切片程序(一) 实现目标:输入本地文件,实现m3u8切片,功能点请看注释,注意:注释很重要. 参考: http://www.cnblogs.com/mystory ...

  2. mangodb与mysql的区别及部署

    一, mangodb与mysql的区别 mangoDB与MYSQL都是开源的数据库,但是mysql是传统的关系型数据库,mangdb则是非关系型数据库,也可以称之为文档型数据库,是一种NoSQL的数据 ...

  3. log(A^B) = BlogA

    令 x = logA, y = logB, z=log(AB) .2x = A, 2y = B, 2z = AB, 则有 2z = AB = (2x)^(2y) = 2x(2^y) ,有z = x*2 ...

  4. PHPCMS的自增长标签

    设置幻灯片的时候,需要用到自增长ID. <div class="tt_pic"><img src="images/1.gif" />&l ...

  5. Javascript Events

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件句柄 html4.0的新特性之一是有能力使html事件触发浏览器中的动作action,比如当用户点击某个html元素时启动一段Ja ...

  6. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 解决移动端浏览器页面 X轴横向滚动条问题

    写web端页面的时候,总是会出现横向滚动条,即 X 轴滚动条,导致页面左右滑来滑去. 即使设置了 body,html {overflow-x:hidden;width:100%;} 也无法生效. 解决 ...

  8. 12个非常不错的javascript类库

    Javascript是一个解释性的编程语言.最初作为浏览器的一部份在浏览器中运行,可以和用户交互,并且控制浏览器,异步通讯,修改显示的document.在这篇文章中,我们收集了12款最新的Javasc ...

  9. 46 Simple Python Exercises-Very simple exercises

    46 Simple Python Exercises-Very simple exercises 4.Write a function that takes a character (i.e. a s ...

  10. 上传高德地图-express框架

    1.首先要注册高德地图,完后成为开发者 2.控制台里获取自己的key值 3.在要显示地图的页面添加如下的代码 <script type="text/javascript" s ...