问题模块 框架类型 终端类型 微信版本 基础库版本
框架 微信小程序 工具 6.6.3 1.9.91
在用wepy做一个定制礼品电商微信小程序,要用到多个九宫格的设计,这是index
下面是tags
在index四宫格点击酒类进行tags类别为酒的六宫格,再点击cellitem就进入商品详情
于是用组件化解决重复代码问题,中间遇到一个问题,半天还想不通:目录结构
Page -----
index.wpy
tags.wpy
Component -----
cell.wpy
cellitem.wpy
通过index 调用 cell 组件(每两个cell为一组),cell组件调用cellitem组件(渲染每个cell)
下面是index的数据:
0:Array(2)
0:{created: "2018-03-01 16:25:11", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=p8sg1j7u", name: "服装", alias: "p8sg1j7u", id: 100409681, …}
1:{created: "2018-03-01 16:25:03", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=gu5m0ecf", name: "皮具", alias: "gu5m0ecf", id: 100409676, …}
length:2
1:Array(2)
0:{created: "2018-03-01 16:23:51", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=pji4p3l6", name: "鲜花", alias: "pji4p3l6", id: 100409642, …}
1:{created: "2018-03-01 16:23:36", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=5jtnwmnh", name: "酒", alias: "5jtnwmnh", id: 100409638, …}
length:2
tages页面的数据也是类似的,两两元组组成二维数组,外层cell遍历一维,cellitem遍历二维
tags.wpy 与 index.wpy 代码一样 (祖宗)
|
这是cell.wpy(父组件)的相关代码
下面是cellitem.wpy(子组件)的相关代码
{{onecellitem.name}}
数据加载是没问题的,但事件绑定上有问题,从index点击【酒】分类的@tap是可以的,但进入tags后点击【item商品】@tap没反应
后来找文档,也按要求改了:
原生微信小程序支持的js [color=var(--theme-color,#42b983)]模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。
例如模板阿中绑定一个bindtap="myclick",模板乙中同样绑定一样bindtap="myclick",那么就会影响同一个页面事件。对于数据同样如此。因此,只有通过改变变量或者事件方法,或者给其加不同前缀才能实现绑定不同事件或者不同数据。【我用的是“给其加不同前缀”】当页面复杂之后就十分不利于开发维护。
因此,在WePY中实现了微信小程序的组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在WePY的组件化开发过程中,A组件只会影响到阿所绑定的myclick,B也如此。
这是cellitem.wpy 的 事件绑定部分:
methods = {
indextap(e){
console.log('cellitem组件去往tags页面事件:',e)
wepy.navigateTo({
url: '../pages/tags?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name
})
},
tagstap(e){
console.log('cellitem组件去往item页面事件:',e)
wepy.navigateTo({
url: '../pages/item?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name
})
}
} // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明
请问:这个BUG从哪里可找到原因,我没头绪,求救,求教!