微信小程序 - template和include详细描述
演示

index.wxml
<!-- 内部模板 -->
<template name="all">
{{a}} {{b}}
</template>
<template is="all" data="{{a:1,b:2}}" /> <!-- 内部模板(扩展运算符) -->
<template name="allf">
<view>{{name}}</view>
</template>
<view wx:for="{{searchData}}" wx:key="">
<template is="allf" data="{{...item}}" />
</view> <!-- 外部模板, -->
<import src="./wechat-template.wxml" />
<template is="weall" data="{{a:3,b:4}}" /> <!-- include -->
<include src="./wechat-module.wxml" /> <!-- include和template有何不同呢?
include:和原来页面一样,打比方来说就是页面分离专用
template:模板,调用页面数据填充数据 template可以随意改变吗?
模板如果被随便改变,那就不叫模板了! 命名?
建议模板命名:xxxx-template.wxml
建议页面模块命名:xxxx-module.wxml include可以导入数据吗?
include不能!它只能做页面分离时作用 关于template官方文档?
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html?search-key=%E6%A8%A1%E6%9D%BF%E4%BD%BF%E7%94%A8 -->
index.js
Page({
/**
* 页面的初始数据
*/
data: {
searchData: [{ name: '搜索1' }, { name: '搜索2' }, { name: '搜索3' }, { name: '搜索4' }]
}
})
wechat-module.wxml
<view>嘿嘿嘿,include导入进来的</view>
wechat-template.wxml
<template name="weall">
{{a}} {{b}}
</template>
祝大家圣诞节快乐,恭迎元旦!
微信小程序 - template和include详细描述的更多相关文章
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 利用python实现微信小程序游戏跳一跳详细教程
利用python实现微信小程序游戏跳一跳详细教程 1 先安装python 然后再安装pip <a href="http://newmiracle.cn/wp-content/uploa ...
- 微信小程序——template详细使用
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹 1.1.2.使用 name 属性,作为模板的名字.然后 ...
- 微信小程序开发总结(详细)
转载: 小程序开发总结(详细) 这段时间一直在做小程序,总结下.后续可能会不断更新,努力写仔细点,争取让人看到就能会写. 一,页面结构. 这基本是小程序的标准目录结构.我们从上到下解释下:pages文 ...
- 微信小程序template富文本插件image宽度被js强制设置
这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...
- uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号
授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序 template添加点击事件
介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...
- 微信小程序之蓝牙开发(详细读数据、写数据、附源码)
本文将详细介绍微信小程序的蓝牙开发流程(附源码)准备:微信只支持低功耗蓝牙也就是蓝牙4.0,普通的蓝牙模块是用不了的,一定要注意. 蓝牙可以连TTL接到电脑上,再用XCOM调试 一开始定义的变量 va ...
随机推荐
- delphi 取得任意程序的命令行
program GetCommandLineExDemo; uses Windows; constSystemHandleInformation = 16;ProcessBasicInformatio ...
- Windows Phone本地数据库(SQLCE):8、DataContext(翻译)
这是“windows phone mango本地数据库(sqlce)”系列短片文章的第八篇. 为了让你开始在Windows Phone Mango中使用数据库,这一系列短片文章将覆盖所有你需要知道的知 ...
- 【tensorflow】1.安装Tensorflow开发环境,安装Python 的IDE--PyCharm
================================================== 安装Tensorflow开发环境,安装Python 的IDE--PyCharm 1.PyCharm ...
- android开发:全屏和退出全屏
android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...
- 提高你的代码稳定性与可读性-lint工具
from://http://wiki.eoe.cn/page/Improving_Your_Code_with_lint.html 负责人:lingzideshensha 分任务原文链接:http:/ ...
- linux syslog详解 转
分三部分 一.syslog协议介绍 二.syslog函数 三.linux syslog配置 一.syslog协议介绍 1.介绍 在Unix类操作系统上,syslog广泛应用于系统日志.syslog ...
- NOI2015滚粗记
我的第一次也是最后一次NOI 好像写的晚了许多……可能一谈到退役总会有些伤感,并不愿去面对…… 一路走来已有5年,虽然我总在说“其实我好好学的时间只有半年”,但那也不过是给自己是蒟蒻找的借口吧...一 ...
- JavaScript:Array 对象
ylbtech-JavaScript:Array 对象 1. 返回顶部 Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); ne ...
- JavaScriptSerializer 类
ylbtech-.Net-Class:JavaScriptSerializer 类 应对 Json.NET 使用序列化和反序列化. 为启用 AJAX 的应用程序提供序列化和反序列化功能. 1.实例返回 ...
- 【deep learning学习笔记】注释yusugomori的DA代码 --- dA.cpp --模型准备
辅助函数和构造函数. #include <iostream> #include <math.h> #include "dA.h" using namespa ...