Page 插件

Mr.Hope ... 小程序 大约 2 分钟

提示

page.ts 是 Mr.Hope 本人自己编写的库,目前仅做个人使用。

# 插件的引入

首先在 ts 文件头部引入 pagewxpage

import $register from "wxpage";
import $page from "path/to/page";
1
2

# 函数

# resolvePage()

(option: MPPage.PageLifeTimeOptions, page?: ComponentData[] | undefined, setGlobal?: boolean) => ComponentData[] | undefined

简介:

  • 性质: 同步函数

  • 描述: 预处理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: PageArg, ctx: any, preload?: boolean) => void

简介:

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

  • 用法: 在页面onLoad时调用

  • 性质: 同步函数

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

案例:

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

# popNotice()

(aim: string) => void

简介:

  • 描述: 弹出通知

  • 用法: 在页面onLoad时调用

  • 性质: 同步函数

    参数 描述
    aim 当前界面的 aim 值

案例:

  onLoad(res: any) {
    popNotice('main');
  }
1
2
3

# setColor()

(grey?: boolean) => { NavigationBarColor, BackGroundColor}

简介:

  • 描述: 设置胶囊与背景颜色

  • 用法: 在页面onShow时调用

  • 性质: 同步函数

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

案例:

  onShow() {
    if (this.data.page) {
      // 设置胶囊和背景颜色
      const { nc, bc } = setColor(this.data.page[0].grey);

      wx.setNavigationBarColor(nc);
      wx.setBackgroundColor(bc);
    }
  }
1
2
3
4
5
6
7
8
9

# changeNav()

(option: WechatMiniprogram.Page.IPageScrollOption, ctx: any, headName?: string | undefined) => void

简介:

  • 描述: 导航栏动态改变

  • 用法: 在页面onPageScroll时调用

  • 性质: 同步函数

    参数 描述
    option 组件参数
    ctx 页面指针
    headName 导航栏配置对象在data中的名称

案例:

  onPageScroll(event) {
    changeNav(event, this);
  },
1
2
3