微信小程序-模板的定义和使用

WeChat小程序交流（QQ群：769977169）

模板定义时，主要是指定模板名称，如name="template"；且在使用时指定模板名称，如is="template"。

模板既可以直接定义在页面xxx.wxml，也可以在其他的xxxTemplate.wxml中定义后，再通过import导入使用。

1、创建temple目录：在需要创建的目录下创建——鼠标右键——新建文件夹——命名，如：temple

2、创建temple文件

2.1）创建temple.wxml文件：选中temple目录——鼠标右键——新建文件——命名，如：temple.wxml

2.2）创建temple.wxss文件：选中temple目录——鼠标右键——新建文件——命名，如：temple.wxss

方法1，直接定义在页面的xxx.wxml中，并使用

<!-- 模板定义方法1 -->
<template name="template1"><view>公司：{{item.company}}</view><view>姓名：{{item.name}}</view>
</template><!-- 模板使用 -->
<block wx:for="{{templateArray}}"><template is="template1" data="{{item}}"></template>
</block>

方法2

在templateView.wxml中定义，并通过import引用使用

<!-- 模板定义方法2 使用import引用 -->
<template name="templateView"><view class="templateStyle">公司:{{item.company}} 姓名:{{item.name}}</view>
</template>

在templateView.wxss中定义样式，并通过import引用使用

.templateStyle{color: #6495ED;
}

在template.wxss中引用模板样式

/* pages/modules/Template/template.wxss */
@import "../Template/templateView.wxss";.textStyle{color: #FF1493;
}

在template.wxml中引用模板，并使用

<!--pages/modules/Template/template.wxml-->
<import src="../Template/templateView.wxml" /><text class='textStyle'>import引用</text>
<block wx:for="{{templateArray}}"><template is="templateView" data="{{item}}"></template>
</block>

在template.js中定义的数据

  data: {templateArray: [{company:"VSTECS", name:"devZhang"},{company:"VSTECS", name:"iOSZhang"}],},

使用效果图

微信小程序-模板的定义和使用相关推荐

微信小程序模板消息群发、无限制推送相关讲解
模版消息推送是微信小程序采用的通知形式,用户本人在小程序页面有交互行为后,可触发下发通知,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但是为 ...
【转】微信小程序模板消息无限制群发
模版消息推送是微信小程序采用的通知形式, 用户本人在小程序页面有交互行为后,可触发下发通知 ,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但 ...
微信小程序模板消息无限制群发
模版消息推送是微信小程序采用的通知形式, 用户本人在小程序页面有交互行为后,可触发下发通知 ,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但 ...
微信小程序模板消息还能群发？无限制推送？
模版消息推送是微信小程序采用的通知形式,用户本人在小程序页面有交互行为后,可触发下发通知,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但是为 ...
突破微信小程序模板消息的推送限制
"模版消息"是小程序非常重要且可主动触达用户的一种能力.爱鲜蜂小程序通过"模版消息",建立一套用户唤醒机制,达到提升用户复购率的目的.小打卡小程序的近30天访问 ...
微信小程序模板消息（服务通知消息）原始post工具封装(不使用jar包--坑比较多)，解决47001(JSON格式)和中文乱码问题
微信小程序模板消息(服务通知消息)原始post工具封装(不使用jar包--坑比较多),解决47001(JSON格式)和中文乱码问题参考文章: (1)微信小程序模板消息(服务通知消息)原始post工具 ...
axure小程序模板_微信小程序模板案例收集
微信小程序发布近四年来,诞生了各行各业的高质量小程序,其中有很多都是用微信小程序模板制作的.新手在制作自己的小程序时,就可以参考这些好看的小程序模板案例. 1.电商小程序这是目前非常常见的小程序类型 ...
微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
微信小程序傻瓜制作_微信小程序模板制作：手把手教你做一个生鲜小程序
传统线下生鲜水果类商家如今正面临诸多问题,包括服务范围有限.客户源不稳定.缺少订单导致新鲜食材过期等等.新零售概念的提出,很多商家虽然懂得要打通线上渠道,但通常都是仅仅局限于普通O2O外卖平台,其实这 ...

微信小程序-模板的定义和使用

微信小程序-模板的定义和使用相关推荐

最新文章

热门文章