微信小程序_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
<view class="component">
   <view class="navigation_container">
      <image src="/static/icons/navigation_icons/back.png" class="navigation_icon" catchtap="Back"></image>
      <text class="navigation_title">{{title}}</text>
   </view>
</view>

//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;
}

3. .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 文件中，就可以直接调用。其中，前文说到的：组件中的title 是 properties 属性里面的数据，这里面的数据的值：组件可以获取、页面可以设置。

// index.wxml
<view class="page">
   <!-- 导航栏区域 -->
<navigation title="急救科普"/>			//调用组件，并且设置 title为设定值
</view>

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

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

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

拜拜ヾ(•ω•`)o