微信小程序模板使用总结

最近负责公司的微信小程序项目的开发，项目主要以文章展示为主，由于页面上有较多的重复的组件，所以将部分公用整理成模板以便多次利用,现做一整理。

定义模板

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>

前端新司机，有不妥之处，欢迎指出。