目录
小程序视图与渲染
- 组件基本使用
- 数据绑定
- 渲染标签
- 模版使用
1、组件基本使用
微信参考地址:小程序组件
如:按钮和文本
pages\demo\demo01.wxml
<button type="default" hover-class="other-button-hover">default</button>
<button type="primary">primary</button>
<text>这里是文本内容</text>
结果显示:
2、数据绑定
js中定义,wxml中使用,使用{ {变量}}
pages/demo/demo01.js
Page({
data: {
text:"这是文本的内容",
btnText:"这是按钮的内容"
}
})
pages/demo/demo01.wxml
<button type="default" hover-class="other-button-hover">default</button>
<button type="primary">{
{btnText}}</button>
<text>{
{text}}</text>
例子:点击按钮,显示不同内容的文本内容
在wxml中给button添加一个绑定事件bindtap,在js中定义事件;
pages/demo/demo01.wxml
<button type="primary" bindtap="btnClick">{
{btnText}}</button>
<text>{
{text}}</text>
pages/demo/demo01.js
Page({
data: {
text:"这是【点击前】的文本显示内容...",
btnText:"自定义按钮"
},
btnClick:function(){
console.log("button被点击了....")
this.setData({
btnText:"【点击后】按钮",
text:"这是一个新的内容..."
})
}
})
button点击前和后运行效果: