npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@taojimu/mx-home

v1.0.20

Published

taojimu miniapp components

Downloads

64

Readme

首页

截图

首页

互动规则浮层、我的奖励浮层

属性

属性介绍

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | className | String | - | 自定义组件的样式 | | showDialog | String | - | 展示奖励浮层或规则浮层,可选值:ruleprize | | dialogBgColor | String | #F67F7F | 互动规则、我的奖励浮层的背景色 | | isFullScreen | Boolean | false | 互动是否全屏展示。为 false 时,互动高度以 gameBgImg(宽度换算为 750)的高度为准。为 true 时,互动高度为屏幕高度 | | gameBgImg | Object | 见下文 | 小程序首页互动区域的背景图。尺寸要求:750x1624 的 png | | isShowHome | Boolean | true | 整个组件区域是否展示。为 false 时,整个组件区域不展示,但可以单独通过传showDialog来展示浮层 | | isShowGameMain | Boolean | true | 中心卡片区域及动态互动介绍区域是否展示。为 false 时,中心卡片区域gameMainImg及动态互动介绍区域gameIntro均不展示 | | isShowStartBtn | Boolean | true | “开始按钮”是否展示。为 false 时,“开始按钮”不展示 | | gameMainImg | Object | 见下文 | 中心卡片区域。尺寸要求:680x950 的 png | | gameIntro | Object | 见下文 | 动态互动介绍区域的介绍,支持格式: mp4、mov、gif、apng(apng 格式的图片后缀建议为 apng,否则没有动画效果),尺寸要求:600x480 | | startBtnImg | Object | 见下文 | 开始按钮的图片。尺寸要求:530x100 的 png | | ruleBtnImg | Object | 见下文 | 点击查看互动规则按钮的图片。尺寸要求:80x80 的正方形 png | | prizeBtnImg | Object | 见下文 | 点击查看我的奖励按钮的图片。尺寸要求:80x80 的正方形 png | | dialogHeaderImg | Object | 见下文 | 规则浮层和奖励浮层共用的头部背景图片,不包括文字。尺寸要求:750x200 的 png。注意,若传入该值,则 prizeDialogHeaderImg 和 ruleDialogHeaderImg 将不再生效 | | prizeDialogHeaderImg | Object | 见下文 | 点击查看互动规则浮层头部的图片。尺寸要求:750x200 的 png | | ruleDialogHeaderImg | Object | 见下文 | 点击查看我的奖励浮层头部的图片。尺寸要求:750x200 的 png | | prizeDialogNoPrizeImg | Object | 见下文 | 我的奖励浮层中,没有任何奖励时的兜底图片。尺寸要求:300x300 的 png | | onGameStart | Function | - | 点击开始按钮的回调 | | onShowRule | Function | - | 点击查看互动规则按钮的回调 | | onShowPrize | Function | - | 点击查看我的奖励按钮的回调 | | onCancel | Function | - | 点击互动规则、我的奖励的浮层或遮罩层的回调。因为是受控组件,请务必在使用 showDialog 时,在 onCancel 中通过 setData设置 showDialog'' |

gameBgImg

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

gameMainImg

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

gameIntro

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | - | 资源的 url | | poster | String | - | 视频格式的互动介绍资源的封面图。若互动介绍资源为视频格式,则为必传项。 | | duration | String | - | 视频格式的互动介绍资源的时长,单位秒。若互动介绍资源为视频格式,则为必传项。 | | width | Number | 600 | 资源宽度 | | height | Number | 480 | 资源高度 |

startBtnImg

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

ruleBtnImg | prizeBtnImg

| 属性名 | 类型 | 默认值 | 描述 | | :-- | :-- | :-- | :-- | | src | String | 规则按钮默认图片奖励按钮默认图片 | 图片的 url | | width | Number | 750 | 图片宽度 | | height | Number | 200 | 图片高度 |

dialogHeaderImg

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

prizeDialogHeaderImg | ruleDialogHeaderImg

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

prizeDialogNoPrizeImg

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

插槽介绍

| 插槽名 | 描述 | | :----- | :--------------------------------------------------- | | rule | 互动规则的内容 | | prize | 我的奖品的列表,或是奖品为空或拉取奖品出错的兜底状态 |

安装

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

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

使用

介绍

  • 点击开始游戏后(即在onGameStart的回调中),开发者需要先通过 taojimu.task.queryInfo 查询任务数据,获得游戏剩余机会chance,若有游戏机会(chance > 0)则去游戏,否则则通过控制mx-task组件的visible属性打开任务面板,通过做任务来获取游戏机会。
  • props 中的所有图片、视频数据对象,请从淘积木的 compExt 中读取。
  • 首页的互动任务浮标需要自己实现,方案请点击查看 互动任务浮标的文档
  • 我的奖品列表上线后方可测试。我的奖品列表会查询淘积木页面 id 中所有历史奖池的中奖奖品并汇总,因此页面 id 要真实存在,且页面 id 要跟奖池进行绑定(即在淘积木编辑器选择页面用到的奖池,然后发布页面)。

.json 示例代码

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

.axml 示例代码

<mx-home
  onGameStart="onGameStart"
  onShowRule="onShowRule"
  onShowPrize="onShowPrize"
  gameIntro="{{gameIntro}}"
>
  <view class="home-rule" slot="rule">
    <view class="title">1.玩法说明</view>
    <view class="info"
      >活动期间,用户通过每日到访活动页面签到,完成规定的连续签到任务,即可获得“1分钱兑换商品”资格+0.01元零钱(以下简称“1分兑”资格);用户需要进入页面开启签到进度。</view
    >
    <view class="title">2.游戏次数获取</view>
    <view class="info"
      >活动期间,符合条件的用户通过手机淘宝客户端,进入活动页面,即可根据页面提示参与活动。淘宝或天猫在支付宝等渠道发布的小程序无法参与本活动。</view
    >
    <view class="title">3.奖励说明</view>
    <view class="info"
      >活动期间,符合条件的用户通过手机淘宝客户端,进入活动页面,即可根据页面提示参与活动。淘宝或天猫在支付宝等渠道发布的小程序无法参与本活动。</view
    >
    <view class="title">4.活动时间</view>
    <view class="info">2021年3月8日00:00:00——2022年4月30日23:59:59</view>
  </view>
</mx-home>

.js 示例代码

const taojimu = requirePlugin('taojimu');

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

    this.setData({
      gameIntro: compExt.video_gameIntro,
    });
  },
  onGameStart() {},
  onShowRule() {},
  onShowPrize() {},
});

ext.json 示例代码

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

{
  "extEnable": true,
  "ext": {
    "componentTree": [
      {
        "meta": [
          {
            "title": "视频选择",
            "extension": { "recsize": 0.5 },
            "key": "video_gameIntro",
            "type": "video_unify"
          }
        ],
        "compExt": {
          "video_gameIntro": {
            "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"
          }
        },
        "version": "0.0.1"
      }
    ]
  }
}