跳转到主要内容
PRODUCT DOCUMENTS

快速找到所需文档,高效完成接入与排障

浏览产品文档与友盟 Skill,展开目录并阅读正文。

SDK方法(QQ)

前置检查

  1. 本文介绍QQ的分享和登录功能,可参见QQ鸿蒙接入指南、QQ接口说明、QQ鸿蒙常见问题文档。

  2. 确保已在QQ互联平台创建应用,且审核通过。

  3. @umeng/share从1.1.8版本支持QQ,确保已按照快速开始文档的各步骤安装集成成功。

  4. module.json5 配置文件如下修改,可参见QQ环境搭建说明。

// module.json5 的"module"节点下配置 querySchemes
"querySchemes": [
    "https",
    "qqopenapi"
]

// 在 Ability 的 skills 节点中配置scheme
"skills": [
 {
    "entities": [
      "entity.system.browsable"
    ],
    "actions": [
      "ohos.want.action.viewData"
    ],
    "uris": [
      {
        "scheme": "qqopenapi", // 接收 QQ 回调数据
        "host": "1112396455", // 业务申请的互联 appId,如果填错会导致 QQ 无法回调
        "pathRegex": "\\b(auth|share)\\b",
      }
    ]
  }
]
  1. 可选,QQ互联平台的applinking校验,可参见下图示例,在鸿蒙开发者平台去配置后,再填写到互联开放平台校验,若QQ互联平台未校验applinking会导致无法调用登录功能。image

功能说明

一、判断QQ是否安装

import { QQ } from "@umeng/share";

// 判断QQ是否安装方法
// 注意:须先在应用的module.json5文件中先配置 querySchemes: ["https", "qqopenapi"]
QQ.isInstalled((data: Record<string, string>) => {
  console.warn(`qq是否安装: ${JSON.stringify(data)}`);
});

二、分享面板

分享面板组件可在UI页面中按需使用,控制是否展示。

ShareBoard分享面板组件。

visible可选,若配置则分享或取消会自动关闭面板,若配置则根据开发者限制面板的显示状态,不会自动关闭。

confirm必选,点击面板的确认分享回调。"qq"表示分享QQ好友,"qzone"表示分享QQ空间。

cancel必选,分享面板点击取消的回调。

import { ShareBoard, QQ, qqConfig } from "@umeng/share";

ShareBoard({
  visible: this.visible, // 可选,若不传则分享或取消会自动关闭面板,若传则根据开发者限制面板的显示状态,不会自动关闭。
  confirm: (pl: string) => {
    if (pl === 'qq') { // 分享到QQ好友
      // 如下以分享网页链接为例
      const params: qqConfig.WebPageObject = {
        "msg_style": 0, // 固定值
        "title": "鸿蒙ArkTS分享", // 必传
        "summary": "qq互联sdk分享到好友",
        "brief": "互联分享",
        "url": "https://devs.umeng.com/", // 必传
        // 图片若不传,则使用的是应用的图标
        "picture_url": "https://img.alicdn.com/imgextra/i1/O1CN016IZkgf1bbj0hS3IsD_!!6000000003484-2-tps-1080-1080.png"
      };
      QQ.shareWebPage(params, (obj: Record<string, string>) => {
        console.warn(`分享网页的返回: ${JSON.stringify(obj)}`);
      });
    };
    if (pl === 'qzone') { // 分享到QQ空间
      // 。。。。
    }
  },
  cancel: () => {
    this.visible = false;
    console.log('取消分享了');
  },
});
    

三、分享网页链接(好友)

分享网页链接到QQ好友,即QQ文档中的图文消息。

title大小限制10KB内。

import { QQ, qqConfig } from "@umeng/share";

const params: qqConfig.WebPageObject = {
  "msg_style": 0, // 必传,传固定值0即可
  "title": "鸿蒙ArkTS分享", // 必传,网页链接的标题
  "summary": "qq互联sdk分享到好友", // 可选,网页链接的摘要
  "brief": "互联分享", // 可选
  "url": "https://devs.umeng.com/", // 必传,网页链接地址
  // 可选,网页链接图标
  // 图片若不传,则使用的是应用的图标
  "picture_url": "https://img.alicdn.com/imgextra/i1/O1CN016IZkgf1bbj0hS3IsD_!!6000000003484-2-tps-1080-1080.png"
};
QQ.shareWebPage(params, (obj: Record<string, string>) => {
  console.warn(`分享网页的返回: ${JSON.stringify(obj)}`);
});

四、分享图片(好友)

