网库网(www.wangkuwang.com)精品网站源码,织梦建站模版,游戏源代码分享平台

模板户源码

当前位置:首页 -> CMS教程 -> zblog教程 正文

微信小程序之 Template模板组件的使用详解

时间:2019-03-04 08:06:07 [整站源码]作者:zhaopulei


明天的地平线 明天的地平线

项目中经常会出现大量列表和布局样式相同的地方,一般人为了简单总是复制粘贴,但是带来的直接问题就是项目中存在很多相同的代码,并且如果需求变动或者页面调整,将会有很多地方都需要调整,工作量立马变大了很多,模板就能很好的解决该问题,其实这并不是一个新的概念,在Angular、Vue这样的MVVM框架中早就有这样的组件了,所以为了后续维护的方便还是要尽量使用模板来编写程序,下面我们来看看微信小程序中是怎么使用模板的

1、定义一个template模板

我们可以将我们写的所有模板放到一起,建议在page同级的目录下新建一个template文件夹放所有的模板,每个模板是根据name属性来区分的,所以我们为模板起名为blog

<template name="blog">
  <navigator open-type=navigate url={{url}} class="good">
    <view class=content>
      <text class=title>{{item.title}}</text>
    </view>
    <view class=right>
      <text class=is-send>{{item.blogContent}}</text>
    </view>
  </navigator>
</template>

2、调用template模板

1)首先需要在使用模板的wxml文件中引入模板文件,如果模板有自己的样式,则需要引入在使用的wxss文件中引用模板所对应的样式

<import src="../../template/blogTemplate/blogTemplate.wxml"/>


@import "../../template/blogTemplate/blogTemplate.wxss";

2)设置指定的模板,is的值就是指调用那个模板,也就是模板的name属性值,然后通过data属性就能将值传到template模板中了

<block wx:for="{{blogList}}" wx:key="{{item}}">
    <template is="blog" data="{{item}}"></template>
</block>

使用模板还有另外一种调用方式:

<block wx:for="{{blogList}}" wx:key="{{item}}">
    <template is="blog" data="{{...item}}"></template>
</block>

两种方式的区别在于,使用后面这种方法,我们的 template.wxml 文件中,所有的 item.xxx 就可以直接替换成 xxx ,但是这两种的显示效果是一样的


    发送中

    本文标签:AutoTags插件服务端需要您提供购买者的账号和密码才能继续访问  折翼天使  莎莎源码  吾爱源码  其他源码 

    转载请注明来源:PHP手机端发卡多种支付商业版源码

    本文永久链接地址:https://www.suibianlu.com/11942.html

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
    若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法链接失效或侵犯版权,请给我们来信:admin@suibianlu.com

    栏目导航
    最新文章
    热门文章
    Top