微信小程序_component 自定义组件

前两个星期,我的电脑差点被黑白无常给勾走了。
现在我的电脑终于鬼门关里走一趟,平安回来了。我的博客也要正常更新了,( •̀ ω •́ )y
这次我要跟新的内容依然是关于【微信小程序】,这次是有关 自定义组件

在这个案例里面:是在 index 界面里面 , 使用了 navigation 组件

自定义组件

  • 自定义组件的必要性:
  1. 问题描述:在一个界面或者多个界面中,如果我们都需要重复使用一些长得相似,代码几乎一模一样的组件。我们怎么办?例如:微信小程序,每个二级界面都需要一个导航栏,就只有标题不一样。
  2. 自定义组件:这个时候,微信小程序为我们提供了自定义组件的申明和使用方法的介绍。

自定义组件的申明方法:

  1. 新建navigation 组件文件:
    本例路径:/static/component/navigation 文件夹新建好以后,鼠标右键-新建Component-填写文件名称 这里的名称最好和文件夹名保持一致

  2. 代码:
    打开 组件的 .json 文件,将 component 属性设置为 true 将这个 navigation 申明为一个自定义组件。
    在 .wxml .wxss 两个文件里写上基本的组件结构

//navigation.json
{
  "component":true
}
// 导航栏组件
// navigation.wxml

   
      
      {{title}}
   

//navigation.wxss
/* pages/science/science.wxss */
.navigation_container {
   width: 100%;
   height: 60px;
   background-color: rgba(228, 228, 228, 0.952);
   display: flex;
   align-items: center;
}

.navigation_icon {
   height: 25px;
   width: 25px;
   margin-right: 8px;
   margin-left: 8px;
}

.navigation_title {
   font-size: 20px;
}
  1. .js文件:和一般的 page 页面有一些不一样,
Component({							//开始的部分是Component,不是一般界面的 page

   properties: {							//之里面放的一些是可以在页面调用组件时修改的数据。
      title: {
         type: String,					//数据的类型
         value: 'default value',		// 表示这里的值:是调用组件时设置的值
      }
   },
   data: {
      someData: {}					//一些私有的值,调用的界面无法设置
   },
   methods: {						//一些方法,函数
      Back() {
         wx.navigateBack({
         })
      }
   }
})

自定义组件的使用

app.json 文件里新建界面 index,在 .json 文件里面 usingComponent 属性里面声明页面即将用到的 自定义组件 的 标签名称 以及 组件路径 。日后在该界面中使用时,就可以直接使用 <标签名 />

//index.json
{
  "usingComponents": {
    "navigation": "/static/component/navigation/navigation" ,
  },
}

在 .wxml 文件中,就可以直接调用。其中,前文说到的:组件中的titleproperties 属性里面的数据,这里面的数据的值:组件可以获取、页面可以设置。

// index.wxml

   
			//调用组件,并且设置 title为设定值

.js .wxss 就不用进行什么操作了。

完成的效果就差不多是这样了

微信小程序_component 自定义组件_第1张图片

好了,今天的分享就到这里了。另外我会多多更新的,虽然看的人估计不多,但是用这种方法记录学习足迹我觉得成就感就是非常的有。
最近也是咨询了考研的问题,也决定了参加几个比赛。别的不说,忙起来是挺好。认识的人也靠谱。
哈哈哈哈不说了。以上就是一个大二的前端的根正苗红小少年的分享。看到的大家们,都要生活幸福,学习进步,money噌噌噌⬆

拜拜ヾ(•ω•`)o

你可能感兴趣的:(前端_微信小程序,前端,小程序,组件化)