主要记录自极客学院微信小程序学习视频
- 组件的基本使用
- 数据绑定
- 渲染标签
- 模板的使用
组件的基本使用
可查阅官网的基本教程：组件官网
数据绑定
//xx.wxml
<text>{{textValue}}</text> //用双大括号括起数据属性//xx.js
Page({
/**
* 页面的初始数据
*/
data: {
textValue : "内容" // 在js文件的data中为 textValue 赋值
},
...
}为按钮等添加点击事件
//xx.wxml
<button type="primary" bindtap="btnClick" > {{btnText}} </button>
<!-- bindtap="btnClick"即为为该button注册了按钮点击事件，响应的方法名为 "btnClick" --> //xx.js
Page({
/**
* 页面的初始数据
*/
data: {
text : "内容",
btnText: "按钮内容"
},
...
//按钮点击响应事件
btnClick: function () {
console.log("按钮被点击了")
this.setData({ text:"this is new content"});//动态修改了data中text的内容
}
})渲染标签
包括两种：条件标签、循环标签
参考资料
- 条件标签
<!-- 条件标签： wx:if="{{booleanValue}}" booleanValue为true/false，booleanValue也可设在js文件的data中-->
<view wx:if="{{false}}">{{text}}</view>
<view wx:else>{{text}} 2</view>- 循环标签（列表渲染）
关键语法：wx:for=""，内容为数组{{['aaa','bbb','ccc']}},用两个大括号括起来。使用数组中的各项数据重复渲染该组件。默认数组当前项的下标变量名为index，数组当前项的变量名为item
<view wx:for="{{['aaa','bbb','ccc']}}">
{{index}} - {{item}}
</view>动态更改数组的值
shift() 方法可以剔除数组尾部的一个元素
Page({
/**
* 页面的初始数据
*/
data: {
text : "内容",
btnText: "按钮内容",
show : false,
news: ['aaa', 'bbb', 'ccc']
},
...
btnClick: function () {
console.log("按钮被点击了")
var newsData = this.data.news;
newsData.shift();//从数组尾部剔除一个元素
this.setData({
text:"新内容",
show:!this.data.show,
news:newsData
});
}
})模板的使用
include导入模板
新建 header.wxml 文件
<text>这里是头部哈哈哈</text>在其他wxml 文件中使用该头部模板
<include src="../templates/header"/>import导入模板
新建 footer.wxml 文件,template即模板，使用name属性定义模板的名字
<template name="footer1">
这是底部内容1
</template>
<template name="footer2">
这是底部内容2
</template>在其他wxml 文件中使用该头部模板
<import src="../templates/footer.wxml"/> //根据模板文件路径导入
<template is="footer1"/> //使用is属性，声明需要使用的模板