微信小程序(template的使用)
小程序的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的使用)的更多相关文章
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序 template添加点击事件
介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...
- 微信小程序——template详细使用
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹 1.1.2.使用 name 属性,作为模板的名字.然后 ...
- 微信小程序template富文本插件image宽度被js强制设置
这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...
- .NET开发微信小程序-Template模块开发
1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...
- 微信小程序——template的使用方法
今天需要做一个[我的订单]页面,订单有几种状态,觉得把订单列表封装成一个模板更好.下面讲一下,如何用小程序自带的template构建一个模板. 1.构建订单列表模板页,命名为 [order.wxml] ...
- 转发:微信小程序-template模板使用
转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图: 根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...
- [转]微信小程序-template模板使用
本文转自:http://blog.csdn.net/u013778905/article/details/59646241 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一 ...
- 微信小程序 - template和include详细描述
演示 index.wxml <!-- 内部模板 --> <template name="all"> {{a}} {{b}} </template> ...
随机推荐
- python编写猜拳代码
一.项目要求: 电脑随机出拳和用户猜拳三次.胜利条件如下: (1)(石头 胜 剪刀) (2)(剪刀 胜 布) (3)(布 胜 石头) 二.代码 #!/usr/bin/env python # -*- ...
- repo+manifests+git方式管理安卓代码
repo+manifests+git方式管理安卓代码 1.repo的获取 repo只是google用Python脚本写的调用git的一个脚本,主要是用来下载.管理Android项目的软件仓库.(也就是 ...
- list:[::5]
0-99的数列 L = [0, 1, 2, 3, ..., 99] 所有数,每5个取一个 >>> L[::5] [0, 5, 10, 15, 20, 25, 30, 35, 40, ...
- 三分钟掌握docker基本指令
一下内容是我用markdown编辑的,所以排版不是太ok~ # Docker ## 1.核心概念 docker主机(Host):安装了docker程序的机器.docker直接安装再操作系统上. doc ...
- Qt事件系统之五:事件过滤器和事件的发送
Qt提供了事件过滤器来实现在一个部件中监控其他多个部件的事件.事件过滤器与其他部件不同,它不是一个类,只是由两个函数组成的一种操作,用来完成一个部件对其他部件的事件的监视.这两个函数分别是 insta ...
- [TJOI2013]松鼠聚会
Description 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短 ...
- 配置Ubuntu16.04第01步:U盘安装 Ubuntu 16.04系统
Ubuntu 每年发布两个版本,Ubuntu 16.04 开发代号为“Xenial Xerus”,为第六个长期支持(LTS)版本. 1. 制作U盘系统安装盘 1.1下载最新的Universal USB ...
- ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
看到新浪微博.百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能. 当然,加入打赏功能并非是真的想要让别人打赏.因为只有那些真正能引起共鸣,发人深思,让人受益 ...
- AJPFX总结关于Java中过滤出字母、数字和中文的正则表达式
1.Java中过滤出字母.数字和中文的正则表达式 (1)过滤出字母的正则表达式 [^(A-Za-z)] (2) 过滤出 数字 的正则表达式 [^(0-9)] (3) 过滤出 中文 的正则 ...
- [BZOJ1061][Noi2008]志愿者招募 线性规划+费用流
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1061 根据题意列方程,然后用网络流解线性规划. 题解直接贴ByVoid的吧,太神了:htt ...