会话消息

// 监听
ysf('onunread',  function(result){
  // todo
  console.log(result.total, result.type, result.message);
});

// 获取
var result = ysf('getUnreadMsg');
console.log(result.total, result.type, result.message);

ysf('config', {
  uid:"201609051809",
  name:'接入',
  email:'test@163.com',
  mobile:'13888888888',
  qtype: 1056         //常见问题模板id
});

ysf('config', {
  uid:"201609051809",
  name:'接入',
  email:'test@163.com',
  mobile:'13888888888',
  welcomeTemplateId: 1024         //欢迎语模板id
});

ysf('product', {
  show : 1, // 1为打开， 其他参数为隐藏（包括非零元素）
  title : '标题',
  desc : '商品描述',
  picture : '商品图片地址',
  note : '备注',
  url : '跳转链接'
})

ysf('product', {
  show : 1, // 1为打开， 其他参数为隐藏（包括非零元素）
  title : '标题',
  desc : '商品描述',
  picture : '商品图片地址',
  note : '备注',
  url : '跳转链接',
  success: function(){     // 成功回调
    ysf('open');
  },
  error: function(){       // 错误回调
    // handle error
  }
})

ysf('product', {
  sendByUser: 1, // 是否由访客手动发送，1为是，其他参数为否
  actionText: '发送链接', // 发送按钮文案
  actionTextColor: '#000000', // 发送按钮文案颜色（16进制格式）
  title : '标题',
  desc : '商品描述',
  picture : '商品图片地址',
  note : '备注',
  url : '跳转链接'
})

ysf.clearProduct();

ysf('product', {
  show : 1, // 1为打开，其他参数为隐藏（包括非零元素）
  template: 'pictureLink', // 模板类型，不传为默认类型
  title : '标题',
  picture : '商品图片地址',
  url : '跳转链接'
})

ysf('product', {
  show : 1, // 1为打开， 其他参数为隐藏（包括非零元素）
  title : '标题',
  desc : '商品描述',
  picture : '商品图片地址',
  note : '备注',
  url : '跳转链接',
  tags: [{
    "label": "打开七鱼官网",  // 按钮名字
    "url": "https://qi.163.com", // 非必填，如果没有focusIframe字段，或者没有匹配到iframe，就以新窗口打开这个链接
    "focusIframe": "iframe名称", // 定位到iframe的标识，以iframe的名称匹配
    "data": {"name": "ss","sex": "男"}  // 以postMessage形式发送的数据，数据格式不限
  },{
    "label": "查询订单",
    "focusIframe": "订单",
    "data": {"orderId": "10000012","userName": "xxx"}
  }]
});

ysf('product', {
 // 卡片消息配置参数
})

ysf('sendProduct', {
    title : '标题',
    desc : '商品描述',
    picture : '商品图片地址',
    note : '备注',
    url : '跳转链接',
    sendByUser: 0,
    success: () => {
    	console.log('卡片发送成功');
    },
    error: (err) => { console.log(err) }
})

var data = {
  // 要发送到七鱼的商品或者订单的数据对象
}
window.parent.postMessage(data, '*'); // 将数据用postMessage的方式发送到七鱼

type ICard =
  | TitleOptions
  | RichOptions
  | SubTitleOptions
  | ImageOptions
  | ProductOptions
  | OrderOptions
  | FlowOptions
  | ButtonOptions
  | LinkOptions
  | TagOptions;

type IFloatCard = ProductOptions | ButtonOptions | TagOptions;

enum MoudleType {
  TITLE = 'title',
  RICH = 'rich',
  SUBTITLE = 'subtitle',
  IMAGE = 'image',
  PRODUCT = 'product',
  ORDER = 'order',
  FLOW = 'flow',
  BUTTON = 'button',
  LINK = 'link',
  TAG = 'tag',
}

