Page 插件

Mr.Hope ... 2020-11-8 小程序 大约 2 分钟

提示

page.ts 用于小程序页面渲染。

# 插件的引入

首先在 ts 文件头部引入 page@mptool/enhance

import { $Page } from "`@mptool/enhance";
import { xxx } from "path/to/page/ts";
1
2

# 函数

# resolvePage()

(option: PageQuery, page?: PageData, setGlobal = true) => PageData | null

简介:

  • 性质: 同步函数

  • 描述: 预处理 page 数据写入全局数据

  • 用法: 在页面 onNavigate 时调用,

    参数 描述
    option 页面跳转参数
    page 页面数据
    setGlobal 是否将处理后的数据写入到全局数据中
  • 返回: 处理后的 page 配置

案例:

  onNavigate(option) {
    resolvePage(option);
  }
1
2
3

# setPage()

({ option, ctx, handle }: SetPageOption, page?: ComponentData[] | undefined, preload?: boolean) => void

简介:

  • 描述: 设置本地界面数据,如果传入 page 参数,则根据 handle 的值决定是否在 setData 前处理 page

    如果没有传入 page,则使用 PageOption.data.page。之后根据 preload 的值决定是否对页面链接进行预加载。

  • 用法: 在页面 onLoad 时调用

  • 性质: 同步函数

    参数 描述
    object 配置对象
    page 页面数据
    preload [default:true] 是否预加载子页面

    object 参数:

    参数 描述
    option 页面传参
    ctx 页面指针
    handle [default:false] 页面是否已经被处理

案例:

  onLoad(option: any) {
    setPage({ option, ctx: this });
  }
1
2
3

# setOnlinePage()

(option: PageOption, ctx: PageInstanceWithPage, preload = true) => void

简介:

  • 描述: 设置在线界面数据

  • 用法: 在页面 onLoad 时调用

  • 性质: 同步函数

    参数 描述
    option 页面跳转参数
    ctx 页面指针
    preload [default:true] 是否预加载子页面

案例:

  onLoad(res: any) {
    setOnlinePage(res, this);
  }
1
2
3

# popNotice()

(id: string) => void

简介:

  • 描述: 弹出通知

  • 用法: 在页面 onLoad 时调用

  • 性质: 同步函数

    参数 描述
    id 当前界面的标识符

案例:

  onLoad({ id }) {
    popNotice(id);
  }
1
2
3

# getColor()

(grey?: boolean) => Colors

简介:

  • 描述: 获得页面背景相关颜色

  • 用法: 在页面 onShow 时调用

  • 性质: 同步函数

    参数 描述
    grey [default:false] 页面是否为灰色背景

案例:

  onShow() {
    this.setData({
      color: getColor(this.data.page[0].grey)
    });
  }
1
2
3
4
5