七鱼开发文档中心
总览服务端 APIWebiOSAndroid鸿蒙Uniapp微信小程序插件三方接入

接入说明

代码示例

步骤一:引入插件代码包:从鸿蒙包管理中安装

ohpm install @ysf/sdk

步骤二:插件初始化

import { initYsf, configAppKey, configBundleId } from '@ysf/sdk'

// 初始化代码
async initQy() {
  await initYsf(); // 初始化,所有 API 必须在初始化之后调用
  const yourAppKey = ''; // 申请企业的appKey
  const yourBundleId = ''; // 由七鱼后台-app小程序接入绑定后app的bundle ID,用户自己填入
  configAppKey(yourAppKey)
  configBundleId(yourBundleId);
}

步骤三:跳转到客服页面

页面路由 (@ohos.router) 接入

若 App 使用 Navigation 开发,需要通过监听七鱼事件进行导航跳转的,请参考 Navigation 接入,否则会出现页面层级覆盖问题

import { open } from '@ysf/sdk'
// 打开七鱼页面,在需求的地方执行
openPage() {
   const uiContext: UIContext = this.getUIContext()
   open(uiContext)
}

组件导航 (Navigation) 接入

版本 >= 1.0.8

import {
  initYsf,
  QiyuPage,
  configAppKey,
  configBundleId
} from '@ysf/sdk'

@Entry({ routeName: 'NavigationDemo' })
@Component
export struct NavigationDemo {
  pageStack: NavPathStack = new NavPathStack();

  @Builder
  pageMap(name: string) {
    if (name === 'QiyuPage') {
      QiyuPage()
    }
  }

  async initQy() {
    await initYsf();
    this.getUIContext().setKeyboardAvoidMode(1); // 配置键盘避让模式
    const appKey = '企业 appKey';
    const bundleId = '应用 bundleId';
    configAppKey(appKey);
    configBundleId(bundleId);
    console.log('【DEMO】七鱼初始化完成')
  }

  // 页面显示时初始化七鱼 SDK
  aboutToAppear() {
    this.initQy();
  }

  build() {
    Navigation(this.pageStack) {
      Button("联系客服")
        .onClick(async () => {
          this.pageStack.pushPath({ name: "QiyuPage" });
        })
    }.navDestination(this.pageMap)
  }
}

常用功能示例代码

import { promptAction } from '@kit.ArkUI'
import { call } from '@kit.TelephonyKit'
import { initYsf, open, configProduct, setUserInfo, configAppKey, configBundleId, onUnread, onClickUrl, onCustomEvent } from '@ysf/sdk'

function startBrowsableAbility(context: common.UIAbilityContext, url:string): void {
  let want: Want = {
    action: 'ohos.want.action.viewData',
    entities: ['entity.system.browsable'],
    uri: url
  };
  context.startAbility(want)
    .then(() => {
      console.error('Start browsableAbility successfully.');
    })
    .catch((err: BusinessError) => {
      console.error(`Failed to startAbility. Code: ${err.code}, message: ${err.message}`);
    });
}


@Preview
@Component
export default struct Home {
  async initQy() {
    // 初始化,所有 API 必须在初始化之后调用
    await initYsf()
    // 企业 appKey
    const appKey = ''
    // 应用 bundleId
    const bundleId = ''
    // 设置 appKey、bundleId
    configAppKey(appKey)
    configBundleId(bundleId)
    // 设置商品、订单卡片
    configProduct({
      title: '任天堂(Nintendo)Switch游戏机',
      desc: '任天堂(Nintendo) Switch NS NX掌上游戏机便携 塞尔达马里奥新款游戏机 主机不锁 日版黑机彩色手柄+中文赛/塞尔达传说(指南+地图)',
      note: '$2330',
      picture: 'https://img10.360buyimg.com/n5/s75x75_jfs/t4030/290/29851193/293745/d5e2b731/58ac3506Nbb57b5f6.jpg',
      url: 'https://www.taobao.com/',
      sendByUser: 1,
      sendProToRobot: 1,
      show: 1,
      extraParam: {
        goodsId: '123456',
      },
      goodsId: 'NDS00091203',
    })

    // 设置用户信息
    setUserInfo({
      userId: 'user9527',
      data: [
        { key: 'real_name', value: '鸿蒙测试用户' },
        { key: 'mobile_phone', value: '13800000000' },
        { key: 'email', value: '13800000000@163.com' },
        { index: 0, key: 'account', label: '账号', value: 'zhangsan', href: 'http://example.domain/user/zhangsan' },
        { index: 1, key: 'sex', label: '性别', value: '先生' },
        { index: 2, key: 'reg_date', label: '注册日期', value: '2024-01-01' },
        { index: 3, key: 'last_login', label: '上次登录时间', value: '2024-12-22 15:38:54' },
        { index: 4, key: 'avatar', label: '头像', value: 'https://ysf.nosdn.127.net/985726b5a8840b84a8a90c6b71642813' },
      ],
    })

    // 设置未读消息监听
    onUnread((res: Record<string, Object>) => {
      console.log('【DEMO】当前未读消息总数: ', res.total);
      console.log('【DEMO】新增未读消息: ', res.message);
    })

    // 链接点击
    onClickUrl((res: Record<string, string>) => {
      console.log('【DEMO】onClickUrl: ', JSON.stringify(res))
      let url: string = res.url;
      if (url.startsWith('tel:')) {
        const tel = url.split('tel:')[1];
        call.makeCall(tel, (err: BusinessError) => {
          if (err) {
            console.error(`makeCall fail, err->${JSON.stringify(err)}`);
          } else {
            console.log(`makeCall success`);
          }
        });
      } else {
        const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
        startBrowsableAbility(context, url);
      }
    })

    // 自定义事件点击
    onCustomEvent((res: Record<string, Object>) => {
      promptAction.showToast({
        message:'【DEMO】onCustomEvent: '+ JSON.stringify(res)
      })
    })

    console.log('【DEMO】七鱼初始化完成')
  }
  aboutToAppear() {
    this.initQy()
  }
  build() {
    Column() {
      Text('联系客服')
        .onClick(async () => {
          const uiContext: UIContext = this.getUIContext()
          open(uiContext)
        })
    }
    .width('100%')
    .height('100%')
  }
}

设置 appKey

configAppKey

接口描述

配置企业的 appKey 采用插件对外接口的形式。

参数说明

configAppKey(appKey:string):void
名称类型必填说明
appKeystring是企业appKey的查看方法见[注1]

代码示例

import  { configAppKey } from '@ysf/sdk'
configAppKey('3858be3c20ceb629857573688888888'); // 申请企业的appKey

设置 bundIeId

configBundleId

接口描述

配置鸿蒙sdk的 bundleId 采用插件对外接口的形式。

参数说明

configBundleId(id:string):void
名称类型必填说明
idstring是企业bundleId的查看方法见【注4】

代码示例

import  { configBundleId } from '@ysf/sdk'
configBundleId('3858be3c20ceb629857573688888888'); 

【注1】 企业appKey的查看方法: 七鱼管理后台 — 在线系统 — 在线接入

【注2】 此方法为必须调用,请确保在跳转到插件的聊天界面之前配置了正确的 appKey

【注3】在对接之前请确定在 七鱼管理后台 — 在线系统 — App 界面绑定您的鸿蒙app,否则可能会出现连接不到客服的情况

【注4】 企业 appId 的查看方法:七鱼管理后台 — 在线系统 — App 【用户绑定app是传入的的bundle id】

这篇文档有帮助吗?

目录