接入说明
代码示例
步骤一:引入插件代码包:从鸿蒙包管理中安装
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| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| appKey | string | 是 | 企业appKey的查看方法见[注1] |
代码示例
import { configAppKey } from '@ysf/sdk'
configAppKey('3858be3c20ceb629857573688888888'); // 申请企业的appKey设置 bundIeId
configBundleId
接口描述
配置鸿蒙sdk的 bundleId 采用插件对外接口的形式。
参数说明
configBundleId(id:string):void| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| id | string | 是 | 企业bundleId的查看方法见【注4】 |
代码示例
import { configBundleId } from '@ysf/sdk'
configBundleId('3858be3c20ceb629857573688888888'); 【注1】 企业appKey的查看方法: 七鱼管理后台 — 在线系统 — 在线接入

【注2】 此方法为必须调用,请确保在跳转到插件的聊天界面之前配置了正确的 appKey
【注3】在对接之前请确定在 七鱼管理后台 — 在线系统 — App 界面绑定您的鸿蒙app,否则可能会出现连接不到客服的情况
【注4】 企业 appId 的查看方法:七鱼管理后台 — 在线系统 — App 【用户绑定app是传入的的bundle id】

这篇文档有帮助吗?