码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-03-05 11:02:43      阅读:1341      评论:0      收藏:0      [点我收藏+]

标签:app   函数名   java   文件中   作用   后台   实例   oba   get   

逻辑层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对象的数据

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

标签:app   函数名   java   文件中   作用   后台   实例   oba   get   

原文地址:https://www.cnblogs.com/20145336yang/p/8507455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!