1.新建一个页面通常要在新页面的.js文件中加入Page方法。
2.实现数据的绑定:双大括号,即{{}}。绑定的数据需要在.js文件Data中声明他的值。
3.按钮点击事件的添加:首先在.wxml文件按钮中添加点击事件bindtap=“btnclick”,随后在.js文件中定义btnclick:function(log){
console.log("这个按钮被点击了")
}
当点击这个按钮时,就会显示这个按钮被点击。
4.动态改变显示内容:首先,微信小程序数据的绑定是单向的,就是对象的改变会通知视图变化,所以当JS中数据变化时,WXML视图也会有所变化。然后是代码实现:3中已经写明点击事件的添加,所以进一步实现:点击按钮,原被绑定的数据发生变化,并且覆盖掉原来的内容。
5.渲染标签
(1)条件标签:<view wx:if="{{true}}">{{text}}</view>,则text的内容就会被显示出来,如果是false,text的内容就不会被显示出来。<view wx:else="{{true}}">{{text}}</view>也是有if......else........的
(2)循环标签:<view wx:for={{['aaa','bbb']}}>
循环内容。
</view>
6.模板的使用
(1)头模板的引用:
新建一个目录,取名为:templates,在此目录下新建一个文件:header.wxml。在要引入头模板的页面下编写:
<include src="../templates/header" /> 注:如果不在最后加上“/”,会报错,导致无法显示头模板。
(2)底部模板的引用:
当底部模板不止一个时,不适合使用include的引入方式,因为这样并不会显示底部的模板。
使用import引入方式即可。
新建新的WXML文件,取名footer,在需要引入模板的页面编写:
<import src="../templates/footer" />
<template is ="footer1" />
在新建的WXML文件中编写:
<template name="footer1">
底部模板1
</template >
<template name="footer2">
底部模板2
</template>
模板总结:include方式是把所有内容复制进来
import方式是把指定的一部分的内容复制过来
模板的导入导出是在WXML文件中实现的。