You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@taojimu/mx-task

Package Overview
Dependencies
Maintainers
1
Versions
49
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@taojimu/mx-task

taojimu miniapp components


Version published
Weekly downloads
13
decreased by-78.33%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

任务面板

截图

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

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

属性

属性介绍

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

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次互动机会',
  },
};
属性名类型默认值描述
labelString-任务标题
btnTextArray见上文做任务按钮的文案,值依次为:做任务文案、任务已完成文案、收藏加购等任务展现详情浮层的主按钮文案
descString完成任务获得 1 次互动机会任务描述
durationNumber10浏览店铺任务 goShop,浏览宝贝详情页任务 goItemDetail,观看直播任务 appointLive,观看视频任务 watchVideo 等任务的浏览/观看时长,单位秒

dialogHeaderImg

属性名类型默认值描述
srcString头图背景图片的 url
widthNumber750图片宽度
heightNumber200图片高度

subDialogHeaderImg

属性名类型默认值描述
srcString头图背景图片的 url
widthNumber590图片宽度
heightNumber200图片高度

taskPanelHeaderImg | superTaskPanelHeaderImg

属性名类型默认值描述
srcString普通任务浮层头图超级任务浮层头图图片的 url
widthNumber750图片宽度
heightNumber200图片高度

taskCompleteBodyImg

属性名类型默认值描述
srcString默认图片地址图片的 url
widthNumber300图片宽度
heightNumber300图片高度

favorItemHeaderImg | addBagHeaderImg | taskCompleteHeaderImg | watchVideoHeaderImg

属性名类型默认值描述
srcString收藏宝贝浮层头图加购宝贝浮层头图互动没机会了浮层头图观看视频浮层头图预约新机浮层头图图片的 url
widthNumber590图片宽度
heightNumber200图片高度

安装

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

FAQs

Package last updated on 17 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc