一、小程序组件复用
- 组件是什么
组件:具有完整功能(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
-
小程序组件分类
-
内置组件:小程序内置的组件,直接拿来就可以使用,无需安装
例如:view,text,image,button,swiper,switch…
-
第三方组件:需要安装,引入,再使用
推荐基于小程序的UI框架:vant UI,weui(腾讯自己的产品) 官方文档地址:https://vant-contrib.gitee.io/vant-weapp/#/intro
如何让小程序支持npm:
-
生成package.json:npm init -y
-
安装vant: npm i @vant/weapp -S --production
-
将 app.json 中的
"style": "v2"
去除 -
勾选开发者工具-详情–本地设置-npm模块
-
选择微信开发者工具-工具-构建npm
-
使用第三方vant组件
第一步:在app.json或当前页面的json文件中的usingComponents引入
第二步:在wxml页面上引入标签
-
自定义组件:自己开发组件,然后再项目中多处复用,提高开发效率,这也是组件化的核心思想
- 快速创建一个组件的步骤:
- 新建的组件构造器:
Component({ })
2. 文件类型也有4个:wxml,json,js,wxss 3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件,例如:cate.json
{ "usingComponents": { "Dialog":"/components/dialog/dialog" } }
-
将Dialog显示到wxml视图上 例如:cate.wxml
<Dialog-box />
-
组件之间如何通讯:
思考一下:在Vue中,如何通过父级组件改变子组件中的值???
A.vue
import ..... components:{B} template <B ref="b" /> mehtods:{ change() { this.$refs.b.hello() } }
B.vue
methods:{ hello() {...} }
-
小程序如何获取子组件的实例呢
this.selectComponent('选择器名称') 例如: this.dialog=this.selectComponent('#dialog') //通常写在onLoad
-
小程序组件通讯实现方式
-
第一种:父传子
- 如何传
<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>
-
-
-
二、小程序组件slot
slot:用于在不破坏组件的情况下,给组件嵌入结构的一种方式
例如:dialog组件:
<view class="dialog_box" wx:if="{{ isShow }}">
....
<slot name="a"></slot>
....
</view>
cate页面:
<Dialog-box>
<view slot="b">
<text>安全</text>
<text>高效</text>
<text>便捷</text>
</view>
</Dialog-box>
注意:如果使用命名的slot,必须要开启多slot支持,代码如下:
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
....
})
三、小程序样式隔离
回顾:vue中的样式隔离<style scoped></style>
小程序的样式隔离:
1.通过在组件的options中配置
Component({
options: {
styleIsolation: '隔离选项'
}
})
其中【隔离选项】值包括:
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(默认值);
apply-shared 父级样式会穿透影响组件样式,但组件样式不会影响其他页面
shared:互相影响
2.外部样式类
1.在app.wxss中定义一个class样式,例如:
.box {
background:#0ff;
}
2.如果将.box影响到组件内部呢?
第一步: 在组件内部配置:
Component({
externalClasses: ['my-class'],
})
第二步:在应用的父级组件的子组件标签上关联
<Dialog-box my-class="box"></Dialog-box>
第三步:应用my-class到对应的标签上
<view class="my-class">{{ content }}</view>
四、小程序模板复用
- 模板的适应场景
适应页面的展示,没有太复杂的逻辑交互的页面,可以存成模板,方便其他页面复用
通常模板页面:只有wxml,css,触发的逻辑要在父级页面来实现
- 如何定义使用模板
第一步:定义模板
定义步骤同创建普通页面一样
<template name="定义的模板名称">
这里放普通的wxml标签
</template>
第二步:使用模板
在需要的页面中引入:
<import src="指定要引入的模板路径" />
在嵌入位置添加template来指定
<template is="指定模板名称" data="{{ 指定要传入的数据}}"></template>
其中:
is:要引入的模板name名称
参考文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html