template(模板):是可以在wxml中引用的代码,就是在wxml中引用公用的wxml类型的代码,它的作用类似于组件,因此这里简单的说明下template与Component (组件)的区别。

template(模板)与Component (组件)的区别:

1.template(模板):主要用于显示,简单的说主要是用于嵌入wxml的代码,模板中是可以拥有对应的样式以及逻辑,但是他并没有属于的对应的js文件,它的逻辑依赖于引用的页面。

2.Component(组件):作为一个单独的功能模块,不仅可以包含页面展示还可以包含该模块的事件逻辑处理。像一个页面一样,Component组件可以包含wxml wxss js json 文件。

总的来说,template(模板)和Component (组件)非常相似,Component (组件)相比于template(模板)更完整,接近于一个独立的模块,有自己的逻辑方法,所以在使用场景上会有一定的区别,template(模板)更多的适用于仅仅是展示用的,而Component (组件)可用于业务上或者涉及的逻辑相对复杂的场景上进行使用。

引入模板
新建一个wxml文件,用template的标签写入对应的内容,并命名name的属性(name相当于ID,具有对应的识别功能)

然后在对应的页面中通过import模板文件,并通过template标签进行读取,is属性对应template的name属性,is属性可以通过匹配匹配出要读取的模板。

使用注意
template是可以依赖于引用页面的样式以及逻辑的,因此引用的时候要非常谨慎注意。如引用js,和wxss。

如图给template加上class和事件

在引入的index文件中的wxss文件加入对应的类名以及加入对应的事件

 

 

证明template的代码是可以依赖引入文件的js,css

参数传递
参数的传递可以通过data属性进行传递并在模板文件中通过item进行赋值

总结:以上就是template模板的一些基础知识,在使用的量上可能没有component那么频繁,毕竟相对与component,template所使用场景还是稍微少了一点。当然如果要深度解析template的案例的话,大家可以参考一下wxPrase的这个插件,插件中就通过template实现富文本的读取。

小程序模板template使用介绍的更多相关文章

  1. 小程序模板template

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用 name 属性,作为模板的名字.然后在<template/>内定义代码片段,如: & ...

  2. 微信小程序~模板template引用

    当您的项目需要多次使用同一个布局和样式的时候,您就可以考虑使用template(模板)来减少冗余代码. 使用方式: 1.新建一个template文件夹来存放您的通用模板: 2.在文件夹里面新建一个wx ...

  3. 小程序开发--template模板

    小程序的template模板可以说是我遇到的最简单的了,看看实例: <template name="article"> <view class='containe ...

  4. 【原创】前端开发人员如何制作微信小程序模板

    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/305,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 最近接触了一下微信小程 ...

  5. 微信小程序模板发送,openid获取,以及api.weixin.qq.com不在合法域名内解决方法

    主要内容在标题三,老手可直接跳到标题三. 本文主要解决个人开发者模板消息发送的问题(没有服务器,不能操作服务器的情况) 针对api.weinxin.qq.com不在以下合法域名列表内的问题提出的解决方 ...

  6. 微信小程序(template的使用)

    小程序的template是一个模版功能,在创建一个template后,其他的页面可以引用,相比component较简单.方便! template只需要两个文件,一个wxss文件和wxml文件,也只有这 ...

  7. 微信小程序模板消息后端代码

    利用spring 事件发送模板消息 1.定义事件 import com.ruoyi.project.salerauth.domain.TemplateMessage; import org.sprin ...

  8. 微信小程序模板消息群发解决思路

    基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...

  9. 120多套各种类别微信小程序模板源码打包下载

    120多套各种类别微信小程序模板源码打包下载,以下是部分截图欢迎下载!120多套各种类别微信小程序模板源码打包下载 下载地址:https://pan.baidu.com/s/1Cfqyc9p2ZDOc ...

随机推荐

  1. 用Cocoapods并结合Github管理,导入,更新,下载自己的SDK

    转自:http://www.jianshu.com/p/129d3c315ea6

  2. ios 10 更新 新体验

    1.使用手机登录开发者网站https://developer.apple.com/download/ 2.下载描述文件 3.安装描述文件,按照提示步骤操作 4.更新ios系统 下面的方法是连接电脑直接 ...

  3. POJ 1949 Chores

    Farmer John's family pitches in with the chores during milking, doing all the chores as quickly as p ...

  4. Ceph 架构以及原理分析

    一.架构 Ceph在一个统一的系统中独特地提供对象,块和文件存储. Ceph高度可靠,易于管理且免费. Ceph的强大功能可以改变您公司的IT基础架构以及管理大量数据的能力. Ceph提供了非凡的可扩 ...

  5. Spring源码加载BeanDefinition过程

    本文主要讲解Spring加载xml配置文件的方式,跟踪加载BeanDefinition的全过程. 源码分析 源码的入口 ClassPathXmlApplicationContext构造函数 new C ...

  6. nginx 自启动设置

    首先,在linux系统的/etc/init.d/目录下创建nginx文件,使用如下命令: 1 vim /etc/init.d/nginx 在脚本中添加如下命令: #!/bin/sh # # nginx ...

  7. 201871010119-帖佼佼《面向对象程序设计(java)》第八周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  8. Android(常用)主流UI开源库整理

    这几天刚做完一个项目..有点空余时间,就想着吧这一两年做的项目中的UI界面用到的一些库整理一下.后来想了一下,既然要整理,就把网上常用的 AndroidUI界面的主流开源库 一起整理一下,方便查看. ...

  9. 函数式响应式编程 - Functional Reactive Programming

    我们略过概念,直接看函数式响应式编程解决了什么问题. 从下面这个例子展开: 两个密码输入框,一个提交按钮. 密码.确认密码都填写并一致,允许提交:不一致提示错误. HTML 如下: <input ...

  10. Python学习之while

    count = 0while count <= 5: print('人生苦短,我用Python!', 'count = ', count) count += 1