第二章——逻辑层文件

小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件

一：项目逻辑文件

          项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数，全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

        App（）函数用于注册一个小程序，参数为Object,用于指定小程序的生命周期函数，用户自定义属性和方法，

           启动小程序的时候会依次触发生命周期函数onLanuch和onShow方法，然后通过app.js的pages属性注册相应的页面，最后根据默认路径加载首页，如果关闭设备，小程序没有被销毁，只有在小程序进入后台·一段时间或者系统资源占用过高，小程序才会被自动销毁。

          我们在  app.js加入姓名的代码

// app.js
App({
 //当小程序初始化完成时，会触发onLaunch(全局只能触发一次)
 onLaunch: function(){
   console.log("小程序初始化完成.......")
 },
 //当小程序启动时（或从后台进入前台显示），时会触发onShow
 onShow: function (options){
   console.log("小程序显示");
   console.log(this.data);
   console.log(this.fun())
 },
 //当小程序从前台进入后台，会触发onHide
 onHide:function(){
   console.log("小程序进入后台")
 },
 //当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息
 onError:function(msg){
 },
 //自定义方法
 fun:function(){
   console.log("在app.js中定义的方法");
 },
//自定义属性
data:'在app.js中定义的属性'
})

   保存并编译后，Console显示下面这个

二：页面逻辑文件

      页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事情处理函数等

    在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个

1设置初始数据

            设置初始数据是对页面的第一次数据绑定。对象data将会以JSON的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式（字符串，数字，布尔值，对象，数组）

          数据初始，数据绑定及运行效果图

yy.js

Page({
  //页面的初始数据
  data:{
    name:'佳佳', //字符串
    age:16,     //数字
    birthday:[{year:2007},{month:11},{data:18}],  //数组
    object:{hobby:'computer'}//对象
  }
  
})

yy.wxml

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期:
  {{birthday[0].year}}年
  {{birthday[11].year}}月
  {{birthday[18].year}}日
</view>
<view>爱好：{{object.hobby}}</view>>

运行效果图

 2.定义当前页面的生命周期函数

      在Page()函数的参数中，可以定义当前页面的生命周期，页面的生命周期函数主要有onLoad,onShow,onReady,onHide,onUnload

onLoad:页面加载函数，当页面加载完成后调用该函数，一个页面只能调用一次。

onShow:页面加载函数，当页面显示时调用该函数，每次打开页面只会调用一次

onHide:页面隐藏函数，当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数

onReady：页面数据绑定函数，当页面初次绑定完成时调用该函数

onUnload:页面卸载函数，当页面卸载，进行navigateBack或redirectTo操作时 ，调用该函数

在yy.js和news.js输入代码

yy.js

//pages/new/news.js
Page({
  //生命周期函数--监听页面加载
  onLoad:function (options){
    console.log("yy onLoad.....")
  },
  //生命周期--监听页面初次渲染完成
  onReady:function(){
    console.log("yy onReady.......")
  },
  //生命周期函数--监听页面显示
  onShow:function(){
    console.log("yy onShow......")

  },
//*生命周期函数--监听页面隐藏
onHide:function(){
  console.log("yy onHide......")
},
//生命周期函数--监听页面卸载
onUnload:function(){
  console.log("yy onUnload......")
},
})

news.js

//pages/new/news.js
Page({
  //生命周期函数--监听页面加载
  onLoad:function (options){
    console.log("news onLoad.....")
  },
  //生命周期--监听页面初次渲染完成
  onReady:function(){
    console.log("new onReady.......")
  },
  //生命周期函数--监听页面显示
  onShow:function(){
    console.log("news onShow......")
  },
//*生命周期函数--监听页面隐藏
onHide:function(){
  console.log("news onHide......")
},
//生命周期函数--监听页面卸载
onUnload:function(){
  console.log("news onUnload......")
},
})

保存编译并点击首页和新闻这两个按钮，Console面板出现下面效果图

 3.定义事件处理函数

    开发者在Page()中自定义的函数称为事件处理函数，视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数

  示例代码

<view bindtap = "myclick">单击执行逻辑层事件 </view>
  Page({
  myclick:function(){
    console.log("点击了view")
  },

4.使用setData更新数据

   小程序在Page对象中封装了一个名为setData（）的函数，用来更新data中的数据。
参数为Object，以“key:value”对的形式表示将this.data中的key对应的值修改为value。

yy.js

Page({  
  data: {  
    name: 'lwk',  
    birthday: [{ year: 1988, month: 11, date: 18 }], // 修正为包含所有属性的单个对象  
    object: { hobby: 'computer' } // 移除多余的花括号  
  },  
  chtext: function() {  
    this.setData({  
      name: 'lzh'  
    });  
  },  
  charray: function() {  
    this.setData({  
      'birthday[0].year': 2005  
    });  
  },  
  chobject: function() {  
    this.setData({  
      'object.hobby': 'music'  
    });  
  },  
  adddata: function() {  
    this.setData({  
      address: 'shanxi' // 修正了缺少的属性名引号  
    });  
  },  
  
  // 生命周期函数--监听页面加载  
  onLoad: function(options) {  
    console.log("yy onLoad.....");  
  },  
  // 生命周期--监听页面初次渲染完成  
  onReady: function() {  
    console.log("yy onReady.......");  
  },  
  // 生命周期函数--监听页面显示  
  onShow: function() {  
    console.log("yy onShow......");  
  },  
  // 生命周期函数--监听页面隐藏  
  onHide: function() {  
    console.log("yy onHide......");  
  },  
  // 生命周期函数--监听页面卸载  
  onUnload: function() {  
    console.log("yy onUnload......");  
  }  
}); // 修正了缺少的闭合括号

yy.wxml

<view>姓名：{{name}}</view>  
<view>年龄：{{age}}</view>  
<view>出生日期:  
  {{birthday.year}}年  
  {{birthday.month}}月  
  {{birthday.day}}日  
</view>  
<view>{{name}}</view>  
<button bindtap="chtext">修改普通层数据</button>  
<view>{{birthday.year}}</view> <!-- 注意这里使用 birthday.year 而不是 birthday[0].year -->  
<button bindtap="charray">修改数组数据</button> <!-- 这里假设 charray 函数会正确修改 birthday 对象 -->  
<view>{{object.hobby}}</view>  
<button bindtap="chobject">修改对象数据</button>  
<view>{{address}}</view> <!-- 假设 adddata 函数已经添加了 address 到 data 中 -->  
<button bindtap="adddata">添加数据</button> <!-- 注意这里的 "添加数控" 应该是 "添加数据" -->  
  
<view>算数运算:{{age + 100}}</view>  
<view>逻辑运算:{{age == 40}}</view>  
<view>三元运算:{{age == 1 ? 3 : 100}}</view>  
  
<view wx:if="{{age > 40}}">1</view>  
<view wx:elif="{{age == 40}}">2</view>  
<view wx:else>3</view>

保存并运行