@taojimu/mx-home v1.0.19

首页

截图

首页

互动规则浮层、我的奖励浮层

属性

属性介绍

gameBgImg

gameMainImg

gameIntro

startBtnImg

ruleBtnImg | prizeBtnImg

dialogHeaderImg

prizeDialogHeaderImg | ruleDialogHeaderImg

prizeDialogNoPrizeImg

插槽介绍

安装

# npm 国内用户可设置淘宝镜像
npm config set registry https://registry.npmmirror.com
npm install @taojimu/mx-home -S

# yarn
yarn add @taojimu/mx-home -S

使用

介绍

• 点击开始游戏后（即在onGameStart的回调中），开发者需要先通过 taojimu.task.queryInfo 查询任务数据，获得游戏剩余机会chance，若有游戏机会（chance > 0）则去游戏，否则则通过控制mx-task组件的visible属性打开任务面板，通过做任务来获取游戏机会。
• props 中的所有图片、视频数据对象，请从淘积木的 compExt 中读取。
• 首页的互动任务浮标需要自己实现，方案请点击查看 互动任务浮标的文档
• 我的奖品列表上线后方可测试。我的奖品列表会查询淘积木页面 id 中所有历史奖池的中奖奖品并汇总，因此页面 id 要真实存在，且页面 id 要跟奖池进行绑定（即在淘积木编辑器选择页面用到的奖池，然后发布页面）。

.json 示例代码

{
  "usingComponents": {
    "mx-home": "@taojimu/mx-home/es/mx-home"
  }
}

.axml 示例代码

<mx-home
  onGameStart="onGameStart"
  onShowRule="onShowRule"
  onShowPrize="onShowPrize"
  gameIntro="{{gameIntro}}"
>
  <view class="home-rule" slot="rule">
    <view class="title">1.玩法说明</view>
    <view class="info"
      >活动期间，用户通过每日到访活动页面签到，完成规定的连续签到任务，即可获得“1分钱兑换商品”资格+0.01元零钱（以下简称“1分兑”资格）；用户需要进入页面开启签到进度。</view
    >
    <view class="title">2.游戏次数获取</view>
    <view class="info"
      >活动期间，符合条件的用户通过手机淘宝客户端，进入活动页面，即可根据页面提示参与活动。淘宝或天猫在支付宝等渠道发布的小程序无法参与本活动。</view
    >
    <view class="title">3.奖励说明</view>
    <view class="info"
      >活动期间，符合条件的用户通过手机淘宝客户端，进入活动页面，即可根据页面提示参与活动。淘宝或天猫在支付宝等渠道发布的小程序无法参与本活动。</view
    >
    <view class="title">4.活动时间</view>
    <view class="info">2021年3月8日00:00:00——2022年4月30日23:59:59</view>
  </view>
</mx-home>

.js 示例代码

const taojimu = requirePlugin('taojimu');

Page({
  data: {},
  onLoad() {
    const compExt = my.getExtConfigSync().componentTree[0].compExt;

    this.setData({
      gameIntro: compExt.video_gameIntro,
    });
  },
  onGameStart() {},
  onShowRule() {},
  onShowPrize() {},
});

ext.json 示例代码

如何生成具体的数据请参见 meta 文档

{
  "extEnable": true,
  "ext": {
    "componentTree": [
      {
        "meta": [
          {
            "title": "视频选择",
            "extension": { "recsize": 0.5 },
            "key": "video_gameIntro",
            "type": "video_unify"
          }
        ],
        "compExt": {
          "video_gameIntro": {
            "duration": 3,
            "url": "https://a1.alibabausercontent.com/prod/feupload/user/qr/c3e1a9a0-2b10-11ec-baf0-fff1de6c9a40.mp4_.mp4",
            "width": 800,
            "height": 800,
            "snapshot": "https://a1.alibabausercontent.com/prod/feupload/user/qr/c3e1a9a0-2b10-11ec-baf0-fff1de6c9a40.mp4_.mp4?x-oss-process=video/snapshot,t_0,w_800,h_800",
            "poster": "https://a1.alibabausercontent.com/prod/feupload/user/qr/c3e1a9a0-2b10-11ec-baf0-fff1de6c9a40.mp4_.mp4?x-oss-process=video/snapshot,t_0,w_800,h_800",
            "name": "8WUelvWCo9MVQW2AAh5.mp4"
          }
        },
        "version": "0.0.1"
      }
    ]
  }
}