微信小程序开发之—

一概述

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
定义模板时：使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段
导入模板：使用import导入模板
使用模板时：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

二模板使用示例

2.1 定义模板

在index文件夹下创建my_template.wxml

<template name="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view>
</template>

说明：

<template>标签用于定义一个模板，name属性表示模板的名称
<template>标签标签之间是页面的内容

2.2 导入模板和使用模板(index.wxml)

<import src="./my_template"/>
<template is="msgItem" data="{{...item}}"></template>

2.3 给模板设置数据(`item`)

 data: {item:{index:0,msg:'this i s a template',time:'2019-01-15'}
}

2.3 效果图

三模板示例二

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

3.1 创建odd.wxml和event.wxml模板

odd.wxml

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

event.wxml

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

3.2 导入模板及模板渲染

<import src="./odd"/>
<import src="./even"/><block wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="unique"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

3.3 效果图

四参考

官方文档—使用模板
CSDN—参考代码

微信小程序开发之——模板相关推荐

2019最新微信小程序开发制作模板
闪云科技小程序,包含多样化的模板和可视化操作页面,能够快速创建各类版本小程序. 单页版: 单页版小程序是单页面的广告墙,主要功能包括:富文本.图片展示.视频播放.地图导航.电话拨打,为创业者提供形象展 ...
微信小程序开发template模板使用
在小程序开发过程中,一个项目需要在多处页面使用类似的模块,就需要创建模板减少代码量,同时提高代码复用度.小程序通过template 标签使用模板,template 标签的 is 属性与模板的 name ...
微信小程序开发02(模板语法与事件绑定)
模板语法与事件绑定
微信小程序开发的作用_分享微信小程序开发可以实现什么
现在小程序在众多场所都有出现过,小程序开发迎来了飞速发展时期.目前微信小程序开发分为模板开发和定制开发.那么,对比来说定制小程序开发优势有哪些? 1.开发过程更可控定制化开发更具体,从开发前对产品定 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序开发学习2（模板与配置）
微信小程序开发学习2(模板与配置) 1.学习目标能够使用WXML模板语法渲染页面结构能够使用WXSS样式美化页面结构能够使用app,json对小程序进行全局性配置能够使用page.json对小 ...
微信小程序开发代理展示销售网站源码织梦模板（手机同步）
本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围极广,不仅仅局限于一类型的企业,小程序网站.微信小程序开发类的网站都可以用该模板. 你只需要把图片和文章内容换成你的即可,颜色都可以修改,改完让 ...
微信小程序开发定制作分销商城社区团购外卖模板公众号源码带后台
外卖CPS红包小程序源码分享外卖cps带分销返利源码饿了么红包.美团优惠券开发(外卖cps,三级裂变源码) 源代码地址 http://y.mybei.cn 搭建步骤下载以上源代码到本地 http ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...

微信小程序开发之——模板

一概述

二模板使用示例

2.1 定义模板

2.2 导入模板和使用模板(index.wxml)

2.3 给模板设置数据(`item`)

2.3 效果图

三模板示例二

3.1 创建odd.wxml和event.wxml模板

3.2 导入模板及模板渲染

3.3 效果图

四参考

微信小程序开发之——模板相关推荐

最新文章

热门文章

微信小程序开发之——模板

一 概述

二 模板使用示例

2.1 定义模板

2.2 导入模板和使用模板(index.wxml)

2.3 给模板设置数据(item)

2.3 效果图

三 模板示例二

3.1 创建odd.wxml和event.wxml模板

3.2 导入模板及模板渲染

3.3 效果图

四 参考

微信小程序开发之——模板相关推荐

最新文章

热门文章

一概述

二模板使用示例

2.3 给模板设置数据(`item`)

三模板示例二

四参考