3. 在这里多提一嘴,weapp使用
右键点击这个,选择 在资源管理器中显示,然后再黑框里输入 npm i @vant/weapp -S --production,等待安装完成即可
4. 然后回到我们刚才的组件文件夹
<!--components/item/index.wxml--> <view class="item item-class" bind:tap="goto"> <view class="imgs"> <image src="{{icon}}" wx:if="{{icon}}" mode="widthFix"></image> </view> <view class="content"> <view class="title"> {{title}} </view> <view class="right"> <view class="tip"> {{tip}} </view> <view class="arrow" wx:if="{{toggle===0}}"></view> <switch wx:if="{{toggle!==0}}" type="switch" checked="{{toggle==2?true:false}}" bind:change="toggleChange"/> </view> </view> </view>
// components/item/index.js Component({ /** 5. 组件的属性列表 */ //扩展类名 externalClasses:["item-class"], properties: { "title":{ type:String, value:'' }, "icon":{ type:String, value:'' }, "tip":{ type:String, value:'' }, "toggle":{ type:Number, value:0 }, "url":{ type:String, value:'', } }, options:{ multipleSlots:true, //开启多个插槽 styleIsolation:"isolated", //样式格力 apple-shared子用父 }, /** 6. 组件的初始数据 */ data: { }, /** 7. 组件的方法列表 */ methods: { goto(){ if(this.data.url){ wx.navigateTo({ url: this.data.url, }) } }, toggleChange(e){ // console.log(e.detail.value) //发送一个事件给父组件 this.triggerEvent("toggleChange",{value:e.detail.value}) } } })
组件简单搭建完成,然后来看一下如何使用
以这个临时文件为例,来看一下如何使用
<!--pages/user/user.wxml--> <item title="收藏" icon="/img/icon01.png"></item> <item title="相册" icon="/img/icon02.png"></item> <item title="帮助与反馈"></item> <item title="关于微信" tip="版本1.7.6"></item> <item title="听筒模式" toggle="{{2}}"></item> <item title="首页" url="/pages/index/index"></item> <item title="日志" url="/pages/logs/logs"></item> <item title="外部类" item-class="myclass"></item> <item title="vant" url="/sub/pages/vant/vant" icon="/img/icon03.png"></item> <item title="显示图片" toggle="{{2}}" bind:toggleChange="showPic"></item> <image src="/img/t4.png" wx:if="{{flag}}"></image>
// pages/user/user.js 在这个文件夹里我们添加对应的一些方法 data: { flag:true, //用来控制图片组件的显示与隐藏 }, //这个方法是点击图片的时候,来修改图片显示的true/false,这个值来自于下方的子组件传递过来的值,由子组件负责传递给父页面,父页面来决定怎么用 showPic(e){ this.setData({ flag:e.detail.value }) },
// components/item/index.js methods: { //组件把点击切换的事件传递给父组件,父组件来判断value值为true/false 来决定图片显示与否 toggleChange(e){ // console.log(e.detail.value) //发送一个事件给父组件 this.triggerEvent("toggleChange",{value:e.detail.value}) } } })
总结:
流程就是:
1.先定义一个组件 components 在其下方创建一个自定义的组件
2.在我们需要使用组件的页面下方的XXX.json 文件里面引用
3.其间是有我们定义的子组件来给父组件(我们使用组件的页面)来发送传递参数或者事件,由父组件(我们使用组件的页面)来决定怎么用传递过来的数据