E企盈营销工具技术服务商 热线:4006-838-530

微信小程序模板类template实例

E企盈直播平台营销卖货系统

模板WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。接下来博主将会以图文讲解,然后最后发出源码供大家参考。文件结构本文使用的模板类和模板结构如下:定义模板template 是一个模板化的技术使用 name 属性,作为模板的名字。然后在内定义代码片段,如:这里postItem表示模板名,供其他wxml文件调用、这个模板类的文件名称,即其他wxml文件使用时,需要如java导包 或者c/ c++引入头文件般,引入文件,然后再根据模板类的名称调用:如下可以看到的是,这里import 的  post-item-template.xml 正是 上图勾画的模板类文件的名称,小程序得绝对路径,都是从根目录开始  /xxxx/xxx/xx.xx  必须在目录得最前面加斜杠然后具体调用如下然后导入成功经之后,还需要导入模板类的wxss文件,在导入文件相应的wxss文件导入,而且必须导入到wxss中wxss导入wxss中wxml导入wxml中但是不能抽象js。因此只能叫模板化,不能叫模块化如下:template内路径问题:使用模板的时候 最好使用绝对路径,这样子对于不同位置的框架调用模板都能够通用了因为使用template就意味着,view使用了 wx:for 循环,但是这个时候,循环输出的数组只能有一个。也就是意味着, 不管输出什么数据,都必须在数组中,才能识别并且输出源码post-item-template.wxmltemplate name=”postItem”  view class=’post-container’    view class=’post-author-date’      image src=”{{author_img}}” class=’post-author’/image      text class=’post-date'{{date}}/text    /view    view class=’post-container-content’      text  class=’post-title’ {{post_title}}/text      image src=”{{post_image}}” class=’post-image’/image      text class=’post-text'{{text}}/text    /view    view class=’post-container-like’      view class=’post-like’        image src=’/images/good.png’ class=’post-like-image’/image        text class=’post-like-num'{{collect_num}}/text      /view      view class=’post-like’        image src=’/images/message.png’ class=’post-like-image’/image        text class=’post-like-num'{{view_num}}/text      /view      view class=’post-like’        image src=’/images/turn.png’ class=’post-like-image’/image        text class=’post-like-num'{{turn_num}}/text      /view      view class=’post-like’        image src=’/images/check.png’ class=’post-like-image’/image        text class=’post-like-num'{{check_num}}/text      /view    /view  /view/templatepost-item-template.wxss.post-container{  margin-top: 20px;    }.post-author-date{  margin-left: 10rpx;  margin-top: 3rpx;  margin-bottom: 3rpx;  height: 80rpx;  }.post-author{  height: 60rpx;  width: 60rpx;  border-radius: 50%;  vertical-align: middle;}.post-date{  line-height: 80rpx;  margin-left: 15px;  font-size: 42rpx;}.post-image{  height: 920rpx;  width: 100%;}.post-text{  margin: 10rpx 0 10rpx 10rpx;}.post-title{    font-size: 32rpx;  font-weight: bold;  margin-left: 15rpx;  margin-top: 15rpx;  margin-bottom: 15rpx;  }.post-like{  margin-left: 10px;  display: inline;}.post-like-image{    height: 32rpx;  width: 32rpx;  vertical-align: middle;}.post-like-num{  font-size: 25rpx;  margin-left: 3rpx;}posts.wxmlimport src=”posts-item/posts-item-template.wxml” /view  swiper catchtap=’onswipertap’  class=’swiper-container’ indicator-dots=’true’ indicator-active-color=’green’ autoplay=’true’    swiper-item      image src=’../../images/1.jpg’  class=’swiper-image’ data-postId=”0″/image    /swiper-item    swiper-item      image src=’../../images/2.jpg’  class=’swiper-image’ data-postId=”1″/image    /swiper-item    swiper-item      image src=’../../images/3.jpg’  class=’swiper-image’ data-postId=”2″/image    /swiper-item    swiper-item      image src=’../../images/4.jpg’  class=’swiper-image’ data-postId=”3″/image    /swiper-item  /swiper  block wx:for=”{{post_key}}” wx:for-item=”item”      !– //template —      view catchtap=’onPostTap’ data-postId=”{{item.postId}}” data-postName=”name”        template is = “postItem” data=”{{…item}}” /      /view  /block/viewpost.wxss/* pages/posts/posts.wxss */@import “/pages/posts/posts-item/posts-item-template.wxss”;.swiper-container{  width: 100%;  height: 920rpx;}.swiper-image{  width: 100%;  height: 920rpx;}以下是微信小程序项目源码:点击可以进入gitee直接下载源码包喔微信小程序演示程序版权所有,禁止转载,违者必究。喜欢的朋友可以点赞评论喔,您的支持是我更新最大的动力~

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序模板类template实例
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