小程序<template>的使用

第一次做小程序用到了<template></template>模板的使用,感觉挺新奇的,我自己认为大概的就是组件这一类但是它可以判断何时使用什么样的模板通过判断来进行展示

写一点代码吧

//展示页jsvar app = getApp()
page({
   eg:{
        data:[1,2,3,4,5,6,7,8,9]      //模板页用来展示的数据
       }

})

上面的代码就是用来在展示页的数据

<!--展示页wxml-->
<import src="../template/template.wxml"/>  //引入模板的wxml文件

<view class="container">
     <template is="{{eg.data.length> 0 ? ‘data‘ : ‘noData‘}}" data="{{...eg}}"></template>   //此时进行判断该用哪个模板-->判断template 的name属性,eg是指要传入模板的数据
</view>
<!--模板页-->

<template name="noData">     //模板有name属性
    <view>
           没有数据哦!
    </view>
</template>

<template name="data">      //模板有name属性
<view wx:for=‘{{data}}‘ wx:key=‘{{key}}‘> <view>{{item}}</view> </view></template>     //此时循环的data是eg{data:[...]}

(展示效果)

此时可以看到效果 1,2,3,4,5,6,7,8,9

<template is=‘‘  "    data=" "></template>   此时的is用来进行判断  data是要传入模板中的数据...eg   ...(spread运算符) 

时间: 2024-08-18 09:01:45

小程序<template>的使用的相关文章

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

1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注:模板文件也是用的.wxml) <template name="proname"> <view class="myTempleta"> {{data.title}} </view>> </template>> 注

小程序template用法

小程序用有时会用到template   模板 那什么是template呢 template是模板   相当于html中的iframe 使用场景:比如 在首页需要显示轮播  分类页面也需要显示轮播   详情页面也需要显示轮播 并且是同一个轮播 这时就可以使用template 了 把轮播的代码提取出来放入模板标签中 在多个页面引用这个模板 把重复的xwml 提取出来重复使用 减少代码冗余 具体步骤:新建一个tempalte模板 和新建一个普通的页面一样 在wxml中写入模板标签 <template>

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

这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用,一直都没出现什么大问题.但是这次在微信小程序上,问题就出现了. 因为手机屏幕普遍和PC比小很多,template正常情况下我们给content一个padding:1 30rpx 40rpx 30rpx;时富文本内容在手机屏幕上显示时两边有留白,页面会好看,也为了用户手握手机是不回方便看文本. 文本内

小程序template和component的区别

1.小程序中模板template是不能写事件的,既没有js文件 组件component是可以自定义事件,并且组件有自己的生命周期 2,引入到页面的方式不同 template直接在.wxml页面中引入<import src='components/menu/menu.wxml' /> 需要用的地方这样写 <template is="menu" data="{{icons, iconsSwitch, iconBg}}"> </templat

微信小程序——template的循环嵌套

上一篇我们有写到 template的使用方法 .在实际运用中,需要做到template里面再嵌套一层循环.我们先看一下数据结构: 模板是用于循环list,现在的需求是在模板里面嵌套一个orderItemList的循环.写法也是wx:for,代码如下: order.orderItemList 里面的order 是你在引用模板的时候,取的for-item名字.还有不懂的可以看template的使用方法 . 前方高能预警!!!到目前为止,都很顺利.可是在用的时候,循环没出来.怎么回事啊...正解如下图

微信小程序-template模板

============================= 构建template模板                   ============================= 1.分析得出共为3个模板. ①:从最小模板入手. ============================== 1. 原文地址:https://www.cnblogs.com/vip-deng-vip/p/10358146.html

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序-学习总结

微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 设备               rpx换算成px(屏幕宽度/750)     px换算成rpx(750/屏幕宽度) iPhone5        1rpx = 0.42px                            1px = 2.34rpx iPhone6        1rpx = 0.5px                              1p

值得记录的(五)- 微信小程序自定义 tabbar

一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法.并说说这几种方法各自的特色. 类 navigator 跳转方式 类 navigator 跳转方式是我自己起的名称,因为它的实现思路就是这个样子的.期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路.进行了这种方式的尝试,并为后续提供了解决思路.在