用于广告弹层建站渲染
``shell`
yarn dev
- 预览页在 http://localhost:3000/vue
`shell`
skin=box yarn dev
- 预览页在 http://localhost:3000/skin
- 皮肤代码在 skin/box/index.vue
`shell`
skin=box yarn build:skin
- 皮肤代码在 skin/box/index.vue
> 进入 tuia-jimu-web-node/sdk 文件夹
`shell
修改 package.json 版本号（ 遵循 semver 规范 ）
yarn build:publish
npm publish --access=public（ npm 源切换到公网 ）
修改 package.json 版本号如 "0.8.0-beta"
npm publish --access=public --tag=beta（ npm 源切换到公网 ）
$3
现有的 JimuSDK 仅适配活动前端使用的 640px 设计稿；
因此如果要把 JimuSDK 提供给别的落地页使用（如积木和百奇落地页是用 750px 的设计稿来开发的），则可传入 designWidth 参数，使用如下命令：
shell
designWidth=750 npm run build:sdk
`修改完运行打包命令得到适配特定落地页的 JimuSDK
$3
现有（默认）的 JimuSDK 打包完依赖外部页面挂载在 window 下的 Vue 变量，
在一些场景下希望 JimuSDK 能无外部依赖地运行，此时需要把 Vue 打包到输出文件中，使用如下命令：
shell
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 文件的版本号为刚发布的版本号
确认
使用方法
$3
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')
}
})
$3
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')
}
})
$3
// 不触发关闭回调
window.JimuSDK && window.JimuSDK.closeLayer()
$3
{"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
注意事项
$3
更新指南：https://www.yuque.com/tuia/otmlwr/il93l9
$3
// 使用暴露的全局埋点方法给积木皮肤使用
window.JimuSDK.commonUse = (widgetAttrs) => {
CommonUse(widgetAttrs, this.h5params, this)
}
$3
目前（2021-06-28）整体打包体积在 88kb
特别注意：
不要使用第三方请求包如 axios，使用
中的 Ajax` 方法