最近负责公司的微信小程序项目的开发,项目主要以文章展示为主,由于页面上有较多的重复的组件,所以将部分公用整理成模板以便多次利用,现做一整理。
定义模板
wxml
<template name="search-template">
<view class="search-container">
<image src="/images/search.png" mode="scaleToFill" class="search-image"></image>
<input type="text" confirm-type="search" class="search-input" placeholder="请输入要搜索的内容" />
</view>
</template>
上面代码中生成了一个搜索框的模板,搜索框置于页面顶部。
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
使用name属性,作为模板的名字。然后在内定义代码片段,如:
我们的模板代码需要写在标签中,并且用name属性给模板设置名字。
wxss
.search-container {
display: flex;
width: 100%;
height: 80rpx;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
border-bottom: 1rpx solid #ccc;
align-items: center;
box-shadow: 0rpx 1rpx 2rpx #ccc;
}
.search-image {
width: 52.5rpx;
height: 52.5rpx;
border: 1rpx solid #ccc;
border-right: none;
background: #fff;
}
.search-input {
width: 90%;
border: 1rpx solid #ccc;
border-left: none;
background: #ffffff;
flex-shrink: 0;
padding-left: 10rpx;
}
调整搜索板块的样式
至此,模板的定义就完成了。我们可以在项目根目录下新建一个叫template的文件夹保存模板。
模板的引入
模板引入的方式有两种,import和include。
import
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
在页面中需要的位置引入定义的search-template:
index.wxml
<import src="/templates/search-template/search-template.wxml" />
<template is="search-template"></template>
is属性用来声明需要使用的模板,is的值即是标签的name的值
模板使用参数
模板的参数由data传入,使用方法如下:
“`
index.js
data:{
someData:..,
moreData:..,
}
“`
在引用模板的页面的js中设置data或者使用setData向页面传入someData,然后在页面中的标签中使用data获取数据.数据之间用”逗号”分隔。
index.wxml
<view class="container">
<import src="/templates/comment-template/comment-template.wxml" />
<template is="comment-template" data="{{someData,moreData}}"></template>
</view>
这样就可以获取到需要的数据了,对数据的具体操作在定义template的时候设置。
template.wxml
<view wx:if="{{someData}}">
</view>
<view wx:for="{{moreData}}" wx:for-item="foo">
<view>{{foo.subData}}</view>
</view>
前端新司机,有不妥之处,欢迎指出。