Nostalgic Perogi Monogramming

    @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 方法

    Keywords

    none

    Install

    npm i @tuia/jimu-sdk

    DownloadsWeekly Downloads

    145

    Version

    0.16.4

    License

    ISC

    Unpacked Size

    103 kB

    Total Files

    3

    Last publish

    Collaborators

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