分享图片到QQ好友,即QQ文档中的大图消息。
注意:分享图片限制条件:

  • 图片仅支持uri格式,如果传多张图片,只取列表中的第1张;

  • 图片格式:目前只支持png、jpeg、gif、bmp、webp格式的图片;

  • 图片文件大小:只支持小于等于32M的图片;

  • 图片分辨率:图片宽、高分别限制30000像素,总像素限制250000000。

import { QQ, qqConfig } from "@umeng/share";

const uris: string[] = []; // ["file://com.umeng.hm.share/data/storage/el2/base/haps/entry/files/original-1766137214639.jpg"]
// 或者以从相册选取照片为例,参见文档下方getPictureUriFromAlbum方法调试。
// const uris: string[] = await this.getPictureUriFromAlbum('image'); 
       
const params: qqConfig.ImageObject = {
  "msg_style": 6, // 必填,传固定值6即可
  "share_uris": uris, // 必填,uri格式图片地址,数组类型。如果传多张图片,只取列表中的第1张。
};

QQ.shareImage(params, (obj: Record<string, string>) => {
  console.warn(`分享图片的返回: ${JSON.stringify(obj)}`);
});

五、分享网页链接(空间)

分享网页链接到QQ空间,即QQ文档中的图文消息。

title大小限制10KB内。

import { QQ, qqConfig } from "@umeng/share";

const params: qqConfig.ZoneWebPageObject = {
  "title": "鸿蒙ArkTS分享", // 必传,网页链接的标题
  "summary": "qq互联sdk分享到空间", // 可选,网页链接的摘要
  "targetUrl": "https://devs.umeng.com/", // 必传,网页链接地址
  // 可选,网页链接图标列表
  // 首张图即是封面链接(仅支持网络图片链接)
  "imageUrls": [
    "https://img.alicdn.com/imgextra/i1/O1CN016IZkgf1bbj0hS3IsD_!!6000000003484-2-tps-1080-1080.png",
    "https://img.alicdn.com/imgextra/i2/O1CN01OQQ7ec1MNmf3xFWAX_!!6000000001423-2-tps-96-96.png",
  ],
};

QQ.shareZoneWebPage(params, (obj: Record<string, string>) => {
  console.warn(`分享空间的返回: ${JSON.stringify(obj)}`);
});

六、QQ登录

QQ登录要确保在QQ互联平台的applinking校验通过,在鸿蒙开发者平台去配置后,再填写到互联开放平台校验。

import { QQ, qqConfig } from "@umeng/share";

let obj: qqConfig.LoginReqOptions = {
  "scope": "all", // 可选。申请授权权限列表, 默认值为"all"
  "forceWebLogin": false, // 可选。是否强制使用网页登录,默认 false
  "useQrCode": false, // 可选。是否使用扫码登录(仅在forceWebLogin为true时生效),默认 false
  "networkTimeout": 0, // 可选。配置sdk内部WebView网页加载超时时长(单位ms,仅在>0时生效,如传入<=0 则sdk内部会使用默认值 5000ms)
};
QQ.login(obj, (obj: Record<string, string>) => {
  /**
   * 返回中有access_token和openid,及申请的开放平台appid,get请求如下地址获取qq的用户信息。
   * https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID
   **/
  console.warn(`qq登录返回: ${JSON.stringify(obj)}`);
});

七、其他参考方法

  1. 从手机相册选取照片,返回uris的示例方法,从开发调试时参考。

import common from '@ohos.app.ability.common';
import { fileIo as fs, fileUri } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';

// 选取相册照片示例,返回选中图片uri的数组格式,即uris。
async getPictureUriFromAlbum(type: 'video'|'image'): Promise<string[]> {
  let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  if (type === 'video') {
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
  } 
  if (type === 'image') {
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 18;
  }
  let photoPicker = new photoAccessHelper.PhotoViewPicker();
  let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
  let selectPhoto = photoSelectResult.photoUris;
  console.warn(`选中的图片: ${JSON.stringify(selectPhoto)}`);
  // 将选中的图片转uri路径
  const allPath: string[] = selectPhoto.reduce((m: string[], itemPath) => {
    let albumPath = itemPath;
    let context = getContext(this) as common.UIAbilityContext;
    let filePath = `${context.filesDir}/original-${Date.now()}.${type === 'video' ? 'mp4' : 'jpg'}`;
    let file: fs.File | undefined;
    file = fs.openSync(albumPath, fs.OpenMode.READ_ONLY);
    fs.copyFileSync(file.fd, filePath);
    fs.closeSync(file);
    let uri: string = fileUri.getUriFromPath(filePath); // uri路径
    m.push(uri);
    return m;
  }, []);
  console.log(`选中的图片uri地址: ${JSON.stringify(allPath)}`);
  return allPath;
}