前两个星期,我的电脑差点被黑白无常给勾走了。
现在我的电脑终于鬼门关里走一趟,平安回来了。我的博客也要正常更新了,( •̀ ω •́ )y
这次我要跟新的内容依然是关于【微信小程序】,这次是有关 自定义组件
在这个案例里面:是在 index 界面里面 , 使用了 navigation 组件
自定义组件
- 自定义组件的必要性:
- 问题描述:在一个界面或者多个界面中,如果我们都需要重复使用一些长得相似,代码几乎一模一样的组件。我们怎么办?例如:微信小程序,每个二级界面都需要一个导航栏,就只有标题不一样。
- 自定义组件:这个时候,微信小程序为我们提供了自定义组件的申明和使用方法的介绍。
自定义组件的申明方法:
-
新建navigation 组件文件:
本例路径:/static/component/navigation
文件夹新建好以后,鼠标右键-新建Component-填写文件名称 这里的名称最好和文件夹名保持一致 -
代码:
打开 组件的 .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;
}
- .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 就不用进行什么操作了。
完成的效果就差不多是这样了
好了,今天的分享就到这里了。另外我会多多更新的,虽然看的人估计不多,但是用这种方法记录学习足迹我觉得成就感就是非常的有