小程序学习之视图与渲染

1.. .json,.wxss非必需有。wxml：配置布局，UI。js：逻辑。json，页面配置文件。wxss，页面样式文件。index和logs的wxss会覆盖app.wxss

app.json:

{  "pages":[    "pages/firstPage/first",    "pages/index/index",    "pages/logs/logs"  ],

first.js:

Page({  data:{    text : "这里是内容",    btnText : "这是按钮的内容",    show: true,    news: ['aaa','bbb','ccc','ddd']  },  onLoad:function(options){    // 生命周期函数--监听页面加载    String2  },  onReady:function(){    // 生命周期函数--监听页面初次渲染完成    String3  },  onShow:function(){    // 生命周期函数--监听页面显示    String4  },  onHide:function(){    // 生命周期函数--监听页面隐藏    String5  },  onUnload:function(){    // 生命周期函数--监听页面卸载    String6  },  onPullDownRefresh: function() {    // 页面相关事件处理函数--监听用户下拉动作    String7  },  onReachBottom: function() {    // 页面上拉触底事件的处理函数    String8  },  onShareAppMessage: function() {    // 用户点击右上角分享    return {      title: 'title', // 分享标题      desc: 'desc', // 分享描述      path: 'path' // 分享路径    }    },    btnClick : function(){        console.log("按钮被点击了")                var isShow=this.data.show;        console.log("isShow"+isShow)                var newsdata=this.data.news;        newsdata.shift()        this.setData({text:"这是一个新的内容",show:!isShow,news:newsdata})  }})

first.wxml:

<include src="../templates/header"/>fhaslkjfasjfiwq<button type="default" hover-class="other-button-hover"> default </button><button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"        disabled="{{disabled}}" bindtap="btnClick"> {{btnText}}</button><text>这里是文本内容\n</text><text>{{text}}\n</text><view  wx:if="{{show}}">{{text}} 1\n</view><view  wx:else>{{text}} 2\n</view><view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="index">{{index}}- {{itemx}}</view><import src="../templates/footer"/><template is="footer1" data="{{text:'导入设置的内容'}}"/><template is="footer2"/>

templates：
header.wxml:

<text>这里是头部的组件。。。。</text>

footer.wxml:

<template name="footer1">这是底部内容1-{{text}}</template><template name="footer2">这是底部内容2-{{text}}</template>