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

@tuia/jimu-sdk

v0.16.4

Published

用于广告弹层建站渲染

Downloads

15

Readme

积木 - 弹层建站

用于广告弹层建站渲染

开发

yarn dev
  • 预览页在 http://localhost:3000/vue

开发皮肤

skin=box yarn dev
  • 预览页在 http://localhost:3000/skin
  • 皮肤代码在 skin/box/index.vue

打包皮肤

skin=box yarn build:skin
  • 皮肤代码在 skin/box/index.vue

发布

发布 sdk

进入 tuia-jimu-web-node/sdk 文件夹

修改 package.json 版本号( 遵循 semver 规范 )

# 执行打包命令

yarn build:publish

# 发布生产版本

npm publish --access=public( npm 源切换到公网 )

# 发布测试版本

修改 package.json 版本号如 "0.8.0-beta"

npm publish --access=public --tag=beta( npm 源切换到公网 )

# 安装时直接 yarn add @tuia/jimu-sdk@beta

打包 JimuSDK 用于适配非 640px 设计稿开发的落地页

现有的 JimuSDK 仅适配活动前端使用的 640px 设计稿;
因此如果要把 JimuSDK 提供给别的落地页使用(如积木和百奇落地页是用 750px 的设计稿来开发的),则可传入 designWidth 参数,使用如下命令:

designWidth=750 npm run build:sdk

修改完运行打包命令得到适配特定落地页的 JimuSDK

打包自带 Vue 依赖的 JimuSDK

现有(默认)的 JimuSDK 打包完依赖外部页面挂载在 window 下的 Vue 变量,
在一些场景下希望 JimuSDK 能无外部依赖地运行,此时需要把 Vue 打包到输出文件中,使用如下命令:

buildWithVue=true npm run build:sdk

请注意这个操作会使输出文件大小从 75kB(gzip 21kB)变为 145kB(gzip 46kB)

vue 版本发布

进入 tuia-activity-node 项目 master 分支

安装刚发布的 @tuia/jimu-sdk 包

yarn build:vendor

cd dist/vendor

拷贝 vendor 文件的 hash 字符串

进入 tuia-ssp-manager 管理后台 > 活动管理 > 公共模块

修改 vendor 文件的 hash 值
确认

zepto 版本发布

进入 tuia-h5-node 项目 develop 分支 custom_ops 文件夹

安装刚发布的 @tuia/jimu-sdk 包

yarn public

cd dist

拷贝 public 文件的 hash 值

进入 tuia-ssp-manager 管理后台 > 活动管理 > 公共模块

修改 public 文件的版本号为刚发布的版本号
确认

使用方法

zepto 引用方式

<script src="//yun.tuisnake.com/SDK/vue/2.6.10/vue.min.js"></script>

window.Vue = window.Vue || null
require('@tuia/jimu-sdk/dist/JimuSDK.vue.js')

window.JimuSDK && window.JimuSDK.showLayer({
  schema,   // lottery.advertLayer.code
  isShowCloseAD: true,
  st_info_dpm_btn_close: '{"dpm":"54066.4.4.0-st_info_dpm_btn_close"}',
  st_info_dpm_btn_get: '{"dpm":"54066.4.6.0-st_info_dpm_btn_get"}',
  st_info_dpm_video_start: '{"dpm":"54066.4.6.0-st_info_dpm_video_start"}',
  st_info_dpm_exposure: '{"dpm":"54066.4.1.0-st_info_dpm_exposure"}',
  st_info_encourage_showLog: {'dpm': '54066.4.1.0-st_info_encourage_showLog'},
  androidDownloadUrl: '#android',
  iosDownloadUrl: '#ios',
  beforeClose: () => {
    console.log('fn beforeClose')
  },
  afterUse: () => {
    console.log('fn afterUse')
  },
  bridgeUse: () => {
    console.log('fn bridgeUse')
  }
})

vue 引用方式

<script src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

