、小程序组件复用
- 组件是什么
组件:具有完整功能(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 官方文档地址: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>
-
-
-