微信小程序——3逻辑js文件

Posted 2020-10-26 20145336yang

逻辑层js文件

微信小程序前端进行了层次划分，分为逻辑层和视图层。逻辑层实现对数据的加工和处理。与html页面相似，逻辑层使用javascript编写。逻辑层将数据处理后发送至视图层，同时接受视图层的反馈，官方在JavaScript的基础上进行了一些封装和修改，主要有以下：

• 提供了App和Page方法，用来进行程序和页面的注册。
• 提供了丰富的API，如扫一扫、支付等微信功能。
• 每个页面有独立的作用域，并提供模块化能力。
• 由于框架并非运行在浏览器中，所以JavaScript在Web中的一些能力无法使用。
• 开发者所写的所有代码都将打包成一份JavaScript，并在小程序启动的时候运行直至销毁。

用APP函数注册小程序

每个微信小程序必须在app.js中进行程序注册并且只能注册一次。因此，主逻辑文件需要包含注册方法

注册微信小程序直接使用APP()函数即可，在这个对象可指定小程序的生命周期函数。可定义以下三个生命周期函数

• onLaunch：当小程序初始化完成时，会触发onLaunch，全局只触发一次。
• onShow：当小程序启动或从后台进入前台显示，会触发onShow。
• onHide：当小程序从前台进入后台，会触发onHide。

使用Page函数注册页面

微信小程序中每个页面需要使用Page（）函数进行注册，与App（）函数类似，Page（）函数也需要一个JSON对象作为参数，其中可以定义页面的周期函数，还可编写自定义的函数来响应页面事件。更为重要的是，在参数中有一个名为data的属性，用来定义页面所需的数据。

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: ‘Hello World‘,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse(‘button.open-type.getUserInfo‘)
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: ‘../logs/logs‘
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

 

初始化数据

初始化数据位于data中，初始化数据将作为页面的第一次渲染。data将以JSON的形式由逻辑层转换到视图层，所以其数据必须是可以转换成JSON的格式，如字符串、布尔值、对象、数组等。

上述代码中定义了一个名为moto的属性，是一个字符串值。还有一个名为use Info的空对象。

视图曾可以通过wxml对数据进行绑定。

生命周期函数

在Page（）函数的参数中可定义当前页面的生命周期函数。页面的生命周期函数有以下几个

• onLoad:页面加载完调用此函数，只会使用一次。以获取wx.navigateTo和wx.redirectTo及中的query
• onShow：页面显示时调用此函数
• onReady：页面初次渲染调用该函数，只会调用一次，代表页面准备完成，可以和视图层进行交互
• onHide：页面隐藏时调用函数
• onPullDownRefresh：下拉刷新调用函数，需要在config的window项中开启enablePullDownRefresh

事件处理函数

在视图层添加事件绑定，当触发事件时会执行page中定义的事件处理函数

例如：

    <view bindtap="viewTap">单机测试</view>

这是在wxml中定义的时间bindtab，值为viewTap表示一个事件处理函数的名称，在Page中需要定义如下：

Page({
    viewTap:function(){
    console.log(‘view tap‘)
    }
})

这里的viewTap和上面wxml文件中viewTap的事件处理函数名称相同，这样用户在页面单击文字就会调用Page中的view Tab函数

使用setData修改初始化数据

为了更新数据，官方在Page对象中封装了一个名为SetData()的函数，使用这个函数可以更新data中的数据。该函数接受一个对象，以key，value的形式表示将this.data中的key对应的值改变为value。其中key可以非常灵活，以路径的形式给出。

onLoad:function(){
    //更新数据
    this.setData({
        userInfo:userInfo
    })
}

上面这个程序使用this.setData函数更新了userInfo对象的数据