微信公众号开发

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

本文主要是介绍微信小程序创建简单的自定义组件--基础篇,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

  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})
     }
 }
})
  1. 组件简单搭建完成,然后来看一下如何使用

    在这里插入图片描述
    以这个临时文件为例,来看一下如何使用
    在这里插入图片描述

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

这篇关于微信小程序创建简单的自定义组件--基础篇的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!