微信小程序开发逻辑层,页面结构，页面样式文件

1.项目逻辑文件

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

App()函数用于注册一个小程序，参数为Object,用于指定小程序的生命周期函数，用户自定义属性和方法，参数如下所示：

当启动小程序时，首先会依次触发生命周期函数 onLanuch和 onShow方法，然后通过app.isor的 pages 属性注册相应的页面，最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的 Home 键离开微信时，小程序没有被直接销毁，而是进入后台，这两种情况都会触发onHide方法;当用户再次进入微信或再次打开小程序时，小程序会从后台进入前台，
这时会触发 onShow 方法。只有当小程序进入后台一段时间(或者系统资源占用过高)时，小程序才会被销毁。
我们在 Demo2 的 app.js加入如图2 -10 所示：

// app.js
App(
  {
  onLaunch:function() {
    console.log("小程序初始化完成")
  },
    // 展示本地存储能力
    /*const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  },*/
  onShow:function(options){
console.log("小程序显示")
console.log(this.Date);
console.log(this.fun())
  },
  onHide:function(){
console.log("小程序径路后台")
  },
  onError:function(msg){

  },
  

fun:function(){
  console.log("在app.js中定义的方法")

},
  }
)

 

执行结果如下： 

 

（1）页面逻辑文件

各个配置项如下：

 1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象 data将会以 JSON(Javascript Obiect No-tation，JS 对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成 JSON 的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过 WXML对数据进行绑定。
数据初始、数据绑定及运行效果
2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload.
onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取 wx.navigateTo 和 wx.redirectTo 及navigator/>中的 query。
onShow 页面显示函数。 

wenjian.wxml如下所示： 

<!--pages/wenjian/wenjian.wxml-->
<text>迎接我的新项目</text>
<view>
姓名：{{name}}
</view>
<view>年龄：{{age}}
</view>
<view>{{brithday[0].year}} 年
{{brithday[1].month}}月
{{brithday[2].date}}日
</view>
<view>
爱好：{{object.hobby}}
</view>
<view>
三元运算：{{age==1?3:num}}
</view>
<view wx:for="{students}">
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
<text>姓名：{{item.nickname}}</text>

</view>

执行结果如下：

 

3.定义事件处理函数

4.使用setdata更新数据

setDate.js 

Page({
  //页面的初始数据
  data:{
    name:'los', //字符串
    age:3,      //数字
    birthday:[{year:2021},{month:1},{date:12}], //数组
    object:{hobby:'下棋，听，打羽毛球'} //对象
  },
  chtext:function() {
    this.setData({
      name:'李文'
    });
  },
  chage:function() {
    this.setData({
      age:-1
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2030},{month:6},{date:23}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'下棋，听歌，打羽毛球'
    });
  },
  adddata:function() {
    this.setData({
      'address':'睡'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
});

setData.wxml

<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>
<view bind:tap="myclick">单击执行逻辑层事件</view>

执行结果如下 ：

2.页面结构文件

1.数据绑定

（1）简单绑定：简单绑定是指使用双大号，将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以用作内容，组件属性，控制属性等的输出

（2）运算

在{{}}内可以做一些简单的运算（算术运算，逻辑运算，三元运算等），这些运算均符合JavaScript运算规则

（3）条件数据绑定：1.wx:if条件数据绑定

2.block wx：if条件数据绑定

（4）列表数据绑定

1.wx:for

2.block wx :for

(5)模版

1.定义模版

2.调用模版

（6）引用页面文件

1.import方式

2.include方式

（7）页面事件：简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。二定义事件函数 在.is文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value”形式出现，key(性名) 以 bind 或 catch 开头,再加上事件类型,如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在is中定义的处理该事件的函数名称，如click.

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

关于冒泡事件表

 

3.页面样式文件

（1）尺寸单位

（2）样式导入

（3）选择器

（4）WXSS常用属性。常用属性如下：