微信小程序创建简单的自定义组件--基础篇

微信小程序开发组件基础篇

1. 先创建一个用来存放组件的文件夹
   如图所示：
   
2. 在我们刚刚创建的组件里面随便写一个简单的组件作演示

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})
     }
 }
})

8. 组件简单搭建完成，然后来看一下如何使用

   
   以这个临时文件为例，来看一下如何使用
   

<!--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.其间是有我们定义的子组件来给父组件（我们使用组件的页面）来发送传递参数或者事件，由父组件（我们使用组件的页面）来决定怎么用传递过来的数据