小程序开发的组件开发

在小程序开发过程中，小编想知道是否可以以组件的形式开发一些东西，以减少页面的代码量和开发时间。提高开发效率。仔细阅读小程序开发文档，发现小程序开发指南下有一个用户定义的组密钥。您可以根据小程序开发规则编写自己的组密钥。

以发布为例

注意事项：

1.组件创建

创建组件类型。

2.注意：组件导入可分为全局导入和本地导入。在json中配置导入规则

（1） 。全局导入。在app.json中配置

{

“页面”：[

],

“使用组件”：{

“我的通知”：“/assembly/notice/notice”//组件目录：/root目录/Component文件夹/compone wxml文件

}

}

（2） .部分介绍，页面json中的配置

{

“使用组件”：{

“我的通知”：“/assembly/notice/notice”//组件目录：/root目录/Component文件夹/compone wxml文件

}

}

2.Wxml页面引用

这是用于承载组件引用</view>时提供的子节点

3.示例：组件wxml编写，＜slot＞用于托管组件引用时提供的子节点。

（1） Wxml页面编写与页面编写没有区别

<插槽><；/插槽>

（2） ，wxss页面写入与页面（wxss）页面没有区别

.我的通知{

宽度：100%；

高度：80rpx；

线高：80rpx；

填充：0 30rpx；

框大小：边框框；

背景色：#ffffff；

}

.通知框{

宽度：100%；

溢出：隐藏；

}

.注意动画{

颜色：#5e5e5e；

空白：nowrap；

字体大小：28rpx；

}

（3） js页面编写和page（js）页面的区别在于页面周期

//assembly/notice/notice.js

组件({

/**

*组件属性列表

*用于接收从页面传递的参数。Type是参数类型，value是接收的参数。可以设置默认参数

*/

属性：{

通知：{

类型：数组，

值：[]

}

},

/**

*部件初始数据

*/

数据：{

通知计时器：15000

},

/**

*组件页面生命周期

*/

寿命：{

附加：函数（）{

this.notice（）；

}

},

/**

*组件方法列表

*/

方法：{

/**

*公告内容获取

*@param｛*｝时间

*/

注意：函数（）{

var _ this=这个；

var JqueryRect=“”；

var Jquery=wx.createSelectorQuery（）；

Jquery.select（“.通知框”）.boundingClientRect（）；

console.log（Jquery）

for（var i=0；i

Jquery.select（“.notice item”+i）.boundingClientRect（）；

}

Jquery。执行（（rect）=>{

console.log（矩形）

让textWidth=0；

让wrapWidth=0；

对于（var i=0；i<矩形长度；i++）{

如果（i==0）{

wrapWidth=rect[i]？rect[i]。宽度：“100%”

}

如果（i>0）{

text宽度+=矩形[i]？矩形[i]。宽度：“-200%”

}

}

_this.set数据({

wrapWidth:wrapWith，

text宽度：text宽度

}, () => {

_this.noticeAni（_this.data.noticeTimer）

})

})

},

通知Ani（时间）{

var _ this=这个；

_this.animate（“注意动画”[{

translateX：“100%”

},{

translateX:-_ this.data.textWidth

}]，时间，函数（）{

this.noticeAni（_this.data.noticeTimer）

}.bind（此））；

}

}

})

4.页面通信

（1） 。页面将值传递给组件。My notice是页面上自命名组件的引用名称，notice是用户定义的组件接收参数，｛｛notice｝｝是用户定义组件接收数据。

｛｛通知｝｝

<插槽><；/插槽>

//组件.js

组件({

属性：{

不