组件的基本使用
微信小程序开发者文档
简单的添加button组件实例:
<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary'>primary</button>
编译后显示:
数据绑定
<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary'>primary</button>
<text>{{text}}</text>
双括号内是被绑定的数据,我们需要在index.js
文件中给该数据赋值。
编译之后,我们的页面就会出现text的内容:
我们还可以为按钮设置绑定的文字:
<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary'>{{btnText}}</button>
<text>{{text}}</text>
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
text : "这里是内容",
btnText : "这是按钮的内容",
motto: 'Hello World',
userInfo: {},
dots:true
},
...
})
如何动态更改绑定的数据的内容呢?我们可以给按钮添加一个点击事件,首先先来尝试添加一个点击事件。
<!--index.wxml中给button绑定点击事件btnClick-->
<button type='primary' bindtap='btnClick'>{{btnText}}</button>
// index.js中添加如下的函数
btnClick : function() {
console.log("按钮被点击了")
},
点击按钮,后台会打印出我们要打印的内容,说明正常监听到了按钮的点击事件,下面通过点击按钮来实现动态改变数据。
btnClick : function() {
console.log("按钮被点击了")
this.setData({text:"这是新更改的内容"})
},
点击按钮,原来text
的内容为“这里是内容”,现在变成了“这是新更改的内容”,我们的动态更改数据就成功了,js
文件中更改数据都是调用下面这个函数。
this.setData({
...
})
渲染标签
微信小程序开发者文档
微信小程序为我们提供了两种类型的渲染标签,一种是条件标签。
<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary' bindtap='btnClick'>{{btnText}}</button>
<view wx:if="{{false}}">{{text}}</view>
<view wx:if="{{false}}">{{text}}</view>
此时即使点击按钮,也不会显示任何内容,因为条件是永假的,所以text
的内容永远不会显示。
现在添加一个变量show
来控制内容的显示与否。
data: {
text : "这里是内容",
btnText : "这是按钮的内容",
show : true,
...
},
btnClick : function() {
console.log("按钮被点击了")
var isShow = this.data.show
this.setData({text:"这是新更改的内容", show:!isShow})
},
<view wx:if="{{show}}">{{text}}</view>
这时再点击按钮,则该view
会连续地切换显示与不显示。下面再添加一个else
标签。
<view wx:if="{{show}}">{{text}} 1 </view>
<view wx:else>{{text}} 2 </view>
这样因为上下两个标签一个条件为真,另一个就为假,所以会轮换地显示1和2。
除了条件标签外,还有循环标签。
在index.wxml
中添加一个循环渲染标签,循环的数组里共有三个元素,所以界面会显示三次“循环内容…”。
<view wx:for="{{['aaa','bbb','ccc']}}">
循环内容...
</view>
循环的数组更常见的是data中定义的数组,{{item}}
代表数组的每一个元素。
data: {
text : "这里是内容",
btnText : "这是按钮的内容",
show : true,
news: ['aaa', 'bbb', 'ccc'],
...
},
<view wx:for="{{news}}"> {{item}} </view>
如果不想让我们循环数组的元素名为item
,我们也可以更改它的名字。
<view wx:for="{{news}}" wx:for-item="itemx"> {{itemx}} </view>
还可以通过index
来显示当前循环的索引。
<view wx:for="{{news}}" wx:for-item="itemx"> {{index}} {{itemx}} </view>
现在来试试动态更改news数组的值,再次在点击按钮的事件中添加一些操作。
btnClick : function() {
console.log("按钮被点击了")
var isShow = this.data.show
var newsData = this.data.news
newsData.shift() // 删除第一个元素
this.setData({text:"这是新更改的内容", show:!isShow, news:newsData})
},
点击按钮后bbb
变成了第一个元素,数组的动容实现了动态更改,页面的显示内容也由于和数组的变化而实时地发生了改变。
index
的名字也是可以更改的,方法和item
的类似。
<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="indexx"> {{indexx}} {{itemx}} </view>
模板的使用
我们的小程序中,可能很多页面都是使用同一个顶部与同一个底部,这一部分的代码就可以被很多页面所共用,这种情况下,我们就可以把这部分内容单独提取成一个模板,每个页面都将其加载进来即可。
在Pages目录下新建一个目录名为template,在其下新建一个wxml文件,我们在这个文件里写我们的模板。
然后,在其他页面要显示这个模板的地方,将这个wxml包含进来。
效果如下:
还有另一种方式添加模板,我们再在template目录下新建一个footer.wxml文件,编写另外一种方式的模板。
<template>
不能通过include
的方式加载,要用import
。
每个页面要在模板中显示的数据可能不同,这时我们可以给模板中添加绑定的数据:
<template name="footer"> 这里是底部内容 - {{text}} </template>
在显示模板处给模板中的数据赋值:
<import src="../template/footer" />
<template is="footer" data="{{text:'导入设置的内容'}}"/>