微信小程序的视图与渲染
- 组件的基本使用
- 数据的绑定
- 渲染标签
- 模板的使用
first.wxml
<include src="../templates/head"/>
first page
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick">{{btnText}}</button>
<view wx:if="{{show}}">{{text}}1</view>
<view wx:else>{{text}}2</view>
<text>this is text</text>
<text>{{show}}</text>
<view wx:for="{{news}}" wx:for-item="newsitem" wx:for-index="ix">
recycling content
{{ix}}-{{newsitem}}
</view>
<import src="../templates/rear"/>
<template is="rear2" data="{{text:'导入设置的内容。。。'}}"/>
fist.js
Page({
/**
* 页面的初始数据
*/
data: {
text:"this is text in js",
btnText:"this is button text",
show:"false",
news:['a','b','c']
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
btnClick : function(){
console.log("button is clicked");
var isShow=this.data.show;
console.log("isShow:" + isShow);
var newsdata=this.data.news;
newsdata.shift()
this.setData({ text: "this is a new content", show:!isShow,news:newsdata })
}
})
<text>
this is head wxml;
</text>
<template name="rear1">
this is rear1 content template;
</template>
<template name="rear2">
this is rear2 content template;-{{text}}
</template>
来源：CSDN
作者：AnalogElectronic
链接：https://blog.csdn.net/AnalogElectronic/article/details/104554353