Zepeto文档

崽崽H5中常用Api和deeplink

崽崽`H5`中常用`Api`和`deeplink`

崽崽H5中常用Api和deeplink

可对应文档序号查看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为1rem
function 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`

<a href="ZEPETO://WEBVIEW/CLOSE">关闭图标<a>

5. 打开个人主页/去个人中心，对应`deeplink`

window.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. 保存图片到相册，对应`deeplink`

function 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月份停止支持服务。
请求方式： POST
API：**

https://openapi.zepeto.cn/graphics/booth/<PHOTOBOOTH_NAME>?targets=<HASHCODES>&service=zaizai&width=<WIDTH>&cdn=<OPTION>&cache=<OPTION>

参数列表：**

变量	描述
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/#/
请求方式： POST
API：

url: https://render-api.zepeto.cn/v2/graphics/<serviceName>/booth/<PHOTOBOOTH_NAME>?cdn=true&cache=true&binary=false&permanent=true
boothId: PHOTOBOOTH_ONE_221
params: {
  "type": "booth", // 默认值，必填
  "target": {
    "hashCodes": [
      "VLUFUV"
    ]
  },
  width: 1024 // 设置图片宽度  
}

参数列表：**

变量	描述
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/#/
请求方式： POST
API：

url: https://render-api.zepeto.cn/v2/graphics/<serviceName>/booth
     或者 https://render-api.zepeto.cn/v2/graphics/<serviceName>/booth?cdn=true&cache=true&permanent=true
cdn=true&cache=true&permanent=true 这几个键值对不传时都默认为true，不要设置为false，除非有特殊需求，见韩国技术文档Swagger地址：`https://render-api.zepeto.cn/v2/swagger/#/`
params: {
  "type": "booth", // 默认值，必填
  "ids": [
    "PHOTOBOOTH_TWO_280",
    "PHOTOBOOTH_TWO_85"
  ],
  "target": {
    "hashCodes": [
      "VLUFUV",
      "ZVGDAK"
    ]
  },
  width: 1024 // 设置图片宽度  
}

参数列表：**

变量	描述
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有值的，就是表示用户已经穿戴的item
https://api-v2.zepeto.io/v2/characters?platform=linux&type=hashcode&ids=PJ5CKU&version=9999.0

备注： 测试过，但暂未在项目中使用过

13. 部件（衣服，裤子等）穿戴，对应deeplink

// 应用场景：在H5中给崽崽指定穿戴item，然后崽崽在H5外穿戴上这些item
window.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` // 打开主页Menu
window.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）、查看韩国文档

// 查看boothId
http://10.113.105.62/booths
// 查看韩国文档deeplink
http://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)

e. `jsBridge`——渲染成背景透明的崽崽人物形象图片【暂不使用了】

App 2.9.2+版本开始支持，jsBridge的demo地址：

https://github.com/SunnyEternal/Zepeto_jsBridge

f. 崽崽官网

https://zepeto.cn/

崽崽H5中常用Api和deeplink

可对应文档序号查看demo

待完善功能

1. 多次连续退出再进入H5，页面缩放到很小

2. 获取崽崽信息—window.ZEPETO全局属性

3. 在App中打开H5页面，对应deeplink

4. 在App中关闭H5页面，对应deeplink

5. 打开个人主页/去个人中心，对应deeplink

6. 去换衣服/试衣间，实际是去商店（可分类），对应deeplink

7. 保存图片到相册，对应deeplink

8. 上传Feed，先将base64格式的图片保存到手机系统相册，再使用deeplink拉起上传到Feed的页面。

9. 【该接口已停止使用，参考9.1 RenderAPI v2】获取背景透明的崽崽人物形象图，RenderAPI v1：Create avatar image

9.1 获取背景透明的单个崽崽人物形象单个图，RenderAPI v2：Create single image with booth id

9.2 获取背景透明的崽崽人物形象多个图，RenderAPI v2：Create multiple image with booth id array

10.【该接口已停止使用，参考10.1 关注 v2】关注/取消关注v1，后端调用韩国接口，再给前端提供接口

10.1 关注v2，后端调用韩国接口，再给前端提供接口

11. 查看崽崽已有的所有item（即不只是身上穿的），一般用于抽奖活动

12. 查看用户身上已有的item

13. 部件（衣服，裤子等）穿戴，对应deeplink

14. 去拍照分栏

15. 打开拍摄

16. 打开主页Menu、打开主页和名称、打开个人主页

17. 打开房屋装饰、打开地板装饰

18. 打开崽崽世界

19. 打开通知页

20. 打开礼物盒

21. 返回主页

22. 拜访

23. 商店展示指定物件

24. 查看boothId（也叫模板id）、查看韩国文档

25. 跳转到关注的好友聊天列表deepLink

26. 崽崽v2.21.2版本开始不支持url带”#/“

27. 全屏H5与卡片式H5

28. 显示/拉起/弹出 登录弹窗的 deeplink

29. 跳转到话题发布页面的 deeplink

a. 现有的其他deeplink（韩国文档）

b. Render API 2.0 Swagger地址（韩国文档）

c. contentIds（物件的id）的查询网址（韩国文档）

d. booths（boothId）查询网址（韩国文档）

e. jsBridge——渲染成背景透明的崽崽人物形象图片【暂不使用了】

f. 崽崽官网

崽崽`H5`中常用`Api`和`deeplink`

1. 多次连续退出再进入`H5`，页面缩放到很小

2. 获取崽崽信息—`window.ZEPETO`全局属性

3. 在`App`中打开`H5`页面，对应`deeplink`

4. 在`App`中关闭`H5`页面，对应`deeplink`

5. 打开个人主页/去个人中心，对应`deeplink`

6. 去换衣服/试衣间，实际是去商店（可分类），对应`deeplink`

7. 保存图片到相册，对应`deeplink`

8. 上传`Feed`，先将`base64`格式的图片保存到手机系统相册，再使用`deeplink`拉起上传到`Feed`的页面。

11. 查看崽崽已有的所有`item`（即不只是身上穿的），一般用于抽奖活动

28. 显示/拉起/弹出登录弹窗的 deeplink

e. `jsBridge`——渲染成背景透明的崽崽人物形象图片【暂不使用了】