zoukankan      html  css  js  c++  java
  • 场景值&逻辑层-微信小程序框架

    场景值

    场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表

    由于Android系统限制,目前还无法获取到按 Home 键退出到桌面,然后从桌面再次进小程序的场景值,对于这种情况,会保留上一次的场景值

    获取场景值

    开发者可以通过下列方式获取场景值:

    逻辑层 App Service

    小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

    逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

    开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。

    在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

    • 增加 App 和 Page 方法,进行程序注册页面注册
    • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
    • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
    • 提供模块化能力,每个页面有独立的作用域

    注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 windowdocument 等。

    注册小程序

    每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

    // app.js
    App({
      onLaunch (options) {
        // Do something initial when launch.
      },
      onShow (options) {
        // Do something when show.
      },
      onHide () {
        // Do something when hide.
      },
      onError (msg) {
        console.log(msg)
      },
      globalData: 'I am global data'
    })

    整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App 上的函数。

    // xxx.js
    const appInstance = getApp()
    console.log(appInstance.globalData) // I am global data

    注册页面

    对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。

    在页面中使用 behaviors

    页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

    // my-behavior.js
    module.exports = Behavior({
      data: {
        sharedText: 'This is a piece of data shared between pages.'
      },
      methods: {
        sharedMethod: function() {
          this.data.sharedText === 'This is a piece of data shared between pages.'
        }
      }
    })
    
    // page-a.js
    var myBehavior = require('./my-behavior.js')
    Page({
      behaviors: [myBehavior],
      onLoad: function() {
        this.data.sharedText === 'This is a piece of data shared between pages.'
      }
    })

    使用 Component 构造器构造页面

    Page 构造器适用于简单的页面。但对于复杂的页面, Page 构造器可能并不好用。

    此时,可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { }里面。

    Component({
      data: {
        text: "This is page data."
      },
      methods: {
        onLoad: function(options) {
          // 页面创建时执行
        },
        onPullDownRefresh: function() {
          // 下拉刷新时执行
        },
        // 事件响应函数
        viewTap: function() {
          // ...
        }
      }
    })


    页面路由

    在小程序中所有页面的路由全部由框架进行管理

     

    模块化

    可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports才能对外暴露接口。

    注意:

    • exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
    • 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中,或者使用小程序支持的 npm 功能。
    // common.js
    function sayHello(name) {
      console.log(`Hello ${name} !`)
    }
    function sayGoodbye(name) {
      console.log(`Goodbye ${name} !`)
    }
    
    module.exports.sayHello = sayHello
    exports.sayGoodbye = sayGoodbye


    ​在需要使用这些模块的文件中,使用 require 将公共代码引入

    var common = require('common.js')
    Page({
      helloMINA: function() {
        common.sayHello('MINA')
      },
      goodbyeMINA: function() {
        common.sayGoodbye('MINA')
      }
    })

    文件作用域

    在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

    事件监听 API

    我们约定,以 on 开头的 API 用来监听某个事件是否触发,如:wx.onSocketOpenwx.onCompassChange 等。

    这类 API 接受一个回调函数作为参数,当事件触发时会调用这个回调函数,并将相关数据以参数形式传入。

    代码示例

    wx.onCompassChange(function (res) {
      console.log(res.direction)
    })
    

    同步 API

    我们约定,以 Sync 结尾的 API 都是同步 API, 如 wx.setStorageSyncwx.getSystemInfoSync 等。此外,也有一些其他的同步 API,如 wx.createWorkerwx.getBackgroundAudioManager 等,详情参见 API 文档中的说明。

    同步 API 的执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常。

    代码示例

    try {
      wx.setStorageSync('key', 'value')
    } catch (e) {
      console.error(e)
    }

    异步 API

    大多数 API 都是异步 API,如 wx.requestwx.login 等。这类 API 接口通常都接受一个 Object 类型的参数,这个参数都支持按需指定以下字段来接收接口调用结果:

    Object 参数说明

    参数名

    类型必填说明
    success function 接口调用成功的回调函数
    fail function 接口调用失败的回调函数
    complete function 接口调用结束的回调函数(调用成功、失败都会执行)
    其他 Any - 接口定义的其他参数

    回调函数的参数

    successfailcomplete 函数调用时会传入一个 Object 类型参数,包含以下字段:

    属性类型说明
    errMsg string 错误信息,如果调用成功返回 ${apiName}:ok
    errCode number 错误码,仅部分 API 支持,具体含义请参考对应 API 文档,成功时为 0
    其他 Any 接口返回的其他数据
    同步交互:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待过程;
    异步交互:指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待。 
    区别:一个需要等待,一个不需要等待,在部分情况下,我们的项目开发中都会优先选择不需要等待的异步交互方式。
     
     
     

    异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值,可以用来实现更丰富的功能,如 wx.requestwx.connectSocket 等。

    代码示例

    wx.login({
      success(res) {
        console.log(res.code)
      }
    })
     

    异步 API 返回 Promise

    基础库 2.10.2 版本起,异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise,否则仍按回调方式执行,无返回值。

    注意事项

    1. 部分接口如 downloadFilerequestuploadFileconnectSocketcreateCamera(小游戏)本身就有返回值, 它们的 promisify 需要开发者自行封装。
    2. 当没有回调参数时,异步接口返回 promise。此时若函数调用失败进入 fail 逻辑, 会报错提示 Uncaught (in promise),开发者可通过 catch 来进行捕获。
    3. wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。

    代码示例

    <!-- callback 形式调用 -->
    wx.chooseImage({
      success(res) {
        console.log('res:', res)
      }
    })
    
    <!-- promise 形式调用 -->
    wx.chooseImage().then(res => console.log('res: ', res))
     
  • 相关阅读:
    HDNOIP201404最短路径
    BJOI2015 Day3
    BJOI2015 Day2
    BJOI2015 Day1
    BZOJ4012 [HNOI2015]开店
    hdu2159(二维完全背包)
    hdu3496(二维背包)
    hdu3033(变形分组背包)
    hdu1267(递推)
    hdu1503(最长公共子序列)
  • 原文地址:https://www.cnblogs.com/playforever/p/12462376.html
Copyright © 2011-2022 走看看