@tuia/jimu-sdk

0.16.4 • Public • Published

积木 - 弹层建站

用于广告弹层建站渲染

开发

yarn dev

开发皮肤

skin=box yarn dev

打包皮肤

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/df_image_widget@1x.png\")","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 方法

Readme

Keywords

none

Package Sidebar

Install

npm i @tuia/jimu-sdk

Weekly Downloads

2

Version

0.16.4

License

ISC

Unpacked Size

103 kB

Total Files

3

Last publish

Collaborators

  • any-u
  • dinglh
  • candy_dd
  • wintersun97
  • tump
  • inuanfeng
  • zhoucheng
  • zhangmin173
  • aiduck
  • chao.zhou
  • babalk
  • leitingting
  • nbseven
  • linhao-vue
  • liusandy