快速开始

在活动页开发中，流程通常都具有相似性，尤其是数据获取和状态判断方面。为了简化这一过程，我们已经封装了一组方法，可轻松获取与活动页面相关的数据和状态信息。这些信息包括但不限于：活动本身的详细信息、权限验证、参与记录以及中奖记录等。

安装

pnpm install @ifanrx/uni-act

注册全局组件

在 manifest.json 中添加如下配置：

"easycom": {
  "autoscan": true,
  "custom": {
    // 注意：缺一不可
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
    "^mp-(.*)": "@ifanrx/uni-mp/components/mp-$1/mp-$1.vue",
    "^act-(.*)": "@ifanrx/uni-act/components/act-$1/act-$1.vue"
  }
},

使用

<script setup>
// 所有模块均可从 @ifanrx/uni-act 中具名导入
import {useAct, usePrize, useParticipationPermission} from '@ifanrx/uni-act'

const options = defineProps({
  alias: {type: String, required: true},
})

// 获取活动数据
const {activity, isLoading} = useAct(options.alias)

const {hasParticipationPermission} = useParticipationPermission(options.alias)
</script>

act-hooks 通用特性

• 所有 hooks 默认都带有 5s 的缓存时间，即在 5s 内在任意地方调用同一个hooks 都只会有一个请求发出，其余均使用缓存数据
• 所有请求列表数据的 hooks 默认的数据获取长度都是 100（find 方法的 limit 参数），能够满足大部分活动的使用，如不满足，可以在使用的时候手动修改 requestParams 的 limit 参数
• 所有的列表均按照数据的创建时间倒叙排序，不可更改。若有排序需求，使用 select 方法变更

快速创建活动流程模板

在当前目录下创建模板代码

pnpm exec create-act-btn $(pwd)

亦可指定路径

pnpm exec create-act-btn ./packages/src/pages/index

它会在指定目录中创建两个文件：use-act-btn.js 和 act-modal.vue 组件。

use-act-btn.js 包含活动按钮的状态计算以及参与活动等相关逻辑。

act-modal.vue 包含活动弹窗，如「报名成功」、「抽奖结果」等弹窗。详见 act-base-modal

基于这两个文件可快速搭建活动流程，还能 mock 出按钮或弹窗，以便快速截图，见下一节。

常见问题

参数响应性

思考以下代码片段：

<script setup>
import {useUserStore} from '@ifanrx/uni-mp'

const userStore = useUserStore()
const {user} = storeToRefs(userStore)

const {lotteryLogs} = useLotteryLog(options.alias, {
  requestParams: {
    query: io.query.compare('inviter', '=', user.value.id),
  },
})
</script>

这段代码可能无法按预期工作，因为可能在发送请求时用户信息还没有请求回来，此时 user.value.id 是 undefined。

我们可以使用 enabled 参数，仅当 user.value.id 有值时，才进行请求，如下所示：

const { lotteryLogs } = useLotteryLog(options.alias, {
  requestParams: {
    query: io.query.compare('inviter', '=', user.value.id),
  },
  enabled: computed(() => !!user.value.id),
})

然而，这段代码仍然无法满足预期。因为我们在 query 中传入的 user.value.id 并不会响应式更新，因此它始终是 undefined。

解决方案是将参数包裹在一个 computed 中，使其可以响应式更新：

const { lotteryLogs } = useLotteryLog(options.alias, {
  requestParams: {
    query: computed(() => io.query.compare('inviter', '=', user.value.id)),
  },
  enabled: computed(() => !!user.value.id),
})

此时当 enabled 为 true 时，query 条件也会响应式地更新，确保请求行为始终基于最新的数据。

此外，对于 requestParams 其它参数也同理，只要包裹在 computed 即可保证参数是最新的。