小程序学习之视图与渲染

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>