微信小程序学习总结(三)条件、模板、文件引用实例分析


Posted in Javascript onJune 04, 2020

本文实例讲述了微信小程序条件、模板、文件引用。分享给大家供大家参考,具体如下:

上一节的在遍历的时候控制台中会报错

<view wx:for="{{content}}" wx:for-item='item' wx:for-index='index'>
 {{item.name}}
</view>

控制台中会显示这个东西

Now you can provide attr "wx:key" for a "wx:for" to improve performance.

当然了不处理也不影响程序运行,但是看着好不爽啊。

wx:key用来对列表渲染的数据指定一个"主键”,以加快列表渲染的速度。以下是官方文档原话:

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。如果你一定想去掉这个警告,加wx:key="name"就不会报错了。

条件

<view wx:if='{{false}}'>TEST</view>
<view wx:else>oh no</view>

block

如果要一次性判断多个组件标签,可以使用一个

<block wx:if="{{true}}">
 <view> view1 </view>
 <view> view2 </view>
</block>

模板

可以在模板中定义代码片段,然后在不同的地方调用。

这就类似公共代码的意思

common.wxml

<template name="common">
 <text>这是一个模板</text>
</template>

我把它引用到wxml中

<import src="common.wxml" />

使用模板,is声明需要的使用的模板

<template is="common"/>

引用wxss文件

@import "news-item/news-item-template.wxss";

import有作用域

就问你傲不傲娇
看看官方给的解释

它只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jQuery实现跨域
Feb 03 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
React如何避免重渲染
Apr 10 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
微信小程序实现watch监听
Jun 04 #Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 #Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 #Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 #Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
You might like
php 删除指定文件夹的实例讲解
2017/07/25 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python操作gmail实例
2015/01/14 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python中类的属性和方法介绍
2018/11/27 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
先进事迹报告会主持词
2014/04/02 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
爱心捐助倡议书
2014/05/19 职场文书
爱护花草树木的标语
2014/06/11 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
停发工资证明范本
2015/06/12 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript