小程序自定义组件公测说明及入门介绍

如何看待微信公开课小程序热门讨论「小程序自定义组件公测说明及入门介绍」
摘要：小程序自定义组件公测说明及入门介绍
展开：自小程序发布至今，我们接收到了很多反馈，希望小程序框架能加强对组件化编程的支持。现在，小程序基础库已经包含与自定义组件相关的支持，我们决定对这些特性开放公测。有了这些特性之后，你可以：将一些复用性强的代码抽象成“自定义组件”，它们的使用方法与基础库内置的`view`、`button`等组件非常相似。或者将页面拆分成几个低耦合的部分，降低页面局部更新时的渲染开销。还可以将你自己制作的“自定义组件”代码文件开源出来，与其他开发者共享你的成果！为项目启用自定义组件的方法是：1.用开发者工具打开小程序项目设置，在项目设置中勾选“预览/上传时使用新特性”，并确认使用基础库版本是1.6.6或更高；1.如果需要在手机上预览，请确认手机上安装的微信是最新版本（6.5.16或更高）。如何编写一个自定义组件每个自定义组件由四个代码文件组成：`json`文件：用于放置一些最基本的组件配置。`wxml`文件：组件模版。`wxss`文件：组件的样式，只在组件内部节点上生效（这个文件是可选的）。`js`文件：组件的js代码，承载组件的主要逻辑。这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。组件配置编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个`json`文件。这里我们把文件放置在小程序的`components`目录下，名为`customcheckbox.json`。这个文件中包含以下内容：```json{"component":true}```组件模版在同一目录下，创建一个模版文件`customcheckbox.wxml`。这个文件的写法与页面模版很类似：```html{{title}}```这个模版将在组件中渲染出一个`checkbox`和一个`label`。组件样式同样类似于页面，`wxss`文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如`.theclassname`）来指定：```css/components/customcheckbox.wxss/.label{color:blue;}```组件定义组件的js文件中必须包含组件定义。定义时使用`Component`构造器：```js//components/customcheckbox.jsComponent({properties:{title:{type:String}},data:{},methods:{labeltap:function(){console.log("label被点击了一下！")}}})```简单的`Component`构造器调用包含3个定义段：`methods`中的方法可以用来包含组件的事件回调函数；`data`是组件的内部数据，可以用`this.setData`方法来改变；`properties`中声明这个组件的属性，上例中声明了`title`属性，这样，组件外部在使用组件时就可以指定这个属性的值。这样我们就编写好了`customcheckbox`这个组件。如何使用自定义组件使用上面这个自定义组件的方法很简单。首先，在需要使用这个组件的页面对应的`json`文件中，添加下面的自定义组件声明：```json{"usingComponents":{"customcheckbox":"/components/customcheckbox"}}```然后就可以在页面对应的`wxml`文件中使用了：```html```这样，在页面上最终呈现的效果如下：在自定义组件中引用其它自定义组件的方法也类似。详细文档有关自定义组件的详细文档，请参见[开发者文档框架自定义组件](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/customcomponent/index.html)。自定义组件还包含了一些高级功能，请阅读文档相关章节，如：[组件自定义事件](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/customcomponent/events.html)；[组件间代码共享](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/customcomponent/behaviors.html)；[组件间关系](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/customcomponent/relations.html)；[高级Component构造器应用](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/customcomponent/component.html)等。Q&AQ：哪些微信版本可以使用自定义组件A：自定义组件对小程序基础库版本的最低要求为1.5.7或1.6.3，对应微信版本是6.5.13或更高，目前已能覆盖近90%的微信用户。Q：在自定义组件中，有哪些API在使用时有特殊之处A：在使用从WXML中选取特定节点的API时，需要传入自定义组件实例对象`this`，这些API包括`wx.createSelectorQuery`、`wx.createCanvasContext`等，在使用前请查询它们的文档更新。Q：自定义组件特性在公测期间还会有哪些变更A：由于我们对小程序基础库进行了大量改写，公测期间自定义组件特性可能包含bug，我们会及时修复，请自定义组件开发者关注公测期间的更新。遇到相关bug时，欢迎及时反馈。Q：为页面添加`usingComponents`之后页面的表现不一样了，怎么办A：这类问题绝大多数情况下属于基础库的bug，请单独发帖反馈。Q：如何反馈bug、提相关需求和建议A：请在开发者社区内单独发帖反馈（尽量不要直接在下方评论区反馈，以免骚扰其他开发者）。发帖时请包含“自定义组件”标签，这样我们可以更有效地关注到，谢谢！