@taojimu/mx-task v1.0.26

任务面板

截图

单任务模式、多任务模式、任务已完成的状态

互动机会用完状态、收藏/加购宝贝浮层、观看视频浮层

属性

属性介绍

taskConfig

默认值

// 任务列表默认配置
const taskConfig = {
  'addBag': {
    label: '加购店铺宝贝',
    btnText: ['去加购', '已加购', '加购商品'],
    desc: '完成任务获得1次互动机会',
  },
  'favorItem': {
    label: '收藏店铺宝贝',
    btnText: ['去收藏', '已收藏', '收藏商品'],
    desc: '完成任务获得1次互动机会',
  },
  'favorDaren': {
    label: '关注达人',
    btnText: ['去关注', '已关注'],
    desc: '完成任务获得1次互动机会',
  },
  'favorShop': {
    label: '订阅店铺',
    btnText: ['去订阅', '已订阅'],
    desc: '完成任务获得1次互动机会',
  },
  'favorLive': {
    label: '关注直播间',
    btnText: ['去关注', '已关注'],
    desc: '完成任务获得1次互动机会',
  },
  'favorMiniapp': {
    label: '添加到手淘二楼',
    btnText: ['去添加', '已添加'],
    desc: '完成任务获得1次互动机会',
  },
  'joinMember': {
    label: '加入会员',
    btnText: ['去入会', '已入会'],
    desc: '完成任务获得1次互动机会',
  },
  'goShop': {
    label: '浏览店铺',
    btnText: ['去浏览', '已浏览'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'appointLive': {
    label: '观看店铺直播',
    btnText: ['去观看', '已观看'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'share': {
    label: '分享给好友',
    btnText: ['去分享', '已分享'],
    desc: '完成任务获得1次互动机会',
  },
  'shareForHelp': {
    label: '分享助力',
    btnText: ['去分享', '已分享'],
    desc: '完成任务获得1次互动机会',
    // shareQuery为任意的kv参数, 在首页的onLoad中可以获取到，可用于分享回流使用。
    shareQuery: {},
  },
  'goItemDetail': {
    label: '浏览店铺商品',
    btnText: ['去浏览', '已查看'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'watchVideo': {
    label: '观看视频',
    btnText: ['去观看', '已观看'],
    desc: '完成任务获得1次互动机会',
    duration: 10,
  },
  'dailyCheckin': {
    label: '每日打卡',
    btnText: ['去打卡', '已打卡'],
    desc: '完成任务获得1次互动机会',
  },
  'browsePage': {
    label: '浏览页面',
    btnText: ['去浏览', '已浏览'],
    desc: '完成任务获得1次互动机会',
  },
};

dialogHeaderImg

subDialogHeaderImg

taskPanelHeaderImg | superTaskPanelHeaderImg

taskCompleteBodyImg

favorItemHeaderImg | addBagHeaderImg | taskCompleteHeaderImg | watchVideoHeaderImg

安装

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

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

使用

介绍

• 使用该组件前必须先进行 setEnv 注册，具体参见.js 示例代码
• mx-task 组件只需传入淘积木任务 meta 所对应的 compExt 中的 tasks 字段原始值，mx-task 会根据任务是否做过进行处理，不需要开发者关心任务做的次数、任务是否已完成等。
• 组件内置了埋点，如展示任务浮层、关闭任务浮层、点击具体某个任务、任务成功、失败等等。
• props 中的所有图片、视频数据对象，请从淘积木的 compExt 中读取。

.json 示例代码

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

.axml 示例代码

<mx-task
  visible="{{visible}}"
  tasks="{{tasks}}"
  onCancel="onCancel"
  onTaskSuccess="onTaskSuccess"
  onTaskFail="onTaskFail"
  isShowAllTask="{{isShowAllTask}}"
  taskConfig="{{taskConfig}}"
>
</mx-task>

.js 示例代码

setEnv 介绍

const taojimu = requirePlugin('taojimu');

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

    // 必须要设置setEnv，具体请参考上文的 setEnv介绍
    taojimu.setEnv({
      cid: 'test', // 当前游戏的唯一标志，全局唯一，应该避免和其他游戏isv商冲突。所有的cid 公用一个值即可。主要避免和其他isv重复。
      pageId: 123456, // 页面id, 由淘积木负责生成。测试时可随便制定，用于和cid 一起区分不同isv 厂商在不同页面下游戏和任务的消耗情况。
    });

    this.setData({
      visible: true,
      isShowAllTask: true,
      tasks: compExt.task.tasks,
    });
  },
  onCancel() {
    this.setData({
      visible: false,
    });
  },
  onTaskSuccess(result) {
    // 示例返回结果：
    // result = {
    //   chance: 2, // 游戏机会,
    //   task: {
    //     taskName: 'browsePage',
    //     count: 2, // 任务已经做了2次，
    //     isCompleted: true | false, // 当天的任务是否已经完成
    //   },
    // };
    this.setData({
      visible: false,
    });
  },
  onTaskFail(msg) {
    // 错误信息示例：msg = "请在真机上进行预览"
  },
});

ext.json 示例代码

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

{
  "extEnable": true,
  "ext": {
    "componentTree": [
      {
        "meta": [
          {
            "key": "task",
            "type": "task",
            "title": "设置任务",
            "info": "最少1个最多7个",
            "required": true,
            "extension": {
              "scene": "isv",
              "tasks": [
                "favorItem",
                "favorShop",
                "favorLive",
                "addBag",
                "joinMember",
                "share",
                "appointLive",
                "goShop",
                "goItemDetail",
                "favorDaren",
                "watchVideo",
                "dailyCheckin",
                "favorMiniapp"
              ],
              "config": {
                "share": { "name": "分享到群", "minDailyLimit": 1, "maxDailyLimit": 20 },
                "appointLive": { "name": "观看直播", "showDailyLimit": false },
                "addBag": { "itemMin": 1, "itemMax": 4 }
              },
              "showDailyLimit": true,
              "minDailyLimit": 1,
              "maxDailyLimit": 50,
              "max": 7,
              "min": 1
            }
          }
        ],
        "compExt": {
          "task": {
            "tasks": [
              { "taskContent": { "type": "favorShop" }, "dailyLimit": 1 },
              { "taskContent": { "type": "favorLive" }, "dailyLimit": 1 },
              {
                "taskContent": {
                  "type": "favorItem",
                  "items_favor": [586468068490],
                  "items_favorPrefetchData": [
                    {
                      "auction_id": "586468068490",
                      "itemImges": "",
                      "promoName": "",
                      "preSellType": 0,
                      "itemTitle": "测试白盒黑盒创意，请不要拍",
                      "promoMBasePrice": "0.01",
                      "isPostFree": "1",
                      "pictUrl": "//gw.alicdn.com/bao/uploaded/i1/2247603103/O1CN01xnD9Ym1YnDYsTvpMn_!!2-item_pic.png",
                      "preSellCount": "0",
                      "isMall": "1",
                      "icQuantityDesc": "有货",
                      "preSellPrice": "",
                      "promoMPrice": "",
                      "spBiz30day": "0",
                      "spProvcity": "广东 广州",
                      "spSeven": "1",
                      "totalSold": "9",
                      "price": "0.01",
                      "allowApply": false
                    }
                  ]
                },
                "dailyLimit": 3
              },
              {
                "taskContent": {
                  "type": "addBag",
                  "items_addbag": [586468068490],
                  "items_addbagPrefetchData": [
                    {
                      "auction_id": "586468068490",
                      "itemImges": "",
                      "promoName": "",
                      "preSellType": 0,
                      "itemTitle": "测试白盒黑盒创意，请不要拍",
                      "promoMBasePrice": "0.01",
                      "isPostFree": "1",
                      "pictUrl": "//gw.alicdn.com/bao/uploaded/i1/2247603103/O1CN01xnD9Ym1YnDYsTvpMn_!!2-item_pic.png",
                      "preSellCount": "0",
                      "isMall": "1",
                      "icQuantityDesc": "有货",
                      "preSellPrice": "",
                      "promoMPrice": "",
                      "spBiz30day": "0",
                      "spProvcity": "广东 广州",
                      "spSeven": "1",
                      "totalSold": "9",
                      "price": "0.01",
                      "allowApply": false
                    }
                  ]
                },
                "dailyLimit": 3
              },
              { "taskContent": { "type": "joinMember" }, "dailyLimit": 1 },
              { "taskContent": { "type": "share" }, "dailyLimit": 3 },
              { "taskContent": { "type": "goShop" }, "dailyLimit": 3 },
              { "taskContent": { "type": "appointLive", "feedId": 306813489767 }, "dailyLimit": 3 },
              {
                "taskContent": { "type": "goItemDetail", "items_goItemDetail": [563932506881] },
                "dailyLimit": 3
              },
              {
                "taskContent": { "type": "favorDaren", "darenId": "2208728948483" },
                "dailyLimit": 1
              },
              {
                "taskContent": {
                  "type": "watchVideo",
                  "video": {
                    "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"
                  }
                },
                "dailyLimit": 1
              },
              { "taskContent": { "type": "dailyCheckin" }, "dailyLimit": 1 },
              {
                "taskContent": { "type": "favorMiniapp", "miniappId": "3000000027280761" },
                "dailyLimit": 1
              }
            ],
            "current": 11
          }
        },
        "version": "0.0.1"
      }
    ]
  }
}