interface TitleOptions {
  type: MoudleType.TITLE;
  content: string; //内容
  url?: string; // 超链接
  img?: string; // 图片加文本的图片url
  style?: {
    fontSize?: string | number; // 文字大小，默认14px
    fontColor?: string; // 字体颜色
    divider?: 0 | 1; // 是否添加分割线默认有分割线，最后一个元素没有
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 富文本模版的配置
 */
interface RichOptions {
  type: MoudleType.RICH; // 富文本
  content: string; // 内容，必须符合HTML规范，微信小程序view、image等标签请改成div、img
  style?: {
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
    divider?: 0 | 1; // 分割线
  };
}

/**
 * 副标题模版的配置
 */
interface SubTitleOptions {
  type: MoudleType.SUBTITLE;
  img?: string; // 图片url
  content: string;
  subContent?: string; // 显示在右侧的
  url?: string; // 跳转 url
  style?: {
    backgroundColor?: string; // 背景色
    divider?: 0 | 1; // 分割线
    fontSize?: number;
    fontColor?: string;
    subFontSize?: number;
    subFontColor?: string;
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 图片模版的配置
 */
interface ImageOptions {
  type: MoudleType.IMAGE; // 图片
  img: string; // 图片url
  url?: string; // 跳转 url
  style?: {
    divider?: 0 | 1; // 分割线
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 商品模版的配置
 */
export interface ProductOptions {
  type: MoudleType.PRODUCT; // 商品
  data: {
    id: string | number; // 商品id
    picture: string; // 商品图片
    desc: string; // 描述
    title: string; // 标题
    price: string; // 价格
    url?: string; // actions 0的情况 跳转链接
    action?: 0 | 1; // 0 点击跳转【默认】， 1 点击发送对应的商品卡片 (只试用于访客端)
  }[];
  style?: {
    divider?: 0 | 1; // 分割线
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 订单模版的配置
 */
export interface OrderOptions {
  type: MoudleType.ORDER; // 订单
  orderId: string | number; // 订单id
  orderTime: string; // 下单时间
  data: {
    picture: string; // 商品图片
    desc: string; // 描述
    title: string; // 商品标题
    payMoney?: string; // 价格
    url?: string; // 跳转链接
    count?: string; // 订单商品数量 x 100
    sku?: string; // 商品sku描述
    status: string; // 交易状态
    action?: 0 | 1; // 0 点击跳转， 1 点击发送对应的订单卡片 (只试用于访客端)
  }[];
  style?: {
    divider?: 0 | 1; // 分割线
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 节点流程的配置
 */
export interface FlowOptions {
  type: MoudleType.FLOW; // 流程
  data: {
    id: string | number; // 流程id
    title: string; // 标题
    subtitle?: string; // 副标题
    current?: 1 | 0; // 当前步骤
  }[];
  style?: {
    fontSize?: number; // 主标题大小
    fontColor?: string; // 主标题颜色 有默认
    subFontSize?: number; // 副标题大小
    subFontColor?: string; // 副标题颜色 有默认值
    divider?: 0 | 1; // 分割线
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 按钮模版的配置 TODO
 */
export interface ButtonOptions {
  type: MoudleType.BUTTON; // 按钮
  numInRow?: number; // 一行显示几个按钮 默认1个【浮动组件不生效】
  data: {
    title: string; // 标题
    action?: 0 | 1; // 0 点击跳转链接， 1 点击发送配置的文字(仅限访客)
    url?: string; // 跳转链接
    content?: string; // 发送的文字 action === 1 需要配置此内容
  }[];
  style?: {
    backgroundColor?: string; // 背景色
    fontColor?: string; // 文字颜色
    fontSize?: number; // 文字大小
    divider?: 0 | 1; // 分割线
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 卡片消息的配置
 */
export interface LinkOptions {
  type: MoudleType.LINK; // 链接
  content: string; // 标题
  url: string; // 跳转链接
  style?: {
    fontSize?: number; // 文字大小
    fontColor?: string; // 文字颜色
    divider?: 0 | 1; // 分割线
    pt?: number; // 上边距
    pb?: number; // 下边距
    pl?: number; // 左边距
    pr?: number; // 右边距
  };
}

/**
 * 标签
 */
export interface TagOptions {
  type: MoudleType.TAG; // 标签
  data: {
  	label: string; // 标签名称
    url?: string; // 非必填，如果没有 focusIframe 字段，或者没有匹配到 iframe，就以新窗口打开这个链接
    focusIframe?: string; // 定位到客服工作台右侧 iframe 的标识，以 iframe 的名称匹配
    data: any; // 以 postMessage 形式发送的数据，数据格式不限
  }[];
}

ysf('cardMessage', {
      sendByUser?: 0, // 0 进线自动发送，1 手动发送  默认0
      actionText? :string // 发送按钮文案
      actionTextColor?: string // 发送按钮颜色
      hideAction?: number; // 是否展示action按钮 默认0；用于sendByUser=1隐藏发送按钮
      cards: ICard[]; // 这里是消息的配置，至少一个 ，看卡片类型定义
      floatCards?: IFloatCard[] // 这里是消息的配置，看卡片类型定义
      clear?:number;// 设置为1时可以清除已设置的卡片，设为1时cards需设置为[{}]
      success？: () => {}
      error？: () => {}
	}
})

ysf.clearCustomCard() 

ysf('sendCardMessage', {
    type: 'cardMessage',
    sendByUser: 0,
    cards: [],
    floatCards: [],
    success: () => {
    	console.log('卡片发送成功');
    },
    error: (err) => { console.log(err) }
})

var data = {
  msgtype: 'cardMessage',
  cards: ICard[]; // 这里是消息的配置，至少一条，具体配置看卡片类型定义
  floatCards?: IFloatCard[] // 这里是消息的配置，具体配置看卡片类型定义
}
// 将数据用postMessage的方式发送到七鱼
window.parent.postMessage(data, '*');

ysf('customMessage', {
  data: any, // 用户自定义数据，不限制格式
  description: string, //  必填，客服工作台展示该字段
  
  sendByUser?: number, // 0 进线自动发送，1 手动发送  默认0
  actionText?：string, // 发送按钮文案 [new]
  actionTextColor?： string, // 发送按钮颜色[new]
  hideAction: number, // 是否展示action按钮 默认0，sendByUser=1的时候会展示发送卡片按钮 [new]
  succsess: () => {},
  error: () => {},
});

ysf('sendCustomMessage', {
    data: any, // 用户自定义数据，不限制格式
    description: string, //  必填，客服工作台展示该字段
    sendByUser: 0,
    success: () => {
    	console.log('卡片发送成功');
    },
    error: (err) => { console.log(err) }
})

var data = {
  msgtype: 'customMessage'; // 消息类型
  data: any; // 组件接收数据类型
  description: string; // 客服工作台、消息记录展示文案
};
// 将数据用postMessage的方式发送到七鱼
window.parent.postMessage(data, '*');

ysf('config', {
  uid:"1442286211167",
  name:'test',
  email:'test@163.com',
  mobile:'13888888888',
  staffid:'123', // 客服id
  groupid: '123' // 客服组id
});

ysf('config', {
  uid:"1442286211167",
  name:'test',
  email:'test@163.com',
  mobile:'13888888888',
  staffid:'123',
  robotShuntSwitch: 1 // 机器人优先开关
});

ysf('config', {
  uid:"usr18398492039",
  name:'mixRobotTestUser',
  email:'test@163.com',
  mobile:'13888888888',
  robotId: '12345'  // 机器人ID
});

ysf('config', {
  APPbackPop: 2  // 0不弹起挽留弹窗 1:弹关闭挽留弹窗 2: 关闭挽留弹窗和评价挽留弹窗
});

// 在需要关闭七鱼访客端界面的地方，加入下面的代码
String js = "javascript:" + "checkCloseYSFClient" + "()";
WebView.loadUrl(js);

// 自定义addJavascriptInterface接口
public class JavaScriptInterface {
    @JavascriptInterface
    public void receiveYSFMessage(String message) {
        // 在这里处理从H5页面传来的消息
        Log.e("receiveYSFMessage: ", "从js--> " + message);
    }
}

//webView 然后设置 setJavaScriptEnabled 为 true
WebView.setJavaScriptEnabled(true);
//添加 addJavascriptInterface 监听，设置全局的 JavaScript 方法处理 postH5Message 。
WebView.addJavascriptInterface(new JavaScriptInterface(), "postH5Message");

#import "TestViewController.h"
#import <WebKit/WebKit.h>

@interface TestViewController ()<WKScriptMessageHandler,WKNavigationDelegate,WKUIDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CGRect rect = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds));
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.preferences = [[WKPreferences alloc] init];
    config.preferences.minimumFontSize = 10;
    config.preferences.javaScriptEnabled = YES;
    config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
    config.userContentController = [[WKUserContentController alloc] init];
    config.processPool = [[WKProcessPool alloc] init];
    config.userContentController = [WKUserContentController new];
    //在创建wkWebView时，需要将被js调用的方法注册进去,oc与js端对应实现
    [config.userContentController addScriptMessageHandler:self name:@"receiveYSFMessage"];
    WKWebView *wkWebView = [[WKWebView alloc]initWithFrame:rect configuration:config];
    self.webView = wkWebView;
    wkWebView.navigationDelegate = self;
    wkWebView.UIDelegate = self;
    NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:@"http://6669.qytest.netease.com/sdk/r/demo-debug.html"]];
    [wkWebView loadRequest:request];
    [self.view addSubview:wkWebView];
    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    backBtn.frame = CGRectMake(100, 100, 100, 100);
    [backBtn setTitle:@"返回" forState:UIControlStateNormal];
    [self.view addSubview:backBtn];
    [backBtn setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
    [backBtn addTarget:self action:@selector(onBack) forControlEvents:UIControlEventTouchUpInside];

}
- (void)onBack {
    [self nativeCallJS];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"receiveYSFMessage"]) {
        NSLog(@"JS调用原生,参数：%@",message.body);
        [self.navigationController popViewControllerAnimated:YES];
    }
}
- (void)nativeCallJS {
    [self.webView evaluateJavaScript:@"checkCloseYSFClient()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    　　//TODO
        NSLog(@"");
     }];
}

@end

ysf('config', {
  APPBridgePermission: 1  // 0:不获取权限 1:获取app权限，需要app客户端配合开发
});

//
//  TestViewController.m
//  QYSDKDemo
//
//  Created by zhongzhida on 2023/4/19.
//  Copyright © 2023 Netease. All rights reserved.
//

#import "TestViewController.h"
#import <WebKit/WebKit.h>
#import <Photos/Photos.h>

@interface TestViewController ()<WKScriptMessageHandler,WKNavigationDelegate,WKUIDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CGRect rect = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds));
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.preferences = [[WKPreferences alloc] init];
    config.preferences.minimumFontSize = 10;
    config.preferences.javaScriptEnabled = YES;
    config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
    config.userContentController = [[WKUserContentController alloc] init];
    config.processPool = [[WKProcessPool alloc] init];
    config.userContentController = [WKUserContentController new];
    //在创建wkWebView时，需要将被js调用的方法注册进去,oc与js端对应实现
    [config.userContentController addScriptMessageHandler:self name:@"receiveYSFMessage"];
    WKWebView *wkWebView = [[WKWebView alloc]initWithFrame:rect configuration:config];
    self.webView = wkWebView;
    wkWebView.navigationDelegate = self;
    wkWebView.UIDelegate = self;
    NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:@"http://10.221.149.18:8002/src/html/demo-debug.html"] cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:10];
    [wkWebView loadRequest:request];
    [self.view addSubview:wkWebView];
    
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"receiveYSFMessage"]) {
        NSLog(@"JS调用原生,参数：%@",message.body);
        NSString *body = message.body;
        NSData *jsonData = [message.body dataUsingEncoding:NSUTF8StringEncoding];

        NSError *error = nil;
        NSDictionary *jsonDictionary = [NSJSONSerialization JSONObjectWithData:jsonData options:kNilOptions error:&error];
        NSString *type = jsonDictionary[@"type"];
        NSInteger result = 0;
        if ([type isEqualToString:@"imagePermission"] || [type isEqualToString:@"videoPermission"]) {
            // 获取相册权限状态
            PHAuthorizationStatus photoLibraryAuthorizationStatus = [PHPhotoLibrary authorizationStatus];
            [self nativeCallJS:@{@"seq":jsonDictionary[@"seq"],@"type":type,@"result":@(photoLibraryAuthorizationStatus)}];
        } else if ([type isEqualToString:@"filePermission"]) {
            [self nativeCallJS:@{@"seq":jsonDictionary[@"seq"],@"type":type,@"result":@(1)}];
        } else if ([type isEqualToString:@"requestImagePermission"] || [type isEqualToString:@"requestVideoPermission"]) {
            // 获取相册权限状态
            PHAuthorizationStatus photoLibraryAuthorizationStatus = [PHPhotoLibrary authorizationStatus];
            if (photoLibraryAuthorizationStatus == PHAuthorizationStatusDenied ) {
                [[[UIAlertView alloc] initWithTitle:@"没有相册权限"
                                            message:@"请在iPhone的“设置-隐私-相册”选项中，允许访问你的相册。"
                                           delegate:nil
                                  cancelButtonTitle:@"确定"
                                  otherButtonTitles:nil] show];
            } else if (photoLibraryAuthorizationStatus == PHAuthorizationStatusNotDetermined) {
                // 请求访问相册的权限
                [PHPhotoLibrary requestAuthorization:^(PHAuthorizationStatus status) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        [self nativeCallJS:@{@"seq":jsonDictionary[@"seq"],@"type":type,@"result":@(status)}];
                    });
                }];
            }
            
        }
        
    }
}
- (void)nativeCallJS:(NSDictionary *)param {
    NSData *data = [NSJSONSerialization dataWithJSONObject:param
                                                   options:0
                                                     error:nil];
    NSString *str  = [[NSString alloc] initWithData:data
                                           encoding:NSUTF8StringEncoding];
    NSString *js = [NSString stringWithFormat:@"ysfAppBridge(%@)",str];
    [self.webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    　　//TODO
        NSLog(@"");
     }];
}

@end