小程序的组件_小程序组件是什么

一.小程序组件

1.组件是什么？

• 组件：具有完整功能，独立运行，功能十分强大，可以封装重复的HTML代码，实 现HTML代码的可复用性

• 插件：为了完成墨香具体业务功能二开发的js文件，例如：

  ​ swiper.js

• 类库：提供为了完成项目工具方法的集合，和具体业务无关，例如

  ​ jQuery，lodash.js

• 框架：

  框架是一个半成品，已经对基础的代码进行了封装并提供相应的API，开发者在使用框架是直接调用封装好的api可以省去很多代码编写，从而提高工作效率和开发速度。

  2.小程序的分类

  1. 内置组件：小程序内置的组件，直接拿来就可以使用，无需安装

     栗如：view,text,image,button,swiper,switch…

  2. 第三方组件:需要安装，引入，再使用

  如何让小程序支持npm:

  1. 生成package.json:npm init -y

  2. 安装vant: npm i @vant/weapp -S --production

  3. 将 app.json 中的 “style”: “v2” 去除

  4. 勾选开发者工具-详情–本地设置-npm模块

  5. 选择微信开发者工具-工具-构建npm

  6. 使用第三方vant组件

     在app.json或当前页面的json文件中的"usingComponents"引入

  自定义组件:自己开发组件，然后再项目中多处复用，提高开发效率，这也是组件化的核心思想

  ---

  如何快速创建一个组件的步骤：

  1. 新建的组件构造器

component({

})
1
2
3

​ 2.文件有四个，分别是：wxml、json、js、wxss

​ 3.在app.json引入自定义的组件

​ 例如：

{
	"usingComponents":{
		"Dialog":"/components/Dialog/Dialog"
	}
}
1
2
3
4
5

​ 4.将Dialog显示到wxml视图上

<Dialog></Dialog>
1

小程序组件通讯实现方式

​ 第一种：父传子

  <Dialog-box 
      id="dialog"
      title="订单信息"
      content="订单支付内容"
  />
1
2
3
4
5

接收数据

Component({
 ...
  properties: {
    //要接收的属性
    title:{
      //接收的类型
      type:String,
      //接收的默认值
      value:"此处应该有一个标题"
    },
    content:{
      type:String,
      value:"此处应该是内容"
    }
  },
  ....
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

​ 第二种：子传父

//主要通过事件派发，监听模式
Vue：this.$emit('自定义的事件名',要传递的值)
//小程序：
this.triggerEvent('自定义的事件名',要传递的值,事件选项)


子派发事件：triggerEvent
 //确定逻辑
    confirm_btn() {
      //向父级派发confirm事件
      this.triggerEvent('confirm','您点击确定啦')
    },

父监听：

<Dialog-box 
      id="dialog"
      title="订单信息"
      content="订单支付内容"
      bind:confirm="myconfirm"
      bind:cancel="mycancel"
  />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第三种：兄弟之间

//vue兄弟组件传值:bus,vuex

//小程序：主要通过利用父级组件当桥梁，来实现兄弟组件通讯

//A：父组件：cate

  <A bind:A="myA"/>
  <B mynum="{{ num }}"/>
  
  
//B传给C兄弟
//
//B传A:

wxml:
<view>
  <text>我是A组件-{{ num }}</text>
  <view><button size="mini" bindtap="goToParent">把A的数据发送给B组件</button></view>
</view>

//JS:
  goToParent() {
      this.triggerEvent('A',this.data.num)
    }
  }
  
  
  
//A传C  
  <A bind:A="myA"/>
  
    myA(e) {
    this.setData({
      num:e.detail
    })
  }
  
 //C再将A接的值再接收:
 
 //父级代码：cate
   <B mynum="{{ num }}"/>
 
 
 //C内部的代码：
Component({
  properties: {
    mynum:{
      type:Number,
      value:99
    }
  },
})

<view>
  <text>我是B组件--{{ mynum }}</text>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56