zoukankan      html  css  js  c++  java
  • 微信小程序——3、逻辑js文件

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

  • 相关阅读:
    September 29th 2017 Week 39th Friday
    September 28th 2017 Week 39th Thursday
    September 27th 2017 Week 39th Wednesday
    September 26th 2017 Week 39th Tuesday
    September 25th 2017 Week 39th Monday
    September 24th 2017 Week 39th Sunday
    angular2 学习笔记 ( Form 表单 )
    angular2 学习笔记 ( Component 组件)
    angular2 学习笔记 ( Http 请求)
    angular2 学习笔记 ( Router 路由 )
  • 原文地址:https://www.cnblogs.com/20145336yang/p/8507455.html
Copyright © 2011-2022 走看看