小程序学习之视图与渲染

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:

fhaslkjfasjfiwq

 default 
 {{btnText}}

这里是文本内容\n
{{text}}\n

{{text}} 1\n
{{text}} 2\n



{{index}}- {{itemx}}