# @taojimu/mx-task > taojimu miniapp components Latest version **1.0.28** (published 2024-10-10) · ISC license · 0 weekly downloads ## Install ```sh npm install @taojimu/mx-task pnpm add @taojimu/mx-task yarn add @taojimu/mx-task bun add @taojimu/mx-task ``` ## Health **Score 25/100 (F)** — status: maintenance-mode. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.28 | | Published | 2024-10-10 | | First published | 2022-01-24 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 87.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | taojimu-miniapp | ## Links - npm: https://www.npmjs.com/package/@taojimu/mx-task - npm.io page: https://npm.io/package/@taojimu/mx-task ## Dependencies (4) - [@taojimu/mx-spin](https://npm.io/package/@taojimu/mx-spin.md) ^0.0.6 - [@taojimu/mx-util](https://npm.io/package/@taojimu/mx-util.md) ^0.0.13 - [@taojimu/mx-video](https://npm.io/package/@taojimu/mx-video.md) ^0.0.17 - [@taojimu/mx-dialog](https://npm.io/package/@taojimu/mx-dialog.md) ^0.0.16 ## Recent versions - 1.0.28 (latest) — 2024-10-10 - 1.0.27 — 2024-10-10 - 1.0.26 — 2024-05-17 - 1.0.25 — 2024-05-17 - 1.0.24 — 2024-05-17 - 1.0.23 — 2024-05-16 - 1.0.23-alpha.1 — 2024-05-14 - 1.0.23-alpha.0 — 2024-05-13 - 1.0.22 — 2023-11-28 - 1.0.21 — 2023-10-20 - 1.0.20 — 2023-10-13 - 1.0.19 — 2023-10-08 - 1.0.18 — 2023-09-19 - 1.0.17 — 2023-05-16 - 1.0.16 — 2022-12-21 - … 36 more at https://npm.io/package/@taojimu/mx-task/versions ## README # 任务面板 ## 截图 ### 单任务模式、多任务模式、任务已完成的状态 ### 互动机会用完状态、收藏/加购宝贝浮层、观看视频浮层 ## 属性 ### 属性介绍 | 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | className | `String` | - | 自定义组件的样式 | | visible | `Boolean` | `false` | 是否展示任务面板 | | tasks | `Array` | `[]` | 任务列表的数组，数组顺序决定了任务出现的顺序。请传入淘积木任务 meta 所对应的 compExt，中的 tasks 字段原始值（不是 setEnv 传入的的 tasks）。如果任务分人群，需开发者自行根据不同的人群传不同的 tasks。 | | taskConfig | `Object` | [见下文](#taskconfig) | 任务的配置，如任务描述文案，任务按钮文案等 | | taskInfo | `String` | `阿喔！互动资格已用完` | 任务面板顶部的描述文案 | | taskMessage | `String` | `完成店铺小任务可获得互动资格喔！` | 任务面板顶部小标题的任务描述文案 | | isShowAllTask | `Boolean` | `true` | 单任务模式还是多任务模式，默认是多任务模式，即任务面板每次展现所有任务，为 false 的话每次只展现一条未做的任务。 | | taskPanelHeaderImg | `Object` | [见下文](#taskpanelheaderimg--superTaskPanelHeaderImg) | 任务面板的头图。请传入淘积木的 compExt 中图片 url 所在的整个图片 object 对象。尺寸要求：750x200 的 png | | superTaskPanelHeaderImg | `Object` | [见下文](#taskpanelheaderimg--superTaskPanelHeaderImg) | 超级任务面板的头图。请传入淘积木的 compExt 中图片 url 所在的整个图片 object 对象。尺寸要求：750x200 的 png | | dialogBgColor | `String` | `'#ffffff'` | 弹窗的背景色 | | dialogBtnColor | `Array` 或 `String` | `['#f5515f', '#9f041b', '90deg']` | 按钮的颜色，支持通过数组传 2 个色和 1 个角度做渐变色，角度为数组第 3 个值；传一个色则为纯色按钮 | | dialogBtnTextColor | `String` | `'#ffffff'` | 按钮文字的颜色 | | dialogHeaderImg | `Object` | [见下文](#dialogheaderimg) | 任务浮层的头部背景图片，不包括文字。尺寸要求：750x200 的 png。注意，若传入该值，则 taskPanelHeaderImg 将不再生效。 超级任务面板的头图 superTaskPanelHeaderImg 不受影响。 | | subDialogHeaderImg | `Object` | [见下文](#subDialogHeaderImg) | 收藏浮层、加购浮层、观看视频浮层、预约新机浮层、互动机会用完浮层共用的头部背景图片，不包括文字。尺寸要求：590x200 的 png。注意，若传入该值，则 favorItemHeaderImg、addBagHeaderImg、watchVideoHeaderImg、reservePhoneModelHeaderImg、taskCompleteHeaderImg 将不再生效 | | favorItemHeaderImg | `Object` | [见下文](#favoritemheaderimg--addbagheaderimg--taskcompleteheaderimg--watchvideoheaderimg) | 收藏商品任务浮层的头图。尺寸要求：590x200 的 png | | addBagHeaderImg | `Object` | [见下文](#favoritemheaderimg--addbagheaderimg--taskcompleteheaderimg--watchvideoheaderimg) | 加购商品任务浮层的头图。尺寸要求：590x200 的 png | | taskCompleteHeaderImg | `Object` | [见下文](#favoritemheaderimg--addbagheaderimg--taskcompleteheaderimg--watchvideoheaderimg) | 全部任务都做完时，游戏没任何机会了的浮层的头图。尺寸要求：590x200 的 png | | taskCompleteBodyImg | `Object` | [见下文](#taskcompletebodyimg) | 全部任务都做完时，游戏没任何机会了的示意图。尺寸要求：300x300 的 png | | watchVideoHeaderImg | `Object` | [见下文](#favoritemheaderimg--addbagheaderimg--taskcompleteheaderimg--watchvideoheaderimg) | 观看视频任务的浮层头图。尺寸要求：590x200 的 png | | reservePhoneModelHeaderImg | `Object` | [见下文](#favoritemheaderimg--addbagheaderimg--taskcompleteheaderimg--watchvideoheaderimg) | 预约新机任务的浮层头图。尺寸要求：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 #### 默认值 ```js // 任务列表默认配置 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` | [见上文](#taskconfig) | 做任务按钮的文案，值依次为：做任务文案、任务已完成文案、收藏加购等任务展现详情浮层的主按钮文案 | | desc | `String` | 完成任务获得 1 次互动机会 | 任务描述 | | duration | `Number` | `10` | 浏览店铺任务 goShop，浏览宝贝详情页任务 goItemDetail，观看直播任务 appointLive，观看视频任务 watchVideo 等任务的浏览/观看时长，单位秒 | ### dialogHeaderImg | 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | `String` | [头图背景](https://gw.alicdn.com/imgextra/i4/O1CN01CCKqeg29PzUEMx0XK_!!6000000008061-2-tps-750-200.png) | 图片的 url | | width | `Number` | 750 | 图片宽度 | | height | `Number` | 200 | 图片高度 | ### subDialogHeaderImg | 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | `String` | [头图背景](https://gw.alicdn.com/imgextra/i1/O1CN01eQqG9a1YBCv4OVuGH_!!6000000003020-2-tps-590-200.png) | 图片的 url | | width | `Number` | 590 | 图片宽度 | | height | `Number` | 200 | 图片高度 | ### taskPanelHeaderImg | superTaskPanelHeaderImg | 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | `String` | [普通任务浮层头图](https://gw.alicdn.com/imgextra/i1/O1CN01Bkd0yk1kYMGZjVspw_!!6000000004695-2-tps-750-200.png)、 [超级任务浮层头图](https://gw.alicdn.com/imgextra/i1/O1CN01MKpeos20VdmrXUsKk_!!6000000006855-2-tps-750-200.png) | 图片的 url | | width | `Number` | `750` | 图片宽度 | | height | `Number` | `200` | 图片高度 | ### taskCompleteBodyImg | 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | `String` | [默认图片地址](https://gw.alicdn.com/imgextra/i3/O1CN01djSqKd20m81YCudfS_!!6000000006891-2-tps-300-300.png) | 图片的 url | | width | `Number` | `300` | 图片宽度 | | height | `Number` | `300` | 图片高度 | ### favorItemHeaderImg | addBagHeaderImg | taskCompleteHeaderImg | watchVideoHeaderImg | 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | `String` | [收藏宝贝浮层头图](https://gw.alicdn.com/imgextra/i1/O1CN01JR6UYK1Qj5E3sDVtL_!!6000000002011-2-tps-590-200.png)、[加购宝贝浮层头图](https://gw.alicdn.com/imgextra/i4/O1CN017DtrW820kIRUDvQek_!!6000000006887-2-tps-590-200.png)、[互动没机会了浮层头图](https://gw.alicdn.com/imgextra/i4/O1CN01kg0b7r1zVLu473pcc_!!6000000006719-2-tps-590-200.png)、[观看视频浮层头图](https://gw.alicdn.com/imgextra/i4/O1CN01IMXUWt27hH8YW9fSJ_!!6000000007828-2-tps-590-200.png)、[预约新机浮层头图](https://gw.alicdn.com/imgextra/i4/O1CN01mivNoK1KVRl0WIRnL_!!6000000001169-2-tps-590-200.png) | 图片的 url | | width | `Number` | `590` | 图片宽度 | | height | `Number` | `200` | 图片高度 | ## ## 安装 ```bash # npm 国内用户可设置淘宝镜像 npm config set registry https://registry.npmmirror.com npm install @taojimu/mx-task -S # yarn yarn add @taojimu/mx-task -S ``` ## ## 使用 ### 介绍 - 使用该组件前必须先进行 setEnv 注册，具体参见[.js 示例代码](#js-示例代码) - mx-task 组件只需传入淘积木任务 meta 所对应的 compExt 中的 tasks 字段原始值，mx-task 会根据任务是否做过进行处理，不需要开发者关心任务做的次数、任务是否已完成等。 - 组件内置了埋点，如展示任务浮层、关闭任务浮层、点击具体某个任务、任务成功、失败等等。 - props 中的所有图片、视频数据对象，请从淘积木的 compExt 中读取。 ### .json 示例代码 ```json { "usingComponents": { "mx-task": "@taojimu/mx-task/es/mx-task" } } ``` ### .axml 示例代码 ```html ``` ### .js 示例代码 [setEnv 介绍](../../api/task#注册任务-taojimusetenv) ```javascript 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 文档](../../meta) ```json { "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" } ] } } ``` --- _Source: https://npm.io/package/@taojimu/mx-task · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._