小程序的template是一个模版功能,在创建一个template后,其他的页面可以引用,相比component较简单、方便!

template只需要两个文件,一个wxss文件和wxml文件,也只有这两个功能起作用,只用于显示,json和js文件创建了也无效。

下面是简易教程

1、新建两个文件,template.wxml和template.wxss,在wxml里面定义template,取名为msg-template (名字自定义)

2、在其他文件通过<import src="template.wxml"/>引入到文件,用template标签引用,其中is是在template的name值

现在就可以看到效果了

3、写template.wxss,在引入文件的wxss中@import "./template/template.wxss";引入templage.wxss

template.wxssd中设置颜色为

结果是

(引入的wxss和原文件的wxss是通用的,分开写是为了方便管理,注意在模板样式取名加模板名用以区分,避免混淆),如果取名相同,可能会引起冲突

4、向模板传值,在引用文件的template标签上通过data="{{data}}"传值,模板中通过传的参数名取值

结果

模板中取值的名字可以自定义,也可以多个传值

结果

5、template.wxss中可以绑定事件,由于模板没有自己的js文件,所以的处理事件在引用文件中。

总结:template模板就是把统一的一些代码放在另一个文件供引用。wxss可以分出来管理,最后使用的时候都是在同一个文件里处理。逻辑处理、数据处理都是在引用文件中。

我是刚入门不久的前端工程师,内容写的可能不是那么精简、清楚,我会慢慢改进排版以及内容,希望各位多多指点,多多支持,谢谢

(ps: 如果有刚加入前端这个行业的,比较迷茫的同学,欢迎进群交流,希望不嫌弃的同行或者大佬加群大家一起交流,相信未来会更好

群名称:web技术交流群(往全栈发展的)

群   号:815957915)

微信小程序(template的使用)的更多相关文章

  1. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  2. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  3. 微信小程序 template添加点击事件

    介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...

  4. 微信小程序——template详细使用

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹  1.1.2.使用 name 属性,作为模板的名字.然后 ...

  5. 微信小程序template富文本插件image宽度被js强制设置

    这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...

  6. .NET开发微信小程序-Template模块开发

    1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...

  7. 微信小程序——template的使用方法

    今天需要做一个[我的订单]页面,订单有几种状态,觉得把订单列表封装成一个模板更好.下面讲一下,如何用小程序自带的template构建一个模板. 1.构建订单列表模板页,命名为 [order.wxml] ...

  8. 转发:微信小程序-template模板使用

    转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图:   根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...

  9. [转]微信小程序-template模板使用

    本文转自:http://blog.csdn.net/u013778905/article/details/59646241 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一 ...

  10. 微信小程序 - template和include详细描述

    演示 index.wxml <!-- 内部模板 --> <template name="all"> {{a}} {{b}} </template> ...

随机推荐

  1. Image2Caption

    定义 图像标注或语言生成图像问题把计算机视觉与自然语言处理联系在了一起,是广义的人工智能领域的一大难题.通常涉及到特征提取(用cnn提取出图像内部不为人类感知的向量特征)和语言模型建立.为图像提取文字 ...

  2. WordPress xmlrpc.php flaw exploited to install a WSO 2.1 Web Shell by oRb

    WordPress xmlrpc.php flaw exploited to install a “WSO 2.1 Web Shell by oRb” Below you can see in the ...

  3. Linux 常用命令十五 用户和组操作命令

    一.创建一个用户 wang@wang:~/workpalce/threading$ sudo useradd -m python # -m创建家目录 wang@wang:~/workpalce/thr ...

  4. hdu 1348【凸包模板】

    #include<iostream> #include<iostream> #include<algorithm> #include<cmath> us ...

  5. 洛谷 P2762 太空飞行计划问题 【最大权闭合子图+最小割】

    --一道难在读入的题. 最后解决方案直接getline一行然后是把读优拆掉放进函数,虽然很丑但是过了. 然后就是裸的最大权闭合子图了,把仪器当成负权点向t连流量为其价格的边,s向实验连流量为实验报酬的 ...

  6. 浅谈并查集 By cellur925【内含题目食物链、银河英雄传说等】

    什么是并查集? 合并!查询!集合! 专业点说? 动态维护若干不重叠的和,支持合并查询的数据结构!(lyd老师说的) 数据结构特点:代表元.即为每个集合选择一个固定的元素,作为整个集合的代表,利用树形结 ...

  7. python系列1_travel

    Python__copy copy模块用于对象的拷贝操作.该模块只提供了两个主要的方法:copy.copy与copy.deepcopy,分别表示浅复制与深复制. 浅拷贝(copy):拷贝父对象,不会拷 ...

  8. Linux命令-自动挂载文件/etc/fstab功能详解

    Linux命令-自动挂载文件etcfstab功能详解 一./etc/fstab文件的作用 磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载. 系 ...

  9. 暑期训练狂刷系列——poj 3264 Balanced Lineup(线段树)

    题目连接: http://poj.org/problem?id=3264 题目大意: 有n个数从1开始编号,问在指定区间内,最大数与最小数的差值是多少? 解题思路: 在节点中存储max,min,然后查 ...

  10. poj 2349 Arctic Network(最小生成树的第k大边证明)

    题目链接: http://poj.org/problem?id=2349 题目大意: 有n个警戒部队,现在要把这n个警戒部队编入一个通信网络, 有两种方式链接警戒部队:1,用卫星信道可以链接无穷远的部 ...