nw-mission

LOFTER活动任务SDK

• 任务处理模块使用方法
  • 安装
  • 使用
    • 执行任务
    • 手动完成分享任务
    • 完成卡牌分享任务
    • 完成邀请助力
• 浏览任务自动完成模块使用方法
  • 使用
• 发布需知

任务处理模块使用方法

安装

npm i nw-mission --save

使用

执行任务

import { complete } from 'nw-mission';

const activityCode = 'harry-potter';
const shareData = {
  title: '1',
  description: '2',
  activityId: '3',
  picurl: '4',
}
const missionInfoList = await getMissionInfo();
const missionInfo = missionInfoList[0];
// 浏览任务
complete({
  missionInfo,
  activityCode,
})
// 分享任务
complete({
  missionInfo,
  activityCode,
  shareData,
})

手动完成分享任务

针对活动通用化场景下，分享任务的完成流程与CMS页面不在一起，需要自行在活动页触发分享并判断分享完成情况。

在前端收到约定分享任务的JSBridge完成回调后，手动调用此方法完成任务以领取任务奖励。

import { shareComplete } from 'nw-mission'

shareComplete({
  activityCode: 'harry-potter',
  successCallback: () => {
    console.log('分享任务完成并上报成功');
  }
})

完成卡牌分享任务

针对主街区需要跳转到抽卡首页等页面完成晒卡后才算任务完成，所以在调用此类任务的complete方法后，会自动把信息写入cookie再跳转到晒卡对应页面

• manual manual不传默认为false，代表自动监听页面分享完成，如果为true，本SDK将不会监听分享完成的JSBridge回调，需自行处理

import { shareCardEffect } from 'nw-mission'
// 自动执行卡牌分享任务
shareCardEffect({
  manual: false, // manual不传默认为false，代表自动监听页面分享完成
  activityCode: 'harry-potter',
  successCallback: () => {
    console.log('卡牌分享任务完成并上报成功');
  }
})

完成邀请助力

import { inviteEffect } from 'nw-mission'
inviteEffect({
  successCallback: () => {
    console.log('助力成功');
  },
  errorCallback: (msg: string) => {
    console.log(msg);
  }
})

浏览任务自动完成模块使用方法

目前只有浏览任务的自动完成功能 本脚本会自动在符合URL格式的页面读取任务信息，完成任务并自动上报

使用

在HTML中引入以下脚本：

<script src="https://lofter.lf127.net/nw-mission/effect-8b458c01.js"></script>

发布需知

1. npm run build使用Rollup进行打包，打包出两份产物。
   1. 其中dist/index.js是esModule形式，保留了import语法，便于依赖分析，减少应用打包体积。
   2. 另外dist/effect.js是用于任务目标页引入，用于识别url中的任务信息，自动完成任务并且上报。
2. npm run build会自动调用npm run doc，该命令会将最新版本的dist/effect.js 内容上传并且写入readme.md中。
3. 如果要更新组件文档，需要更新readme.template.md，该文件是readme.md的模板，会被npm run doc命令刷新。
4. npm run doc命令依赖upload.config.js文件中的NOS上传配置，需自行创建、配置并导出名为nosUpload的配置

   const nosUpload = {
     accessId: '',
     secretKey: '',
     endPoint: '',
     port: 80,
     domain: '',
     bucket: ''
   }
   module.exports = {
     nosUpload,
   }

5. npm run doc命令支持单独调用，如果确认代码没有改动，只需要更新文档，可以只执行本命令。