页面调用接口

2022/7/8 微信小程序公众号

# getApp()

getApp()
函数用于获取当前应用实例,一般用于获取globalData 。

实例

const app = getApp()
console.log(app.globalData) 
1
2

注意

  • 不要在定义于
    App()
    内的函数中,或调用
    App
    前调用
    getApp()
    ,可以通过
    this.$scope
    获取对应的app实例
  • 通过
    getApp()
    获取实例之后,不要私自调用生命周期函数。
  • 当在首页nvue中使用
    getApp()
    不一定可以获取真正的App对象。对此提供了
    const app = getApp({allowDefault: true})
    用来获取原始的App对象,可以用来在首页对
    globalData
    等初始化

globalData是简单的全局变量,如果使用状态管理,请使用vuex

小程序globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。

# getCurrentPages()

getCurrentPages()
函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

getCurrentPages()
仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

每个页面实例的方法属性列表:

方法 描述 平台说明
page.$getAppWebview() 获取当前页面的webview对象实例 App
page.route 获取当前页面的路由

Tips:

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar
  • 不能在 App.vue 里面进行页面跳转。

# $getAppWebview()

uni-app 在 getCurrentPages()获得的页面里内置了一个方法 $getAppWebview() 可以得到当前webview的对象实例,从而实现对 webview 更强大的控制。在 html5Plus 中,plus.webview具有强大的控制能力
但uni-app框架有自己的窗口管理机制,请不要自己创建和销毁webview,如有需求覆盖子窗体上去,请使用原生子窗体subNvue。

注意: 此方法仅 App 支持
示例: 获取当前页面 webview 的对象实例

export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
    // #endif
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

获取指定页面 webview 的对象实例
getCurrentPages()可以得到所有页面对象,然后根据数组,可以取指定的页面webview对象


var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview();
console.log(currentWebview.id);//获得当前webview的id
console.log(currentWebview.isVisible());//查询当前webview是否可见
);
// #endif
1
2
3
4
5
6
7
8
9