小程序----小程序框架学习（一）逻辑层

小程序框架：包括逻辑层、视图层和flex模型

逻辑层由javascript编写，视图层由WXML和WXSS配合组件组成，flex布局确保页面适应不同屏幕尺寸时在恰当的位置。

本篇主要介绍逻辑层。视图层介绍见https://blog.csdn.net/maidu_xbd/article/details/102504302

flex布局介绍见https://blog.csdn.net/maidu_xbd/article/details/102566583

逻辑层

逻辑层又称为App Service

主要作用：处理数据后发送给视图层渲染以及接收视图层的事件反馈

涉及的方法有：

1.App()注册小程序:指定生命周期，该方法只能写在小程序根目录下的app.js文件中，并且只能注册1个。

属性	类型	说明	触发时机
onLaunch()	Function	生命周期函数--监听页面加载，全局只触发一次	初始化完成时触发
onShow()	Function	生命周期函数--监听页面显示	由后台进入前台时触发
onHide()	Function	生命周期函数--监听页面隐藏	由前台进入后台时触发
onError()	Function	错误监听函数	发生脚本错误或api调用失败
onPageNotFound()	Function	页面不存在函数	打开页面不存在
其他自定义函数	Any	用this可以访问

小程序后台：小程序没有在手机当前画面显示，但是并没有被销毁。

小程序前台：小程序在手机当前画面被使用。

小程序应用生命周期：小程序在被打开时会触发onLaunch()进行程序启动，完成后调用onShow()准备展开页面，如果被切换进入后台会调用onHide()，直到下次程序在销毁前重新被唤起再次调用onShow()。

2.onPageNotFound()：用来监听小程序要打开的页面不存在的事件

字段	类型	说明
path	String	不存在页面的路径
query	Object	打开不存在页面的query
isEntryPage	Boolean	是否为本次启动的首个页面

3.getApp()：在小程序的其他JS文件中可以通过该方法使用app.js中的公共数据，注意在App()函数内部则不需要使用该方法，使用this关键字获得全局变量。

示例：【test.js】

var app=getApp()
console.log(app.globalData.userinfo)

【app.js】

App({
    globalData:{
        userInfo:null
    },
    onLoad:function(options){
        console.log(this.globalData.userInfo)
    }
})

4.page()注册页面：小程序在每个页面的js文件中通过Page()方法注册页面，该方法可以用于指定小程序页面的生命周期函数。每个页面只能注册1个

属性	类型	说明
data	Object	页面的初始数据
onLoad()	Function	生命周期函数--监听页面加载
onReady()	Function	生命周期函数--监听页面初次渲染完成
onShow()	Function	生命周期函数--监听页面显示
onHide()	Function	生命周期函数--监听页面隐藏
onUnload()	Function	生命周期函数--监听页面卸载
onPullDownRefresh()	Function	页面相关事件处理函数--监听下拉动作
onReachBottom()	Function	页面上拉触底事件的处理函数
onShareAppMessage()	Function	监听用户单击右上角转发事件
onPageScroll()	Function	监听页面滚动事件
onTabItemTap()	Function	若当前页是tab页，单击tab时触发
其他	Any	可添加函数或数据

【buding.js】文件如下

Page({

  /**
   * 页面的初始数据
   */
  data: {
    color:"blue",
    msg:"Hello",
    age:18,
    array:[1,2,3]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   console.log(this.route)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

在page()方法中，可以使用【this.route】查看当前页面的路径地址，可以使用【setData()】同步更新data属性中的数据值，也能异步更新相关数据到WXML页面中。

【buding.wxml】中为组件追加自定义单击事件【changeData()】

<view bindtap="changeData">{{msg}}</view>

【buding.js】中的Page()中追加自定义函数【changeData()】，当单击组件是，‘hello’将显示为‘你好’

Page({
 changeData:function(){
    this.setData({msg:'你好'})
  }
})

小程序页面生命周期：在小程序应用生命周期调用完onShow()后就准备触发页面生命周期。

5. 页面路由

对于路由的触发方式以及页面生命周期函数如下：

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad()、onSHow()
打开新页面	调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>	onHide()	onLoad()、onShow()
页面重定向	调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>	onUnload()	onLoad,()、onShow()
页面返回	调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮	onUnload()	onShow()
Tab 切换	调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab
重启动	调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>	onUnload()	onLoad()、onShow()

6.模块化

在根目录utils文件夹下新建公共的【common.js】

function sayHi(name){
  console.log('Hi ${name}')
}

module.exports = {
  formatTime: formatTime,
  sayHi:sayHi
}

在页面的js中引入【common.js 】并调用

var common=require('../../utils/common.js')
Page({
    hi:function(){
    console.log(common.sayHi('buding'))
  }
})

maidu_xbd

发布了147 篇原创文章 · 获赞 33 · 访问量 3万+

私信关注

小程序----小程序框架学习（一）逻辑层

小程序框架：包括逻辑层、视图层和flex模型

逻辑层

猜你喜欢