自定义组件才出来没多久,感觉解决了很多的问题,不过刚开始用不免遇到边边角角的问题,希望大家都可以在这个帖子统一记录问题和解决方法,方便快速查找问题。
楼主先来遇到的问题和解决方法:
在引用组件时在页面的 json 文件中进行配置。
{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } |
这里的组件名称是随便取得名字;
后面的组件路径使用相对路径,不需要加后缀名称。如: ../test/test
2. 按照官网自定义组件写法但没有成功显示??
首先检查下开发工具使用的基础库版本。官网说明要 1.6.3 才能使用自定义组件,在更新1.6.3 版本时间节点之前创建的项目默认基础库是不会自动设置为 1.6.3 的,这个要注意一下。
设置方式:开发工具右上角 > 详情 > 项目设置 > 基础库版本。
非常有效,解决我的大问题了。
@蒋欢Eragon
1. 如果你要定义一个组件,就在它的 json 文件里添加 `"component": true`。组件应该尽可能的做到黑箱,一个组件的所有文件都放在一个文件夹内,这样如果你的其它项目要用到组件,只需拷贝这个文件夹,就可以使用该组件了,如果都写在 app.json 中,那么你还得修改 app.json。这种设计反而将组件文件和其它文件耦合在一起。
2. 写在比如 home 页面要使用组件,需要在 home.json 中添加配置
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
} }
看你的意思,是想说把这里的配置移到 app.json 吧。你可以试试可行性。注意看 component-tag-name 这个字段,组件在页面中的标签是可以自定义的。比如 money 组件在 index 页面中可以定义为 <money1></money1>,在 index2 页面中可以定义为 <money2></money2>,如果定义在 app.json,那么自定义组件的标签名就会固定不变。
这个 component.json 里设置:"component": true 难道要用一个组件,写一个对应的json文件吗?为什么不统一写在app.json里呢。要不然用起来好麻烦。
@Mr Lu
这是官方文档,上面也有我实践写的一个组件的示例代码,动手试一试比看要容易理解一点。
表示没看到文档里有写组件用法的地方。。
请确认是否使用 component 自定义组件的,而不是 template 模板或者 wx-parse 第三方开源工具;
我刚打开项目看了下,我这边没有问题,说明应该不是官方文档的问题,也许你无意间修改了什么代码,可以参照官方组件使用文档仔细检查一遍;
如还有问题,请贴出具体代码以便交流。
前两天测试的好好的,今天一打开,组件引用没有问题,但是样式没有啦,怎么回事,我的天,你们有没有出现这种情况
你的语言已经挺有力的了,我已经传过来了,我觉得这个api还是有问题 后面官方应该会改的
先说我一个口误的地方:bindinput 这里的 input 应该叫做事件类型,而后面的 onPageInputChange 才是事件名称;
this.triggleEvent(eventType) 的第一个参数确实是根据事件类型来确定传值的,至于你说的页面有多个相同的事件类型怎么办,我刚测试过,这里组件往页面传值只会对组件内的事件有效,下面就有两个 bindinput 类型的事件,你改变 price 组件里的值,是不会影响到页面中其它的 bindinput 的;
<!-- 以下是对一个自定义组件的引用 -->
<
price
num
=
"{{price}}"
bindinput
=
"onPageInputChange"
/>
<
view
>{{price}}</
view
>
<
view
>
<
input
bindinput
=
'onInput'
></
input
>
</
view
>
3. 其实这里的事件类型是可以自定义的,比如页面中为 bindcustom="onPageInputChange",在组件中一律使用
this.triggleEvent('custom', {value: 1}) 来触发传值;
4. 还有前面说到的页面和组件中都要有相同的 bindcustom="onPageInputChange" ,这个说法也是错的,因为我这里的业务需求误导了我最初的认识,这里纠正一下,组件内写不写事件是不影响组件往页面传值的。
而且问题在于 你触发的事件为什么一定要在页面的元素上去绑定,我觉得你这个应该不是事件子组件触发了页面的事件,只是恰好两个事件类型相同 所以在触发子的时候 触发了父。。。