Zepeto文档
崽崽H5中常用Api和deeplink可对应文档序号查看demo待完善功能1. 多次连续退出再进入H5，页面缩放到很小2. 获取崽崽信息—window.ZEPETO全局属性3. 在App中打开H5页面，对应deeplink4. 在App中关闭H5页面，对应deeplink5. 打开个人主页/去个人中心，对应deeplink6. 去换衣服/试衣间，实际是去商店（可分类），对应deeplink7. 保存图片到相册，对应deeplink8. 上传Feed，先将base64格式的图片保存到手机系统相册，再使用deeplink拉起上传到Feed的页面。9. 【该接口已停止使用，参考9.1 RenderAPI v2】获取背景透明的崽崽人物形象图，RenderAPI v1：Create avatar image9.1 获取背景透明的单个崽崽人物形象单个图，RenderAPI v2：Create single image with booth id9.2 获取背景透明的崽崽人物形象多个图，RenderAPI v2：Create multiple image with booth id array10.【该接口已停止使用，参考10.1 关注 v2】关注/取消关注v1，后端调用韩国接口，再给前端提供接口10.1 关注v2，后端调用韩国接口，再给前端提供接口11. 查看崽崽已有的所有item（即不只是身上穿的），一般用于抽奖活动12. 查看用户身上已有的item13. 部件（衣服，裤子等）穿戴，对应deeplink14. 去拍照分栏15. 打开拍摄16. 打开主页Menu、打开主页和名称、打开个人主页17. 打开房屋装饰、打开地板装饰18. 打开崽崽世界19. 打开通知页20. 打开礼物盒21. 返回主页22. 拜访23. 商店展示指定物件24. 查看boothId（也叫模板id）、查看韩国文档25. 跳转到关注的好友聊天列表deepLink26. 崽崽v2.21.2版本开始不支持url带”#/“27. 全屏H5与卡片式H528. 显示/拉起/弹出 登录弹窗的 deeplink29. 跳转到话题发布页面的 deeplinka. 现有的其他deeplink（韩国文档）b. Render API 2.0 Swagger地址（韩国文档）c. contentIds（物件的id）的查询网址（韩国文档）d. booths（boothId）查询网址（韩国文档）e. jsBridge——渲染成背景透明的崽崽人物形象图片【暂不使用了】f. 崽崽官网
崽崽H5中常用Api和deeplink崽崽H5中常用Api和deeplink可对应文档序号查看demo待完善功能1. 多次连续退出再进入H5，页面缩放到很小2. 获取崽崽信息—window.ZEPETO全局属性3. 在App中打开H5页面，对应deeplink4. 在App中关闭H5页面，对应deeplink5. 打开个人主页/去个人中心，对应deeplink6. 去换衣服/试衣间，实际是去商店（可分类），对应deeplink7. 保存图片到相册，对应deeplink8. 上传Feed，先将base64格式的图片保存到手机系统相册，再使用deeplink拉起上传到Feed的页面。9. 【该接口已停止使用，参考9.1 RenderAPI v2】获取背景透明的崽崽人物形象图，RenderAPI v1：Create avatar image9.1 获取背景透明的单个崽崽人物形象单个图，RenderAPI v2：Create single image with booth id9.2 获取背景透明的崽崽人物形象多个图，RenderAPI v2：Create multiple image with booth id array10.【该接口已停止使用，参考10.1 关注 v2】关注/取消关注v1，后端调用韩国接口，再给前端提供接口10.1 关注v2，后端调用韩国接口，再给前端提供接口11. 查看崽崽已有的所有item（即不只是身上穿的），一般用于抽奖活动12. 查看用户身上已有的item13. 部件（衣服，裤子等）穿戴，对应deeplink14. 去拍照分栏15. 打开拍摄16. 打开主页Menu、打开主页和名称、打开个人主页17. 打开房屋装饰、打开地板装饰18. 打开崽崽世界19. 打开通知页20. 打开礼物盒21. 返回主页22. 拜访23. 商店展示指定物件24. 查看boothId（也叫模板id）、查看韩国文档25. 跳转到关注的好友聊天列表deepLink26. 崽崽v2.21.2版本开始不支持url带”#/“27. 全屏H5与卡片式H528. 显示/拉起/弹出 登录弹窗的 deeplink29. 跳转到话题发布页面的 deeplinka. 现有的其他deeplink（韩国文档）b. Render API 2.0 Swagger地址（韩国文档）c. contentIds（物件的id）的查询网址（韩国文档）d. booths（boothId）查询网址（韩国文档）e. jsBridge——渲染成背景透明的崽崽人物形象图片【暂不使用了】f. 崽崽官网
可对应文档序号查看demo// demo地址：ZEPETO://HOME/WEBVIEW?url=http://h5-act-beta.kajicam.com/zepeto/jsBridgeZZ/index.html// demo代码地址：https://gitlab.com/Amywill/zz_deeplink_api.git
待完善功能1. 现只有分享到 Line和 Twitter的功能。暂无分享到 WeChart、QQ空间的功能。2. 暂无从站外呼起Zepeto的 deeplink。3. 暂不支持在 H5里直接给崽崽换装，因为是 3D的，在 H5里给崽崽换装比较麻烦，可以使用deeplink试穿。
1. 多次连续退出再进入H5，页面缩放到很小问题描述：Zepeto全屏webview改成卡片形式后，多次连续退出再进入H5，会出现页面根字体字号小于10px，导致页面缩放到很小。原因：webview宽度还没有和设备宽度一致，js就已经开始获取可视窗口宽度计算根字体字号大小了。解决办法：开启setInterval获取可视窗口宽度，并计算根字体字号大小，当大于10px赋值给根字体，结束获取。备注：不同分辨率的手机，当页面缩放很小时，计算出的根字体字号都小于10px。方法：
// 使用插件-postcss-px2rem, 75px为1remfunction setRootFont() { let timer = setInterval(() => { let rootFontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10; document.getElementsByTagName("html")[0].style.fontSize = rootFontSize + "px"; console.log('rootFontSize:', rootFontSize); if (rootFontSize > 32) { clearInterval(timer); } }, 60); setTimeout(() => { clearInterval(timer); }, 3000);}
2. 获取崽崽信息—window.ZEPETO全局属性function getUserInfo() { let timer1 = setInterval(() => { if (window.ZEPETO) { console.log(window.ZEPETO) let headImgUrl = window.ZEPETO.userInfo.profilePic.substring(0, window.ZEPETO.userInfo.profilePic.lastIndexOf('?')) this.userInfo = { zepetoId: window.ZEPETO.userInfo.hashCode, headImg: headImgUrl, nickname: window.ZEPETO.userInfo.name, userId: window.ZEPETO.userInfo.userId, authToken: window.ZEPETO.userInfo.authToken, userAgent: window.ZEPETO.userAgent || '-', // 老版本没有该信息 duid: window.ZEPETO.duid || '-', // 老版本没有该信息 UA: 'zepeto.service.zzz.crew/1.0.0' } localStorage.setItem("token", this.userInfo.authToken) localStorage.setItem('$zepetoUserInfo', JSON.stringify(this.userInfo)) clearInterval(timer1) } }, 20) let timer2 = setTimeout(() => { clearInterval(timer1) clearTimeout(timer2) }, 3000)}
3. 在App中打开H5页面，对应deeplink// 在App隐藏功能中填入下面地址ZEPETO://HOME/WEBVIEW?url=[h5链接]
4. 在App中关闭H5页面，对应deeplink关闭图标
5. 打开个人主页/去个人中心，对应deeplinkwindow.location.href = `ZEPETO://HOME/PROFILE/CARD?${hashCode}`;
6. 去换衣服/试衣间，实际是去商店（可分类），对应deeplink// 去商店const currentUrl = window.location.href;let urlSplitArr = []let currUrl;if (currentUrl.indexOf('#') !== -1) { urlSplitArr = currentUrl.split('#') currUrl = urlSplitArr[0]} else { currUrl = currentUrl}const referrerUri = encodeURIComponent( encodeURIComponent(`zepeto://home/webview?url=${currUrl}`));window.location.href = `ZEPETO://HOME/SHOP/COSTUME?referrer=${referrerUri}`; // 去商店就是去试衣间// 去商店（姿势分类）window.location.href = `ZEPETO://HOME/SHOP/ANIMATION`// 去商店（发型分类）window.location.href = `ZEPETO://HOME/SHOP/HAIR`// 去商店（裤子分类）window.location.href = `ZEPETO://HOME/SHOP/BOTTOM`// 去商店（袜子分类）window.location.href = `ZEPETO://HOME/SHOP/SOCKS`// 去商店（家具分类）window.location.href = `ZEPETO://HOME/SHOP/ROOM`
7. 保存图片到相册，对应deeplinkfunction saveImage(callback) { let base64 = document.getElementById(`photo`).src; // 获取图片base64字符串 let newBase64 = base64.substring(base64.indexOf(',')+1); // 去掉开头"data:image/png;base64," if (window.ZEPETO) { window.ZEPETO.invoke('SaveImage', newBase64, callback); // callback可以是保存成功的提示 }}
8. 上传Feed，先将base64格式的图片保存到手机系统相册，再使用deeplink拉起上传到Feed的页面。// 保存参见“7. 保存图片到相册”window.location.href = 'ZEPETO://HOME/FEED/UPLOAD/CAMERAROLL'
备注：韩国已经开发上传到Feed的接口，测试阶段。
9. 【该接口已停止使用，参考9.1 RenderAPI v2】获取背景透明的崽崽人物形象图，RenderAPI v1：Create avatar image说明： 韩国那边2020年4月份停止支持服务。请求方式： POSTAPI：**
https://openapi.zepeto.cn/graphics/booth/
参数列表：**
变量
描述
PHOTOBOOTH_NAME
boothId序列，多个时逗号分隔
HASHCODES
hashCode序列，多个时逗号分隔
WIDTH
渲染图的宽度
OPTION
true 或 false
例子：**
import request from '@/utils/request'return request({ url:`https://openapi.zepeto.cn/graphics/booth/${data.renderData}?targets=${data.hashCode}&service=zaizai&width=420&cdn=off&cache=off`, method: 'post'})
9.1 获取背景透明的单个崽崽人物形象单个图，RenderAPI v2：Create single image with booth id说明： 更新于2020.11.02，生成的图片默认宽度512。韩国技术文档Swagger地址：https://render-api.zepeto.cn/v2/swagger/#/请求方式： POSTAPI：
url: https://render-api.zepeto.cn/v2/graphics/
参数列表：**
变量
描述
serviceName
zaizai中国版，zepeto国际版
PHOTOBOOTH_NAME
boothId(模板Id)
hashCodes
数组类型，只需传单个hashcode，传多个只有第一个生效！！！
binary
false，响应为图片url；true，响应为二进制图像数据
permanent
默认true，可多次下载；false时只允许下载一次
例子：**
import request from '@/utils/request'let boothId = "PHOTOBOOTH_ONE_221"let params = { "type": "booth", "target": { "hashCodes": [ "VLUFUV" ] }, width: 1024 // 设置图片宽度 }return request({ url:`https://render-api.zepeto.cn/v2/graphics/zaizai/booth/${boothId}?cdn=true&cache=true&binary=false&permanent=true`, method: 'post', headers:{ "Content-Type": "application/json", }, data: params, method: 'POST', timeout: 50000})
备注** 产品一般叫“渲染崽崽avatar的接口”
9.2 获取背景透明的崽崽人物形象多个图，RenderAPI v2：Create multiple image with booth id array说明： 更新于2020.11.02，生成的图片默认宽度512。该接口生成12个图所耗用的性能和生成1个图的一样，第12个图以外就对性能影响较大。韩国技术文档Swagger地址：https://render-api.zepeto.cn/v2/swagger/#/请求方式： POSTAPI：
url: https://render-api.zepeto.cn/v2/graphics/
参数列表：**
变量
描述
serviceName
zaizai中国版，zepeto国际版
ids
数组类型，里面传boothId(模板Id)，传几个boothId响应为几个图片url
hashCodes
数组类型，里面传hashcode，传几个hashcode响应为图上有几个崽崽
permanent
默认true，可多次下载；false时只允许下载一次
例子：**
import request from '@/utils/request'let params = { "type": "booth", "ids": [ "PHOTOBOOTH_TWO_280", "PHOTOBOOTH_TWO_85" ], "target": { "hashCodes": [ "NZIOG0", "MYKURU" ] }, width: 1024 // 设置图片宽度 }return request({ url:`https://render-api.zepeto.cn/v2/graphics/zaizai/booth?cdn=true&cache=true&permanent=true`, method: 'post', headers:{ "Content-Type": "application/json", }, data: params, method: 'POST', timeout: 50000})
备注** 产品一般叫“渲染崽崽avatar的接口”
10.【该接口已停止使用，参考10.1 关注 v2】关注/取消关注v1，后端调用韩国接口，再给前端提供接口说明： 如果互相聊天了，就默认互相关注了。请求方式都是：POST参数都一样，在全局属性-window.ZEPETO中取：
变量
描述
clientUa
app低版本没有这个参数时，传”-“
duid
设备duid
followerUserId
用户userId
关注：**
setFollow(params) { return post(`/follow?clientUa=${params.UA}&duid=${params.duid}&followUserId=${params.userId}`)}
取消关注：**
cancelFollow(params) { return post(`/unfollow?clientUa=${params.UA}&duid=${params.duid}&followerUserId=${params.userId}`)}
备注：** H5中不使用取消关注，防止用户恶意操作频繁点击关注与取消关注，造成被关注用户收到大量推送和公司付推送费。
10.1 关注v2，后端调用韩国接口，再给前端提供接口请求方式都是：POST参数在全局属性-window.ZEPETO中取：
变量
描述
ua
用户ua
token
登录用户authToken
duid
设备id
followUserId
要关注的用户userId
关注：**
setFollow(params) { return request({ url: `https://api-zepeto-beta.kajicam.com/zepeto/activity/creative/api/ranking/follow/add_follow?token=${encodeURIComponent(params.token)}&followUserId=${params.userId}&duid=${params.duid}&ua=${params.ua}`, headers:{ "Content-Type": "application/json", }, method: 'POST', timeout: 50000 })}
11. 查看崽崽已有的所有item（即不只是身上穿的），一般用于抽奖活动
抽奖，要先查询抽到的奖品是不是用户已有的（不是身上穿，是已有的所有item）
12. 查看用户身上已有的item// value有值的，就是表示用户已经穿戴的itemhttps://api-v2.zepeto.io/v2/characters?platform=linux&type=hashcode&ids=PJ5CKU&version=9999.0
备注： 测试过，但暂未在项目中使用过
13. 部件（衣服，裤子等）穿戴，对应deeplink// 应用场景：在H5中给崽崽指定穿戴item，然后崽崽在H5外穿戴上这些itemwindow.location.href = ZEPETO://HOME/SHOP/OOTD/CONTENTS/PREVIEW?hashCode=4IQ8VZ&contentIds=PRESET_MOUTH_25,PRESET_MOUTH_27,PRESET_MOUTH_26,NECKLACE_2,EARRING_33,HEADWEAR_18
备注：** 测试过，但暂未在项目中使用过
14. 去拍照分栏window.location.href = `ZEPETO://HOME/MENU/BOOTH`
15. 打开拍摄window.location.href = `ZEPETO://HOME/CAPTURE`window.location.href = `ZEPETO://HOME/CAPTURE/PHOTO`window.location.href = `ZEPETO://HOME/CAPTURE/VIDEO`
16. 打开主页Menu、打开主页和名称、打开个人主页window.location.href = `ZEPETO://HOME/MENU` // 打开主页Menuwindow.location.href = `ZEPETO://HOME/NAME` // 打开主页和名称window.location.href = `ZEPETO://HOME/PROFILE/CARD?${hashCode}` // 打开个人主页
17. 打开房屋装饰、打开地板装饰window.location.href = `ZEPETO://HOME/ROOM/EDIT` // 打开房屋装饰window.location.href = `ZEPETO://HOME/ROOM/EDIT/FLOOR` // 打开地板装饰
18. 打开崽崽世界window.location.href = `ZEPETO://WORLDLOAD`
19. 打开通知页window.location.href = `ZEPETO://HOME/NOTIFICATIONS`
20. 打开礼物盒window.location.href = `ZEPETO://HOME/NOTIFICATIONS/GIFTBOX`
21. 返回主页window.location.href = `ZEPETO://HOME`
22. 拜访const userId = window.ZEPETO.userInfo.userId // `5d44159f62b1107f8a2c2f14`window.location.href = `ZEPETO://HOME/FRIEND/VISIT?${userId}`
23. 商店展示指定物件window.location.href = `ZEPETO://HOME/SHOP/CONTENTS?TOP_100,TOP_200,BTM_40`
备注： contentIds（物件的id）的查询网址： https://zepeto.me/contents?platform=linux&ver=2.15
24. 查看boothId（也叫模板id）、查看韩国文档// 查看boothIdhttp://10.113.105.62/booths// 查看韩国文档deeplinkhttp://10.113.105.62/deeplink// 查看物件id，即contentIds（物件的id）http://zepeto.me/contents?platform=linux&ver=2.15// 韩国Render Api v2文档https://render-api.zepeto.cn/v2/swagger/#/
25. 跳转到关注的好友聊天列表deepLink// 跳转到关注好友的聊天列表window.location.href = "ZEPETO://HOME/CHAT"// 跳转和某个用户的聊天界面window.location.href = `zepeto-cn://home/chat/dm/${window.ZEPETO.userInfo.userId}`window.location.href = `zepeto-cn://home/chatroom/dm/${window.ZEPETO.userInfo.userId}`;
26. 崽崽v2.21.2版本开始不支持url带”#/“项目配置链接原来支持以下两种：http://h5-act-beta.kajicam.com/zepeto/2020/geek/index.html#/http://h5-act-beta.kajicam.com/zepeto/2020/geek/index.html现在只支持：http://h5-act-beta.kajicam.com/zepeto/2020/geek/index.html
注意：**
如果项目中使用了去试衣间这样的deeplink，要注意获取的url会有"#/"const currentUrl = window.location.href;let urlSplitArr = []let currUrl;if (currentUrl.indexOf('#') !== -1) { urlSplitArr = currentUrl.split('#') currUrl = urlSplitArr[0]} else { currUrl = currentUrl}const referrerUri = encodeURIComponent( encodeURIComponent(`zepeto://home/webview?url=${currUrl}`));window.location.href = `ZEPETO://HOME/SHOP/COSTUME?referrer=${referrerUri}`; // 去商店就是去试衣间
27. 全屏H5与卡片式H5全屏H5配置方式：ZEPETO://HOME/WEBVIEW?url=https://h5-act.kajicam.com/zepeto/2020/geek/index.html卡片式H5配置方式：https://h5-act.kajicam.com/zepeto/2020/geek/index.html
28. 显示/拉起/弹出 登录弹窗的 deeplink// 不关闭webview，webview(也就是H5活动)会遮住native的登录弹窗。// 关闭webview的deeplink和打开登录弹窗的deeplink同时执行，关闭webview失败，看不到native的登录弹窗，所以加延迟。/* 举个应用场景的栗子： 投票H5活动，用户点击投票按钮，程序判断用户没有登录，使用deeplink打开了native 的登录弹窗，但H5活动所在的webview没有关闭，登录弹窗被遮住了，用户看不到页面变化， 当关闭H5，延迟几十毫秒打开登录弹窗，用户便可操作登录/注册。 PS: 用户是否登录根据window.ZEPETO.userInfo.isRegistered判断*/ handleLogin() { this.$emit('notifyLogin', false) window.location.href = 'ZEPETO://WEBVIEW/CLOSE'; let timer = setTimeout(() => { window.location.href = 'ZEPETO-CN://HOME/LOGIN' clearTimeout(timer); }, 50)}
29. 跳转到话题发布页面的 deeplink// 不关闭webview，点击【#使用该标签】按钮，webview(也就是H5活动)会遮住“发布页面”。/* 关闭webiview的deeplink和跳转到“话题作品页面”的deeplink同时执行，关闭webview失败， 点击【#使用该标签】按钮，“发布页面”被webview(也就是H5活动)遮住。*/ // 关闭webview加延迟，是为了保证大数据埋点请求发出去，没有数据埋点可以直接关闭webview。let timer1 = setTimeout(() => { window.location.href = 'ZEPETO://WEBVIEW/CLOSE'; clearTimeout(timer1);}, 35)let timer2 = setTimeout(() => { window.location.href = `ZEPETO-CN://home/feed/hashtag/home?tag=${this.topic}`; clearTimeout(timer2);}, 60)
a. 现有的其他deeplink（韩国文档）http://10.113.105.62/deeplink
b. Render API 2.0 Swagger地址（韩国文档）https://render-api.zepeto.cn/v2/swagger/#/
c. contentIds（物件的id）的查询网址（韩国文档）https://zepeto.me/contents?platform=linux&ver=2.15
d. booths（boothId）查询网址（韩国文档）http://10.113.105.62/booths/
e. jsBridge——渲染成背景透明的崽崽人物形象图片【暂不使用了】App 2.9.2+版本开始支持，jsBridge的demo地址：
https://github.com/SunnyEternal/Zepeto_jsBridge
f. 崽崽官网https://zepeto.cn/