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


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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
Javascript Objects详解
Sep 04 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
Preload基础使用方法详解
Feb 03 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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 metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
pandas中Timestamp类用法详解
2017/12/11 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
将python图片转为二进制文本的实例
2019/01/24 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
师范学院毕业生求职信
2014/06/24 职场文书
商铺消防安全责任书
2014/07/29 职场文书
小学中等生评语
2014/12/29 职场文书
2015年党员承诺书
2015/01/21 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书