页面

通过 definePage 函数注册小程序页面

注意

defineComponent 和 definePage 的区别在于两者的 properties 不同。

在 defineComponent 中 properties 表示组件属性
在 definePage 中 properties 表示页面路径的参数

定义一个页面

setup 为入口函数，对应小程序的 attach 生命周期，setup() 返回值将会暴露给小程序模板，可以直接在模板中使用。

definePage({
  setup(query, ctx) {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment,
    }
  },
})

template

<view bindtap="increment">{{count}}</view>

页面参数 `query`

setup 第一个参数为页面接受的参数 query。这些参数需要在 properties 中声明。详情参考 -> 🔗 使用 Component 构造器构造页面

声明参数

如访问页面 /pages/index/index?paramA=123&paramB=xyz，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。

definePage({
  properties: {
    paramA: Number,
    paramB: String,
  },
  setup(query, ctx) {
    query.paramA // 页面参数 paramA 的值 123
    query.paramB // 页面参数 paramB 的值 'xyz'
  },
})

properties 声明格式参见

未声明的参数

如果参数未在 properties 声明，则无法从 setup 中获取。

如访问页面 /pages/index/index?paramA=123&paramB=xyz&paramC=abc。

definePage({
  properties: {
    paramA: Number,
    paramB: String,
    // paramC: String
  },
  setup(query, ctx) {
    query.paramC // 页面参数 paramC 的值 undefined
  },
})

在遇到无法预知页面参数的情况下，可以使用 onLoad 生命周期钩子来获取完整参数，onLoad 的参数 options 为当前页面完整参数无需声明。

definePage({
  properties: {
    // paramC: String
  },
  setup(query, ctx) {
    // query 中的值必须在 properties 中声明
    onLoad(options => {
      options.paramA // 页面参数 paramA 的值 123
      options.paramB // 页面参数 paramB 的值 'xyz'
      options.paramC // 页面参数 paramB 的值 'abc'
    })
  },
})

页面上下文 `ctx`

传入 setup 函数的第二个参数是一个组件上下文对象，与原生小程序 Page 实例一致。

definePage({
  setup(query, ctx) {
    // 组件的文件路径
    console.log(ctx.is)
    // 节点 dataset
    console.log(ctx.dataset)
    // 选择器
    console.log(ctx.createSelectorQuery)
    // 动画（函数）
    console.log(ctx.animate)
  },
})

该上下文对象是非响应式的，可以安全地解构：

definePage({
  setup(query, { triggerEvent }) {
    ...
  }
})

setup() 中没有 this，ctx 包含了当前实例所有可用属性和方法。

生命周期

Rubic 导出了一系列组合式 API 来注册生命周期钩子。它们的命名和 Page 原始生命周期一致。

这些函数接受一个回调，该回调的参数与对应的生命周期一致，当钩子被实例调用时，该回调将被执行。

import { definePage, onLoad } from 'Rubic'
definePage({
  setup(query, ctx) {
    onLoad(args => {
      console.log('onLoad', args)
    })
  },
})

且 onXXX 函数都能被多次调用，依赖返回值的将会使用最后一次的返回值。

import { definePage, onShareAppMessage } from 'Rubic'
definePage({
  setup(query, ctx) {
    onShareAppMessage(params => {
      return { title: '标题1', path: '/page/1', imageUrl: 'http://x1.png' }
    })
    // 使用最后一次调用的返回值
    onShareAppMessage(params => {
      return { title: '标题2', path: '/page/2', imageUrl: 'http://x2.png'
    })
  },
})

Page 生命周期对应关系

definePage 中可以用的生命周期注册函数以及对应关系如下：

Rubic -> 原生 Page
onLoad -> attached
onUnload -> onUnload
onShow -> onShow
onHide -> onHide
onReady -> onReady
onResize -> onResize
onPullDownRefresh -> onPullDownRefresh
onReachBottom -> onReachBottom
onAddToFavorites -> onAddToFavorites
onTabItemTap -> onTabItemTap
onSaveExitState -> onSaveExitState
onShareAppMessage -> onShareAppMessage
onShareTimeline -> onShareTimeline
onPageScroll -> onPageScroll

其他选项

definePage 额外支持原生小程序的一些其他选项，以应对复杂场景。

`behaviors`

definePage 同样支持 behaviors，参见 🔗 behaviors

definePage({
  behaviors: [],
  setup(query, ctx) {},
})

`options`

页面的组件选项，同 🔗 Component 构造器中的 options。

definePage({
  options: {
    styleIsolation: 'apply-shared',
  },
  setup(query, ctx) {},
})

提示

Rubic 为了统一页面和组件的 setup 执行时机（Page -> onLoad 与 Component -> attached 执行时机不一致）。内部使用了 behaviors 来使 Page 支持 attached。

页面 ​

定义一个页面 ​

页面参数 query ​

声明参数 ​

未声明的参数 ​

页面上下文 ctx ​

生命周期 ​

Page 生命周期对应关系 ​

其他选项 ​

behaviors ​

options ​

页面