组件:具有完整功能(html-视图,css-样式,js-逻辑),并且独立运行的模块
插件:通常是为了完成某项具体的业务功能而开发的js文件 例如:swiper.js,弹框.js,。。。。
类库:library,是提供了为了完成项目的工具方法的集合,跟具体的业务无关! 例如:jQuery,lodash.js
框架:framework,分 是为了快速完成项目搭建的基础。框架分:UI 框架和javaScript框架
UI框架:boostStrap,Element UI,vant UI,iview,and Design.....
javaScript框架:vue.js,React.js,Angular.js
(1)、内置组件:小程序内置组件,直接可以拿来用,无需安装
(2)、第三方组件:需要安装—引入—使用
推荐基于小程序的UI框架:vant UI
官方文档地址:https://vant-contrib.gitee.io/vant-weapp/#/intro
(3)、自定义组件:自己开发组件,然后再项目中多处复用,提高开发效率,这也是组件化的核心思想
-
快速创建一个组件的步骤:
Component({
})
2. 文件类型也有4个:wxml,json,js,wxss
3、在需要的页面xxx.json或全局app.json配置文件中引入自定义组件,例如:cate.json
{
"usingComponents": {
"Dialog":"/components/dialog/dialog"
}
}
4、将Dialog显示到wxml视图上 例如:cate.wxml
小程序组件通讯实现方式
第一种:父传子
...
properties: {
//要接收的属性
title:{
//接收的类型
type:String,
//接收的默认值
value:"此处应该有一个标题"
},
content:{
type:String,
value:"此处应该是内容"
}
},
....
})
主要通过事件派发,监听模式
Vue:this.$emit('自定义的事件名',要传递的值)
小程序:this.triggerEvent('自定义的事件名',要传递的值,事件选项)
子派发事件:triggerEvent
//确定逻辑
confirm_btn() {
//向父级派发confirm事件
this.triggerEvent('confirm','您点击确定啦')
},
父监听:
vue兄弟组件传值:bus,vuex
小程序:主要通过利用父级组件当桥梁,来实现兄弟组件通讯
A:父组件:cate
B传给C兄弟
B传A:
wxml:
我是A组件-{{ num }}
JS:
goToParent() {
this.triggerEvent('A',this.data.num)
}
}
A传C
myA(e) {
this.setData({
num:e.detail
})
}
C再将A接的值再接收:
//父级代码:cate
C内部的代码:
Component({
properties: {
mynum:{
type:Number,
value:99
}
},
})
我是B组件--{{ mynum }}