#

uniapp-qq 开放数据使用

用途

1. 展示用户个人信息如头像等，类似 getUserInfo()。

2. 展示针对用户好友对于某一产品或某一产品下的不同选项的选择。

#

示例：

#

uniapp 中具体使用方式

• 创建一个组件并在要展示用户数据的页面引入，此处为 FriendList.vue。

  #

  示例

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
  <view class="friend-content" v-for="item of userList">
    <image class="image" :src="item.avatarUrl" mode="widthFix"></image>
  </view>
  <view>{{ componentData.value }}</view>
  <view>{{ item.kvDataList[0].value }}</view>
</template>

<script>
export default {
  props: ['userList', 'componentData'],
};
</script>

• 调用 qq.setUserCloudStorage()方法托管用户关系数据。

具体属性:

#

示例：

1
2
3
4
5
6
7
8
9
10
11

qq.setUserCloudStorage({
  KVDataList: [
    { key: self.lastChoiceId, value: Date.parse(new Date()).toString() },
  ],
  success: (res) => {
    console.log('set UserCloudStorage success！');
  },
  fail: (res) => {
    console.warn('set UserCloudStorage failed！', res);
  },
});

#

托管数据的限制

1. 每个 openid 所标识的 QQ 用户在每个游戏上托管的数据不能超过 128 个 key-value 对。
2. 上报的 key-value 列表当中每一项的 key+value 长度都不能超过 1K(1024)字节。
3. 上报的 key-value 列表当中每一个 key 长度都不能超过 128 字节。

• 在想展示好友关系链的地方使用 open-data 标签

  #

  示例

1
2
3
4
5
6

<open-data
  type="friendCloudStorage"
  generic:simple-component="friendlist"
  :keyList="[item.id]"
  :component-data="data"
></open-data>

1
2
3

data: {
  value: 1;
}

open-data 标签用于展示 QQ 开放数据。

具体属性：

type 有效值：

#

关系链数据展示说明

当 type=*CloudStorage, 可通过 generic:simple-component属性指定自定义开放数据域组件

指定的自定义开放数据域组件中会在props中自动注入以下属性

KVData数据结构说明

UserData数据结构说明

用户的 应用数据 指的是用户的分数、段位等小程序业务特有的数据，通过调用 qq.setUserCloudStorage() 可以将当前用户的应用数据托管在 QQ 后台。只有被托管过数据的用户，才会被视为 玩过 该小程序的用户，才会出现在 type=friendCloudStorage 和 type=groupCloudStorage 的<open-data>组件中

#

一些限制及处理方法

1. 自定义组件中无法对userList进行操作，无法将userList赋值给在data中的变量，无法使用watch监控userList使其存在后赋值给data里的变量，无法使用 data 中定义的变量。

   • 需要显示固定数量的用户数据：

     1 2	<view v-for="item of userList.slice(0,3)"> // 无法显示 <view v-for="(item, index) of userList" v-if="index < 4"> // 正常显示

2. 自定义组件中无法使用methods中的方法（不识别 methods），无法使用外部导入的 js 中的方法（打包后找不到 js 文件）

   • 需要对用户数据进行排序：

     在打包后的代码中使用官方文档中的原生排序方法 （参考文档 3）

3. 关于 componentData ，需要传递对象类型。

   ​ 示例：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   dataList: [ { id: '1', data: { value: 1, }, }, { id: '2', data: { value: 2, }, }, ];

   1 2 3 4 5 6 7 8 9

   <view v-for="item of dataList"> <open-data type="friendCloudStorage" generic:simple-component="list" :keyList="[item.id]" :component-data="item.data" > </open-data> </view>

   结果：

   

4. 关于记录存放上限：

   由于无法在自定义组件中对userList进行操作，从而无法根据产品去筛选其中的选项，因此采用一种妥协的处理方法——将单个选项的 id 作为 key，时间戳作为 value。缺点是最多只能存 128 条记录。因此当存储记录达到上限后会无法继续存用户数据。

   • 解决方法：在storage中添加数组 keyList同步云端数据的 key 进行更新，在setUserCloudStorage方法的回调里对keyList进行处理，弹出栈底的 key，这里的 key 同步云端最早添加的一条记录，调用qq.removeUserCloudStorage()方法删除云端数据。
   • 关于排序的补充，需要在setUserCloudStorage方法的回调里对keyList进行处理，移动已存在的数据至栈顶。从而保证云端数据表时间戳更新后和本地keyList顺序保持同步。

5. 其他限制：

   • 组件所有的生命周期函数都不会被触发

   • 无法绑定任何事件回调（所有事件绑定都会被过滤掉）

   • 无法通过createSelectorQuery、createIntersectionObserver 接口获取自定义开放数据域组件的任何节点

   • 仅支持使用<view>、<text>、<image>、<button> 组件,其他组件会被自动过滤掉

   • 开放数据域组件内引用的任何组件，其style属性都会被置空

   • 拥有独立的作用域，qml 文件引用的 qs 模块会重新生成新的实例

6. 调试工具中无法展示open-data中的数据，开发时需使用预览或真机调试。

   

   预览模式在手机的调试窗口的 QML 中无法查看当前元素中的key-list值和 component-data 值，需使用真机调试在 PC 的窗口中查看。

#

处理逻辑代码参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

qq.setUserCloudStorage({
  KVDataList: [
    { key: self.lastChoiceId, value: Date.parse(new Date()).toString() },
  ],
  success: (res) => {
    console.log('set UserCloudStorage success！');
    if (uni.getStorageSync('choiceIdList')) {
      self.choiceIdList = JSON.parse(uni.getStorageSync('choiceIdList'));
      // 去重
      var index = self.choiceIdList.indexOf(self.lastChoiceId);
      if (index == -1) {
        self.choiceIdList.push(self.lastChoiceId.toString());
      } else {
        self.choiceIdList.splice(index, 1);
        self.choiceIdList.push(self.lastChoiceId.toString());
      }
      // self.choiceIdList = Array.from(new Set(self.choiceIdList));

      uni.setStorageSync('choiceIdList', JSON.stringify(self.choiceIdList));
    } else {
      var temp = new Array();
      temp.push(self.lastChoiceId.toString());
      self.choiceIdList = temp;
      uni.setStorageSync('choiceIdList', JSON.stringify(temp));
    }
    if (self.choiceIdList.length > 100) {
      var key = new Array();
      key.push(self.choiceIdList.shift());
      qq.removeUserCloudStorage(key);
    }
  },
  fail: (res) => {
    console.log(res);
  },
});

参考文档：

1. 开放能力-open-data

2. 关系链数据

3. 自定义开放数据域组件说明

4. 微信小游戏 —— 关系链数据使用(排行榜的显示)