000
000
1年前 · 3045 人阅读

现在,小程序基础库已经包含与自定义组件相关的支持,官方决定对这些特性开放公测。有了这些特性之后,我们可以:
将一些复用性强的代码抽象成“自定义组件”,它们的使用方法与基础库内置的 view 、 button 等组件非常相似。
或者将页面拆分成几个低耦合的部分,降低页面局部更新时的渲染开销。
还可以将你自己制作的“自定义组件”代码文件开源出来,与其他开发者共享你的成果!
为项目启用自定义组件的方法是:
用开发者工具打开小程序项目设置,在项目设置中勾选“预览/上传时使用新特性”,并确认使用基础库版本是 1.6.3 或更高;
如果需要在手机上预览,请确认手机上安装的微信是最新版本(6.5.16或更高)。
如何编写一个自定义组件
每个自定义组件由四个代码文件组成:
json 文件:用于放置一些最基本的组件配置。
wxml 文件:组件模版。
wxss 文件:组件的样式,只在组件内部节点上生效(这个文件是可选的)。
js 文件:组件的js代码,承载组件的主要逻辑。
这四个文件与编写一个页面时用到的四个文件非常类似,但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。
**组件配置******
编写一个自定义组件,首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components 目录下,名为 custom-checkbox.json 。

这个文件中包含以下内容:

{
   "component": true
}

**组件模版******
在同一目录下,创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似:

<view>
     <checkbox id="checkbox" checked />
     <label for="checkbox" class="label" bindtap="labeltap">{{title}}</label>
</view>

这个模版将在组件中渲染出一个 checkbox 和一个 label 。
**组件样式******
同样类似于页面, wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是,样式只能通过类选择器(如 .the-class-name )来指定:

/* components/custom-checkbox.wxss */
.label {
    color: blue;
}

**组件定义******
组件的js文件中必须包含组件定义。定义时使用 Component 构造器:

// components/custom-checkbox.js
Component({
        properties: {
                title: {
                        type: String
                        }
        },
        data: {},
        methods: {
            labeltap: function() {
                console.log('label被点击了一下!')
            }
        }
})

简单的 Component 构造器调用包含3个定义段: methods 中的方法可以用来包含组件的事件回调函数; data 是组件的内部数据,可以用 this.setData 方法来改变; properties 中声明这个组件的属性,上例中声明了 title 属性,这样,组件外部在使用组件时就可以指定这个属性的值。
这样我们就编写好了 custom-checkbox 这个组件。
如何使用自定义组件
使用上面这个自定义组件的方法很简单。首先,在需要使用这个组件的页面对应的 json 文件中,添加下面的自定义组件声明:

{
    "usingComponents": {
            "custom-checkbox": "/components/custom-checkbox"
       }
}

然后就可以在页面对应的 wxml 文件中使用了:
这样,在页面上最终呈现的效果如下:

在自定义组件中引用其它自定义组件的方法也类似。
详细文档
有关自定义组件的详细文档,请参见开发者文档 - 框架 - 自定义组件。自定义组件还包含了一些高级功能,请阅读文档相关章节,如:
组件自定义事件
组件间代码共享
高级Component构造器应用等。
Q & A
Q:哪些微信版本可以使用自定义组件?
A:自定义组件对小程序基础库版本的最低要求为 1.5.7 或 1.6.3 ,对应微信版本是 6.5.13 或更高,目前已能覆盖近90%的微信用户。
Q:自定义组件特性在公测期间还会有哪些变更?
A:由于我们对小程序基础库进行了大量改写,公测期间自定义组件特性可能包含bug,我们会及时修复,请自定义组件开发者关注公测期间的更新。遇到相关bug时,欢迎及时反馈。暂未能修复的已知bug会列在下方的列表中。
Q:如何反馈问题、提相关需求和建议?
A:在开发者社区内发帖即可。发帖时请包含“自定义组件”标签,这样我们可以更有效地关注到,谢谢!
暂未修复的已知bug
如果节点上有 wx:for 或 wx:if 属性,或者节点的父级是节点,则节点的 slot 属性会失效。
如果文本节点的绑定值是单纯的表达式 {{xxx}} ,则可能引发表达式更新错误,目前如遇这种情况,请在表达式后加一个空格来规避问题,如{{xxx}} 。

最后打个广告
青团社招聘:
招聘岗位:资深前端开发工程师
简历投递到:hr@qtshe.com || haochen@qtshe.com
职位描述:
1、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量
2、构建H5/PC应用基础设施,主导建设前端各种发布/监控等平台,指导落实解决方案
3、持续优化前端页面性能,维护前端代码规范,钻研各种前沿技术和创新交互,增强用户体验、开拓前端能力边界

收藏 0
组件 自定义 checkbox 文件 页面 custom
评论 ( 0 )