一.小程序组件
1.组件是什么?
-
组件:具有完整功能,独立运行,功能十分强大,可以封装重复的HTML代码,实 现HTML代码的可复用性
-
插件:为了完成墨香具体业务功能二开发的js文件,例如:
swiper.js
-
类库:提供为了完成项目工具方法的集合,和具体业务无关,例如
jQuery,lodash.js
-
框架:
框架是一个半成品,已经对基础的代码进行了封装并提供相应的API,开发者在使用框架是直接调用封装好的api可以省去很多代码编写,从而提高工作效率和开发速度。
2.小程序的分类
-
内置组件:小程序内置的组件,直接拿来就可以使用,无需安装
栗如:view,text,image,button,swiper,switch…
-
第三方组件:需要安装,引入,再使用
如何让小程序支持npm:
-
生成package.json:npm init -y
-
安装vant: npm i @vant/weapp -S --production
-
将 app.json 中的 “style”: “v2” 去除
-
勾选开发者工具-详情–本地设置-npm模块
-
选择微信开发者工具-工具-构建npm
-
使用第三方vant组件
在app.json或当前页面的json文件中的"usingComponents"引入
自定义组件:自己开发组件,然后再项目中多处复用,提高开发效率,这也是组件化的核心思想
如何快速创建一个组件的步骤:
- 新建的组件构造器
-
component({
})
2.文件有四个,分别是:wxml、json、js、wxss
3.在app.json引入自定义的组件
例如:
{
"usingComponents":{
"Dialog":"/components/Dialog/Dialog"
}
}
4.将Dialog显示到wxml视图上
<Dialog></Dialog>
小程序组件通讯实现方式
第一种:父传子
<Dialog-box
id="dialog"
title="订单信息"
content="订单支付内容"
/>
接收数据
Component({
...
properties: {
//要接收的属性
title:{
//接收的类型
type:String,
//接收的默认值
value:"此处应该有一个标题"
},
content:{
type:String,
value:"此处应该是内容"
}
},
....
})
第二种:子传父
//主要通过事件派发,监听模式
Vue:this.$emit('自定义的事件名',要传递的值)
//小程序:
this.triggerEvent('自定义的事件名',要传递的值,事件选项)
子派发事件:triggerEvent
//确定逻辑
confirm_btn() {
//向父级派发confirm事件
this.triggerEvent('confirm','您点击确定啦')
},
父监听:
<Dialog-box
id="dialog"
title="订单信息"
content="订单支付内容"
bind:confirm="myconfirm"
bind:cancel="mycancel"
/>
第三种:兄弟之间
//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>