require('@tuia/jimu-sdk/dist/JimuSDK.vue.js')
window.JimuSDK && window.JimuSDK.showLayer({
  schema,   // lottery.advertLayer.code
  isShowCloseAD: true,  // 是否显示关闭按钮的广告字样
  st_info_dpm_btn_close: '{"dpm":"54066.4.4.0-st_info_dpm_btn_close"}', // 关闭弹层按钮埋点
  st_info_dpm_btn_get: '{"dpm":"54066.4.6.0-st_info_dpm_btn_get"}', // 使用券按钮埋点
  st_info_dpm_video_start: '{"dpm":"54066.4.6.0-st_info_dpm_video_start"}', // 视频开始播放埋点
  st_info_dpm_exposure: '{"dpm":"54066.4.1.0-st_info_dpm_exposure"}', // 互动弹层券曝光埋点
  st_info_encourage_showLog: {'dpm': '54066.4.1.0-st_info_encourage_showLog'},  // 激励弹层券曝光埋点
  androidDownloadUrl: '#android', // 安卓下载地址
  iosDownloadUrl: '#ios', // 苹果下载地址
  beforeClose: () => {  // 关闭按钮点击后,触发的回调(实际弹层关闭前)
    console.log('fn beforeClose')
  },
  afterUse: () => { // 券点击后触发的回调(实际跳转逻辑之前)
    console.log('fn afterUse')
  },
  bridgeUse: () => {  // 券点击后触发的jsBridge回调(实际afterUse之后)
    console.log('fn bridgeUse')
  }
})

关闭积木弹层

// 不触发关闭回调
window.JimuSDK && window.JimuSDK.closeLayer()

schema 测试数据

