cocoscreator 3.x 微信小游戏排行榜绘制

Creator 3.x
#1

我们现在用的是creator 3.5.1版本，在做一个微信小游戏 好友列表的功能，我看你们官方文档里

" 开放数据域目前只支持 Canvas 渲染，在 Cocos Creator 3.0 中，我们废弃了之前的 Canvas Renderer 模块，使用微信团队基于 XML + CSS 设计研发的一个前端轻量级 Canvas 引擎来替代。并且将该引擎整合进了 Creator 3.0 内置的开放数据域工程模板中，开发者只需要掌握一些基本的前端技能，就能在该模板的基础上定制排行榜功能"

在creator 3.x版本， 如果绘制微信小游戏 排行榜或者 好友列表页面，只能用XML+CSS方式绘制吗？ 可以用ts方式绘制吗？

#2

如果只用 XML+CSS绘制，好友列表有上百条数据，因为是静态绘制，一次性绘制所有数据，绘制起来需要的时间特别久，打开页面后到绘制完成需要的时间会特别久，玩家体验会不太好，不知道有没有其他方法

#3

目前没办法，抱歉

#4

那我如果通过拿到的子域数据写成列表，通过点击列表实现邀请好友的功能是怎么实现呢？ 通过官方文档没有看到按钮的样式 ，及如何通过点击按钮吊起该微信好友定向发送信息，从而实现定向邀请好友的功能？ 非常期待您的回复

#5

如果使用 XML+CSS 方式绘制，确实会出现一次性绘制所有数据的情况，导致加载时间变长，影响玩家体验。不过，你可以尝试使用一些优化方案来改善这种情况：

  1. 分页加载：可以将好友列表分成若干页，每次只绘制一页的数据。这样可以缩短绘制时间，并且在滚动列表时只需要加载当前页的数据，可以减小数据加载的压力。
  2. 动态绘制：可以使用 JavaScript 动态创建 DOM 元素，并根据数据渲染出需要的元素。这样可以避免一次性绘制所有数据的问题，并且可以根据数据量的大小来动态调整绘制的元素数量，保证加载时间和绘制时间的合理性。
  3. 虚拟列表：可以使用虚拟列表技术，只渲染当前可见区域的列表项，对于不可见的列表项只维护数据，而不进行渲染。这样可以减小渲染量，提高列表渲染性能。
#6

可以通过在开放数据域中绘制一个按钮来实现邀请好友的功能。具体实现可以参考微信开放数据域的官方文档中的示例代码。

在绘制按钮时，您可以使用 createImageBitmap 方法加载一张按钮图片，并在 touchstart 和 touchend 事件中处理按钮的点击事件。在按钮点击事件中，您可以使用 wx.shareMessageToFriend 方法来发送邀请消息给好友。

const buttonTexture = await new Promise((resolve) => {
  const image = new Image()
  image.onload = () => {
    const texture = new ImageBitmap(image)
    resolve(texture)
  }
  image.src = 'invitation-button.png'
})

const buttonNode = new cc.Node()
const buttonSprite = buttonNode.addComponent(cc.Sprite)
buttonSprite.spriteFrame = new cc.SpriteFrame(buttonTexture)

buttonNode.on(cc.Node.EventType.TOUCH_START, () => {
  wx.shareMessageToFriend({
    title: '邀请好友',
    imageUrl: 'invitation-image.png',
    query: 'from=invitation'
  })
})

this.friendList.addChild(buttonNode)
1赞
#7

wx.shareMessageToFriend({
title: ‘邀请好友’,
imageUrl: ‘invitation-image.png’,
query: ‘from=invitation’
})

imageUrl 目前可以使用自定义图片展示吗, 或者截屏屏幕特定区域来展示
因为在子域会限制请求接口, 但是保存的图片返回格式都是 http 开头的网络图片, 会导致子域分享的图片显示异常

wx.getFileSystemManager().saveFile, 返回 res.savedFilePath
wx.downloadFile 返回 res.tempFilePath
均是网络图片

#8

3.x可以使用2.x构建构建出来的开放数据域工程做排行榜

#9

怎么弄的啊？

#10

需要改一下3.x的SubContextView，这个脚本3.6和2.4是可以用的。如果是其他版本有问题的话， 修改下postMessage发送的参数，主域和子域一样就好了 SubContextViewEx.ts.zip (1.2 KB)

1赞
今天写好友排行榜真的想吐槽
#11

_updateSubContextTexture是什么用途

#12

确实可以，这个好

#13

请问一下遇见过不设置imageUrl分享出来的图是黑色的，就是ui未被渲染出来的情况吗