@taojimu/mx-task

v1.0.28

Published

a year ago

taojimu miniapp components

0High
0Medium
0Low

taojimu-miniapp

任务面板

截图

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

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

属性

属性介绍

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | className | String | - | 自定义组件的样式 | | visible | Boolean | false | 是否展示任务面板 | | tasks | Array | [] | 任务列表的数组，数组顺序决定了任务出现的顺序。请传入淘积木任务 meta 所对应的 compExt，中的 tasks 字段原始值（不是 setEnv 传入的的 tasks）。如果任务分人群，需开发者自行根据不同的人群传不同的 tasks。 | | taskConfig | Object | 见下文 | 任务的配置，如任务描述文案，任务按钮文案等 | | taskInfo | String | 阿喔！互动资格已用完 | 任务面板顶部的描述文案 | | taskMessage | String | 完成店铺小任务可获得互动资格喔！ | 任务面板顶部小标题的任务描述文案 | | isShowAllTask | Boolean | true | 单任务模式还是多任务模式，默认是多任务模式，即任务面板每次展现所有任务，为 false 的话每次只展现一条未做的任务。 | | taskPanelHeaderImg | Object | 见下文 | 任务面板的头图。请传入淘积木的 compExt 中图片 url 所在的整个图片 object 对象。尺寸要求：750x200 的 png | | superTaskPanelHeaderImg | Object | 见下文 | 超级任务面板的头图。请传入淘积木的 compExt 中图片 url 所在的整个图片 object 对象。尺寸要求：750x200 的 png | | dialogBgColor | String | '#ffffff' | 弹窗的背景色 | | dialogBtnColor | Array 或 String | ['#f5515f', '#9f041b', '90deg'] | 按钮的颜色，支持通过数组传 2 个色和 1 个角度做渐变色，角度为数组第 3 个值；传一个色则为纯色按钮 | | dialogBtnTextColor | String | '#ffffff' | 按钮文字的颜色 | | dialogHeaderImg | Object | 见下文 | 任务浮层的头部背景图片，不包括文字。尺寸要求：750x200 的 png。注意，若传入该值，则 taskPanelHeaderImg 将不再生效。超级任务面板的头图 superTaskPanelHeaderImg 不受影响。 | | subDialogHeaderImg | Object | 见下文 | 收藏浮层、加购浮层、观看视频浮层、预约新机浮层、互动机会用完浮层共用的头部背景图片，不包括文字。尺寸要求：590x200 的 png。注意，若传入该值，则 favorItemHeaderImg、addBagHeaderImg、watchVideoHeaderImg、reservePhoneModelHeaderImg、taskCompleteHeaderImg 将不再生效 | | favorItemHeaderImg | Object | 见下文 | 收藏商品任务浮层的头图。尺寸要求：590x200 的 png | | addBagHeaderImg | Object | 见下文 | 加购商品任务浮层的头图。尺寸要求：590x200 的 png | | taskCompleteHeaderImg | Object | 见下文 | 全部任务都做完时，游戏没任何机会了的浮层的头图。尺寸要求：590x200 的 png | | taskCompleteBodyImg | Object | 见下文 | 全部任务都做完时，游戏没任何机会了的示意图。尺寸要求：300x300 的 png | | watchVideoHeaderImg | Object | 见下文 | 观看视频任务的浮层头图。尺寸要求：590x200 的 png | | reservePhoneModelHeaderImg | Object | 见下文 | 预约新机任务的浮层头图。尺寸要求：590x200 的 png | | goHomeBtnLink | String | 回到游戏首页 | 互动机会用完状态的浮层中“返回首页”按钮的跳转链接，不填写则默认回到游戏首页。 | | goHomeBtnText | String | 返回首页 | 互动机会用完状态的浮层中“返回首页”按钮的文案，不填写则默认为“返回主会场”或“返回首页”。 | | onTaskSuccess | Function | - | 任务成功的回调，返回 { chance: 2, task: { taskName: 'browsePage', count: 2, isCompleted: true } } | | onTaskFail | Function | - | 任务失败的回调，返回错误信息字符串 | | onCancel | Function | - | 点击遮罩层或右上角叉或下方叉或取消按钮的回调。因为是受控组件，请务必在 onCancel 中通过 setData设置 visible 为 false |

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次互动机会',
  },
};

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | --- | | label | String | - | 任务标题 | | btnText | Array | 见上文 | 做任务按钮的文案，值依次为：做任务文案、任务已完成文案、收藏加购等任务展现详情浮层的主按钮文案 | | desc | String | 完成任务获得 1 次互动机会 | 任务描述 | | duration | Number | 10 | 浏览店铺任务 goShop，浏览宝贝详情页任务 goItemDetail，观看直播任务 appointLive，观看视频任务 watchVideo 等任务的浏览/观看时长，单位秒 |

dialogHeaderImg

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | 头图背景 | 图片的 url | | width | Number | 750 | 图片宽度 | | height | Number | 200 | 图片高度 |

subDialogHeaderImg

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | 头图背景 | 图片的 url | | width | Number | 590 | 图片宽度 | | height | Number | 200 | 图片高度 |

taskPanelHeaderImg | superTaskPanelHeaderImg

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | 普通任务浮层头图、超级任务浮层头图 | 图片的 url | | width | Number | 750 | 图片宽度 | | height | Number | 200 | 图片高度 |

taskCompleteBodyImg

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | 默认图片地址 | 图片的 url | | width | Number | 300 | 图片宽度 | | height | Number | 300 | 图片高度 |

favorItemHeaderImg | addBagHeaderImg | taskCompleteHeaderImg | watchVideoHeaderImg

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | 收藏宝贝浮层头图、加购宝贝浮层头图、互动没机会了浮层头图、观看视频浮层头图、预约新机浮层头图 | 图片的 url | | width | Number | 590 | 图片宽度 | | height | Number | 200 | 图片高度 |

安装

# 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"
      }
    ]
  }
}