{"version":"1.0.0","page":{"backgroundLight":1,"backgroundMask":85,"closePosition":"rightTop","closeAD":1,"autoJump":{}},"layers":[{"fadeIn":"","fadeOut":"","elements":[{"id":"e773a34e","name":"按钮1","type":"button","style":{"width":"240px","height":"38px","zIndex":20,"top":"330px","left":"67px","opacity":1,"transform":"rotate(0deg)","borderBottomLeftRadius":"4px","borderBottomRightRadius":"4px","borderTopLeftRadius":"4px","borderTopRightRadius":"4px","borderStyle":"solid","borderWidth":"0px","borderColor":"transparent","backgroundColor":"#EA5422","color":"#fff","fontSize":"16px","textAlign":"center","whiteSpace":"nowrap","backgroundImage":"","backgroundPosition":"center","backgroundSize":"100% 100%"},"text":"立即领取","animation":{"type":"breathe","duration":1},"picValid":1,"jump":{"type":"link","android":"http://www.baidu.com/","ios":"","popupId":"","isCoversion":1,"disableType":1,"isBilling":1}},{"id":"a4ad934e","name":"图片1","type":"image","style":{"width":"246px","height":"240px","zIndex":20,"top":"57px","left":"64px","opacity":1,"transform":"rotate(0deg)","borderBottomLeftRadius":"0","borderBottomRightRadius":"0","borderTopLeftRadius":"0","borderTopRightRadius":"0","borderStyle":"solid","borderWidth":"0px","borderColor":"transparent","backgroundImage":"url(\"//yun.tuisnake.com/jimu-web/9bb79f28-timg.jpeg\")","backgroundPosition":"center","backgroundSize":"100% 100%"},"jump":{"type":"none","android":"","ios":"","popupId":"","isCoversion":1,"isBilling":0},"animation":{"type":"none","duration":1}},{"id":"fb96c987","name":"倒计时1","type":"countdown","style":{"width":"150px","height":"21px","zIndex":20,"top":"23px","left":"112px","opacity":1,"transform":"rotate(0deg)","borderBottomLeftRadius":"0","borderBottomRightRadius":"0","borderTopLeftRadius":"0","borderTopRightRadius":"0","borderStyle":"solid","borderWidth":"0px","borderColor":"transparent","backgroundColor":"rgba(255,255,255,0)","fontSize":"14px","lineHeight":"21px","letterSpacing":"2px","color":"#fff","textAlign":"left","overflow":"hidden"},"start":"","end":""},{"id":"0890dea7","name":"轮播图1","type":"carousel","style":{"width":"127px","height":"127px","zIndex":20,"top":"180px","left":"83px","opacity":1,"transform":"rotate(0deg)","borderBottomLeftRadius":"0","borderBottomRightRadius":"0","borderTopLeftRadius":"0","borderTopRightRadius":"0","borderStyle":"solid","borderWidth":"0px","borderColor":"transparent"},"sliders":[{"src":"//yun.tuisnake.com/jimu-web/d35f4e93-curry.png","id":"ac5ee194"},{"src":"//yun.tuisnake.com/jimu-web/599eb328-4ab9a451f8198618bcaaaa9f4ced2e738ad4e65b.jpg","id":"c9857079"},{"src":"//yun.tuisnake.com/jimu-web/b5677efa-f066f0ff769c0b9281d0132d4380c9f0.jpg","id":"6c09c7a2"}],"slidesPerView":3,"spaceBetween":0,"direction":"horizontal","wrapStrategy":"100% 100%","autoplay":{"enable":1,"delay":2000,"stopOnLastSlide":false,"disableOnInteraction":false},"speed":300},{"id":"00060560","name":"二维码1","type":"QRCode","style":{"width":"140px","height":"140px","zIndex":20,"top":"182px","left":"222px","opacity":1,"transform":"rotate(0deg)","borderBottomLeftRadius":"0","borderBottomRightRadius":"0","borderTopLeftRadius":"0","borderTopRightRadius":"0","borderStyle":"solid","borderWidth":"0px","borderColor":"transparent"},"jump":{"type":"none","android":"","ios":"","popupId":"","isCoversion":1},"src":"//yun.tuisnake.com/jimu-web/784785fb-1574583180.png"},{"id":"97b9d1b0","name":"视频1","type":"video","style":{"width":"180px","height":"320px","zIndex":20,"top":"376px","left":"97px","opacity":1,"transform":"rotate(0deg)","borderBottomLeftRadius":"0","borderBottomRightRadius":"0","borderTopLeftRadius":"0","borderTopRightRadius":"0","borderStyle":"solid","borderWidth":"0px","borderColor":"transparent","backgroundImage":"url(\"//yun.tuia.cn/tuia/jimo-web-pro/[email protected]\")","backgroundPosition":"center","backgroundSize":"100% 100%"},"srcStrong":"//yun.dui88.com/h5-mami/layer/861/861_1000k.ts","srcWeak":"//yun.dui88.com/h5-mami/layer/861/861_500k.ts","srcImage":"//yun.tuisnake.com/newactivity/assets/bg.5275c9b6d7642cb28a279a1638299945.png"}]}]}

辅助工具

在调试 sdk 的时候,经常需要 copy 接口返回的最新配置到 sdk/mock 下的 schema.json 里
加一个简易脚本 rewrite.js 辅助操作获取接口里的值写入到 schema.json 文件里,免去手动 copy 的操作
使用:进入到 mock 目录下 node 执行脚本,获取最新的配置。
注:里面的 id 和请求 url 是写死的,开发过程中视情况调整

node rewrite.js

另:node 可能会有解析 JSON 失败的情况,所以加了一个 python3 脚本 rewrite.py 实现同样功能
执行命令

python3 rewrite.py

注意事项

活动端积木 SDK

更新指南:https://www.yuque.com/tuia/otmlwr/il93l9

皮肤弹层点击事件 & 计费埋点

// 使用暴露的全局埋点方法给积木皮肤使用
window.JimuSDK.commonUse = (widgetAttrs) => {
  CommonUse(widgetAttrs, this.h5params, this)
}

关于打包体积

目前(2021-06-28)整体打包体积在 88kb
特别注意: 不要使用第三方请求包如 axios,使用 sdk/src/libs/utils.js 中的 Ajax 方法