微信小程序 Template详解及简单实例

2024-10-16 19:30:33

微信小程序 Template

模板

WXML提供模板（Template），可以在模板中定义代码片段，然后在不同的地方使用。可以保证格式以及数据的相同。

1-定义模板

使用`<template name="tempName"></template>`标签定义模板，并将模板名称命名为tempName，赋值给属性name。在标签内部，定义模板结构。如下：

<!-- template.wxml -->
<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

2-使用模板

使用<template is="tempName" />标签，在需要使用模板的地方。如果要用到js文件中的数据，则需要添加data属性。如下：

<!-- template.wxml -->

<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
此时在页面上就会重复显示三次相同的信息。
data中的数据，来源于js文件，如下：

<!-- template.js -->
Page({
 data: {
  item: {
   index: 0,
   msg: 'this is a template',
   time: '2016-09-15'
  }
 }
})

3-is属性

is属性不仅可以静态的指向渲染的模板，也可以使用Mustache语法，来动态决定具体需要渲染哪个模板。如下：

<!-- template.wxml -->

// templates
<template name="odd">
  <view> odd </view>
</template>
<template name="odd">
  <view> even </view>
</template>

// is属性使用Mustache语法动态渲染template
<block wx:for="{{[1, 2, 3, 4,5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

如上代码，则会在页面中根据条件来显示odd 或是 even

4-模板的引用

如上都是在同一个wxml文件中定义和引用模板，而模板的定义和引用是可以分开的。即在一个文件中定义模板，而在其他一个或多个文件wxml文件中都可以使用定义好的模板。
从外部文件中引用模板，使用import src="templateUrl" />标签。同样使用is属性来指向要引用的标签。
如目录如下：

-pages
  |--index
    |--index.js
    |--index.json
    |--index.wxml
    |--index.wxss
  |--template
    |--template.js
    |--template.json
    |--template.wxml
    |--template.wxss

要在index.wxml中使用template中定义的模板，则需要先在index中利用import来导入该模板：

<!-- index.wxml -->
<import src="../template/template.wxml"
<template is="msgItem" data={{...indexData}}
// 使用的是自己js文件中的数据

要注意import作用域，其仅仅引用目标文件中template。如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

参考

微信小程序文档-框架-视图层-WXML-模板

微信小程序文档-框架-视图层-WXML-引用

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content">  <view class="author-date"> &
微信小程序 template模板详解及实例代码

微信小程序 template模板详解如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b
微信小程序template模板实例详解

微信小程序template模板使用前言微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template. 效果图一.模板定义模板最重要的是模板的名称,即"" 以下是实例模板代码 <template name="postItem"> <view class='post-container'> <view class='post-author-date'> <image cl
详解微信小程序 template添加绑定事件

详解微信小程序 template添加绑定事件对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log
微信小程序 template模板详解及实例

微信小程序 template模板详解及实例首先看一些官方的一些介绍. 模板:模板功能是通过对template 标签的属性 name="" 去创建不同模板,通过is="name的值"来使用. 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利.下面看一下我自己的一个Demo. 先放出效果图(数据来自聚合数据) 可以看到,除了选项个数的差别之外,其他布局是相同的. 下面的每一道题的模板. <template name="carItem&q
微信小程序 Template详解及简单实例

微信小程序 Template 模板 WXML提供模板(Template),可以在模板中定义代码片段,然后在不同的地方使用.可以保证格式以及数据的相同. 1-定义模板使用`<template name="tempName"></template>`标签定义模板,并将模板名称命名为tempName,赋值给属性name.在标签内部,定义模板结构.如下:  <!-- index: int msg: stri
微信小程序 video详解及简单实例

微信小程序 video详解在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!! 视频上传部分代码: 视频播放随机颜色的产生: 颜色页面的选择: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
微信小程序 textarea 详解及简单使用方法

微信小程序 textarea 简易解决方案微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值, 解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了 wxml文件代码: <form bin
Python Flask 搭建微信小程序后台详解

前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个人觉得的微信小程序与后台的交互有点像ajax,所以有ajax开发经验的同学开发小程序应该很容易上手,因为本文着重讲解后台程序的搭建,所以,微信小程序的前端开发将一笔带过,有兴趣学习小程序前端语言的同学可移步网易云课堂的一套快速入门课程<轻松玩转微信小程序>. 分三步讲解微信小程序与Python后台
微信小程序（应用号）简单实例应用及实例详解

Demo 预览演示视频(流量预警 2.64MB) GitHub Repo 地址仓库地址:https://github.com/zce/weapp-demo 使用步骤将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正
微信小程序框架详解及实例应用

快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是
微信小程序数据绑定详解及实例

微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定. >>>数据视图绑定做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用
微信小程序参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
微信小程序 slider 详解及实例代码

微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器属性名类型默认值说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
微信小程序 action-sheet详解及实例代码

微信小程序开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名类型默认值说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance

微信小程序 Template详解及简单实例

相关推荐

随机推荐