微信小程序组件化开发

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件：

新建一个components目录，在里边创建自定义组件

组件的组成：

使用组件：

一个简单的示例：

创建comp，代表页面；创建components/xxxx，代表组件。

创建组件：

使用组件：

注意：json文件中不能写注释啥的。这里的注举键释租芹是为了解释清楚，在开发中不能写注释。

组件的注意事项：

组件的样式细节：

如何控制页面和组件的样式相互影响：

组件和页面相互通信

this.triggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项

预留一个设备，以有利于对以后进行扩展。

好处：

例子：

在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。

单个插槽的使用很简单：

多个插槽的使用稍微弊答毕复杂，要设置几个东西：

component构造器中可以写哪些东西，如下

一.创建并使用组件的步骤

1.创建一个文件夹存放组件，并在里面创建一个组件文件夹，components，tabs

2.在tabs文件里添加组件模板

3.引用组件，在父组件的json文件中配闭的usingComponents中添加子组件路径，compont

4.使用组件，相当于正常标签进行使用

二.父组件向子组件传参的步骤

父组件给子和局组件的tabs传入对象

1.父组件的数据

2.子组件做的 *** 作

如果没有传入数据，就会输出默认值value

3.子组件展示对唤卖让象数据：

三.子组件向父组件传参的步骤

1.先给子组件添加一个点击事件

2.通过this.triggerEvent("自定义事件名称",{传的值})命令保证子组件和父组件同步被修改

3.父组件绑定子组件，定义一个事件名称，用来接收子组件传递的数据

1.基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2.属性类型

<ul>

<li>Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属李弊散性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number数字1

, 2.5</li>

<li>String字符串"string"</li>

<li>Array数组[ 1, "string" ]</li>

<li>Object对象{ key: value } </li>

<li>EventHandler事件处理函数名"handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any任意属性</li>

</ul>

3.共同属性类型哪氏

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选卜兄择器, switch 开关选择器, label 标签.

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频

** 地图 **

map 地图

画布Canvas

canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

---