前端【小程序】07-小程序基础篇【框架接口】【获取APP实例】【获取页面栈页面实例】

获取昵称和头像

• 用户昵称

  • input 组件的 type 属性设置为 nickname
  • 监听 input 组件的 blur 事件（在开发者工具中需要失去焦点两次）
  • 事件回调中通过事件对象 ev.detail 获取用户昵称

• 用户头像

  • button 组件的 open-type 属性设置为 chooseAvatar
  • 监听 button 组件的 chooseavatar 事件（没有大写字母）
  • 事件回调中通过事件对象 ev.detail.avatarUrl

<view class="profile">
  <view class="nickname">
    <label for="">昵称:</label>
    <input type="nickname" />
  </view>
  <view class="avatar">
    <label for="">头像:</label>
    <button>
      <image src="" mode="aspectFill"/>
    </button>
  </view>
</view>

 

获取App实例

　　文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/getApp.html

通过getApp()方法，拿到app.js中定义的App实例

　　

 数据也可以不写在globalData中

　　

在页面中通过getApp()拿到App实例，修改其中的数据

// pages/framework/index.js
Page({
  setToken () {
    // 获取到app实例
    const app = getApp()
    // 修改app实例中globalData中定义的token的值
    app.globalData.token = 'abcdefg'
  }
})

 

获取页面栈(页面实例 )

　　文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html

　　页面栈本质上是一个数组，它记录着当前打开的全部页面历史，页面栈中的每个单元即为一个页面实例（调用 Page 函数时会注册页面实例）。

　　全局调用 getCurrentPages 函数可以获取当前的页面栈，通过页面栈可以看到所有的页面实例，借助于页面栈可以获取到页面中的一些有用信息：

• data 页面的初始数据
• setData 更新数据
• onShow、onLoad 等生命周期
• route 页面的路径

在控制台通过getCurrentPages函数获取页面栈(在tabBar页面获取的时候，数组中只会有一项，当前tabBar页，因为跳转tabBar的时候，会关闭掉其他页面)

　　

在页面中通过getCurrentPages()拿到当前页面实例

// pages/framework/index.js
Page({ 9 
  getPage() {
    const pages = getCurrentPages()
    // 拿到的页面栈中，最后一项就是当前页面实例
    const currentPage = pages[pages.length -1]
    console.log(currentPage)
  }
})