微信小程序学习总结(三)
2018-01-02 19:08
609 查看
上一节的在遍历的时候控制台中会报错
控制台中会显示这个东西
当然了不处理也不影响程序运行,但是看着好不爽啊。
wx:key用来对列表渲染的数据指定一个”主键”,以加快列表渲染的速度。以下是官方文档原话:如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。如果你一定想去掉这个警告,加wx:key=”name”就不会报错了。
这是我练习的时候其中使用的模板,这玩意就像PHP函数差不多,提高代码的复用性。
我把它引用到wxml中
使用模板,is声明需要的使用的模板
这个地方newsList是数据
看看官方给的解释
它只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
来,做个有趣的小实现
先在/pages/haha/haha.wxml中下如下代码
完了之后我们在/pages/index/index.wxml中调用
证明了import的作用域它只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
<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>
模板
可以在模板中定义代码片段,然后在不同的地方调用。这是我练习的时候其中使用的模板,这玩意就像PHP函数差不多,提高代码的复用性。
<template name="newsItem"> <view class="news-container"> <view class="news-author-date"> <image class="news-author" src="{{item.avatar}}"></image> <text class="news-date">{{item.date}}</text> </view> <text class="news-title">{{item.title}}</text> <image class="news-image" src="{{item.imgSrc}}"></image> <text class="news-content">{{item.content}} </text> <view class="news-like"> <image class="news-like-image" src="/imgs/icon/chat.png"></image> <text class="news-like-font">{{item.collection}}</text> <image class="news-like-image" src="/imgs/icon/view.png"></image> <text class="news-like-font">{{item.reading}}</text> </view> </view> </template>
我把它引用到wxml中
<import src="news-item/news-item-template.wxml" />
使用模板,is声明需要的使用的模板
<block wx:key="title" wx:for='{{newsList}}'> <template is="newsItem" data="{{item}}" />//这里的newsItem要和模板的name值一致 </block>
这个地方newsList是数据
引用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。
来,做个有趣的小实现
先在/pages/haha/haha.wxml中下如下代码
<import src='/pages/logs/logs.wxml' /> <template is='test1' /> <template name='test'> <text>pages/haha/haha.wxml</text> </template> 引用logs的模板,并且定义了一个模板
完了之后我们在/pages/index/index.wxml中调用
<import src="../haha/haha.wxml" /> <template is='test' />
证明了import的作用域它只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
相关文章推荐
- 微信小程序学习总结(五)
- 微信小程序-学习总结
- 微信小程序学习总结(一)
- 微信小程序学习总结(二)
- 微信小程序学习总结
- 微信小程序学习总结(四)
- 微信小程序——转跳导航方式学习总结
- 微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染
- 微信小程序-开发经验总结
- Android学习总结(5)——9个非常有用的Andorid 程序片段
- 微信小程序跳转无效原因总结
- 微信小程序(BDEDU签到工具)项目总结
- vb.net学习总结二(看图程序)
- 微信小程序学习(2):小程序目录结构介绍
- 微信小程序之目前为止史上最全的微信小程序项目实例, 微信小程序实战学习
- 微信小程序开发手记之八:一个小程序上线后的总结(下)
- 微信小程序学习 (一)
- 1、微信小程序学习:基本控件的使用
- 微信小程序学习一初探“小程序”
- 微信小程序学习笔记1