统一 SDK

基于 e 福州 APP 协议列表 和fz-toonMixin封装；部分 SDK 已经兼容闽政通。

toonMixin 不再维护，本工程可以兼容。

// 修改前
import TOONMIXIN from './toonMixin.umd'

// 修改后
import TOONMIXIN from 'toonsdk';
// 或者外链引入js的方式：
// demo：https://luoyuan.51yzone.com/toonsdk/site/assets/html/demo.html
// 测试环境：<script src="https://luoyuan.51yzone.com/toonsdk/site/assets/js/dist/toonsdk.min.js?v=1.1.30"></script>
// 生产环境：<script src="https://syother.efzhou.com/toonsdk/site/assets/js/dist/toonsdk.min.js?v=1.1.30"></script>
// 生产环境-i宁德：<script src=" https://systatic.evstyle.cn/toonsdk/site/assets/js/dist/toonsdk.min.js?v=1.1.30"></script>
// const toonsdk = new window.toonsdk();

何时使用

• 调用 App 原生能力

浏览器支持

E 福州 App，闽政通 App，微信小程序，支付宝小程序，教育通i 宁德和福师大

如何使用

引入闽政通、微信、支付宝第三方 jssdk 库（如果只要适配 E 福州可以不用引入）

<!-- 在html头部引入如下js -->
<!-- 生产环境 -->
<!-- <script src="https://syother.efzhou.com/toonsdk/site/assets/js/insert.js?v=1.1.30"></script> -->
<!-- 生产环境-i宁德 -->
<!-- <script src=" https://systatic.evstyle.cn/toonsdk/site/assets/js/insert.js?v=1.1.30"></script> -->
<!-- 测试环境 -->
<script src="https://luoyuan.51yzone.com/toonsdk/site/assets/js/insert.js?v=1.1.30"></script>
<!-- insert.js 会根据当前浏览器ua判断平台自动插入第三方需要的sdk依赖 -->

demo 演示

使用 App 扫描二维码查看 demo 页面

生产环境

根据当前文档链接自己生成一个二维码

测试环境

安装

npm install toonsdk --save

运行

# 安装依赖
npm i

# 默认开启服务器，地址为 ：http://local:8000/

# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start

# 构建生产环境静态文件，用于发布文档（文档在移动端有测试的示例）
npm run site

使用方式适配情况

使用方式适配: Taro,Toonsdk,window.toonginefz

Taro（跨端框架支持） Toonsdk（实例化方式） window.toonginefz（外链支持方式）

客户端适配情况

客户端适配: toon,mzt,imwork

toon（E 福州）,mzt（闽政通）,wechat（微信）,alipayMiniprogram（支付宝小程序）,alipay（支付宝 h5）,imwork(教育厅),toongine(i 宁德)

fz-toonMixin罗列的接口已经适配toon（E 福州）,mzt（闽政通）,wechat（微信）,alipayMiniprogram（支付宝小程序）,alipay（支付宝 h5）

| 接口分类 | 接口功能说明 | 接口名称 | 方式适配 | 客户端适配 | | :-- | :-- | :-- | :-- | :-- | | 小组模块 | 创建小组 | createGroup | 未适配 | 未适配 | | | 设置小组 | setGroup | 未适配 | 未适配 | | 推荐朋友模块 | 推荐朋友 | getReferFriend | 未适配 | | 闪通模块 | 闪通首页 | - | 未适配 | 未适配 | | 发现模块 | 周边 | getDiscoveryAround | Toonsdk | toon | | | 群组 | getDiscoveryGroup | Toonsdk | toon | | chat 模块 | 单聊会话 | aloneChat | Toonsdk（依赖后端参数） | toon | | frame 模块 | 显示 frame | showFrame | Toonsdk | toon | | groupChat 模块 | 群聊会话 | getGroupChat | Toonsdk | toon | | | 创建群聊 | creatGroupChat | Toonsdk（依赖后端参数） | toon | | | 加入群聊 | joinGroupChat | Toonsdk（依赖后端参数） | toon | | 名片列表 | 选择名片列表 | chooseCard | Toonsdk | toon | | 通讯录 | 我的好友 | myFriends | 未适配 | 未适配 | | | 我的同事 | myColleagues | 未适配 | 未适配 | | 通知中心 | 通知中心主页面 | getNotify | Toonsdk | toon | | | 消息分类页 | getNotifyCatalog | Toonsdk | toon | | 设备 API | 二维码扫描页 | scan | Taro,Toonsdk | toon,mzt,imwork | | | 名片或群组二维码页 | qrcodeShow | Toonsdk | toon | | | 设置是否开启防止用户截屏功能 | setUserScreenshotEnable | Toonsdk | toongine | | MWAP | 获取单张图片 | - | Taro, Toonsdk | toon,mzt | | | 相册多选 | chooseImage | Taro,Toonsdk | toon,mzt | | | 手机振动 | getShock | Taro,Toonsdk | toon,imwork | | | 获取手机的 GPS 状态(非高精度定位) | getLocation | Toonsdk | toon,mzt ,imwork | | | 跳转至 gps 设置界面 | SetGps | 未适配 | 未适配 | | | 获取当前网络状态 | getNetworkType | Taro,Toonsdk | toon,mzt | | | 关闭应用窗口 | closeWindow | Toonsdk | toon,mzt ,imwork | | | 返回 toon 的根页面 | - | Toonsdk | toon,mzt | | | 复制内容到剪切板 | copy | Taro,Toonsdk | toon,mzt | | | 跳转地图 | openMap | Taro,Toonsdk | toon,mzt,imwork | | | 控制横竖屏切换 | switchScreen | Toonsdk | toon | | 支付 | 现金收银台 | getCashRegister | Toonsdk（依赖后端参数） | toon | | 录音 | 录音 | getAudioRecord | 未适配 | 未适配 | | 界面 | 设置分享信息 | setShare | Taro,Toonsdk | toon,mzt | | | 打开分享 | openShare | Taro,Toonsdk | toon,mzt, imwork | | 教育通 | | 弹窗 | alert | getAlert | Toonsdk | imwork | | | confirm | getConfirm | Toonsdk | imwork | | | prompt | getPrompt | Toonsdk | imwork | | | toast | getToast | Toonsdk | imwork | | | actionSheet | getActionSheet | Toonsdk | imwork | | | multiSelect | getMultiSelect | Toonsdk | imwork | | | 显示加载中 | getShowLoading | Toonsdk | imwork | | | 关闭加载中 | getHideLoading | Toonsdk | imwork | | 窗体 | 打开窗体 | openWindow | Toonsdk（例子参数自动重启APP） | imwork | | | 设置窗体 | setWindow | Toonsdk | imwork | | | 关闭窗体 | closeWindow | Toonsdk（需要真实参数） | imwork | | | 在线编辑 | openWebFile | Toonsdk（需要真实参数，例子扫一扫，空白） | imwork | | 文件 | 选择文件 | getSelectFile | Toonsdk | imwork | | | 下载文件 | getDownloadFile | Toonsdk | imwork | | | 查看文件 | getCheckFile | Toonsdk | imwork | | | 查看图片 | getViewImage | Toonsdk | imwork | | 视频 | 录制视频 | getRecordVideo | Toonsdk(调用没反应，例子扫一扫，空白) | imwork | | | 播放视频 | getPlayVideo | Toonsdk(调用没反应，例子扫一扫，空白) | imwork | | 摄像头 | 开始录制 | getStartRecording | Toonsdk(调用没反应，例子扫一扫，空白) | imwork | | 联系人 | 选择内部联系人 | getContactsChoose | Toonsdk | imwork | | 应用 | 打开本地应用 | getOpenLocalApp | Toonsdk(需要真实参数) | imwork | | | 会话列表 | getConversationList | Toonsdk | imwork | | | 对话页面 | getDialogue | Toonsdk(需要真实参数) | imwork | | | 通讯录页面 | getAddressList | Toonsdk | imwork | | | 加好友页面 | getFriendSearch | Toonsdk | imwork | | | 查看好友页面 | getUserInfo | Toonsdk(需要真实参数) | imwork,toongine| | | 查看群组页面 | getGroupInfo | Toonsdk(需要真实参数) | imwork | | 日历 | 日期选择 | getCalendarDatePicker | Toonsdk | imwork | | | 时间选择 | getCalendarTimePicker | Toonsdk | imwork | | | 日期时间选择 | getCalendarDateTimePicker | Toonsdk | imwork | | 其他功能 | 得到当前登录信息 | getLoginInfo | Toonsdk | imwork | | | 启动本地应用 | getStartLocalApp | Toonsdk(需要真实参数) | imwork | | | 得到版本 | getVersion | Toonsdk(调用没反应，例子扫一扫，空白) | imwork | | 网络身份认证 | 获取网络身份认证因子数据 | getCertInfo | Toonsdk(需要真实参数) | toon | | | 请求加注件 | getSealCert | Toonsdk(需要真实参数) | toon | | | 获取统一网络身份认证凭证组件 | getAuthenticationData | Toonsdk(需要真实参数) | toon | | | MID 虚实绑定组件 | getAuthenticationDataWithIdentityNum | Toonsdk(需要真实参数) | toon | | | MID 虚实一致性校验组件 | midConsistencyCheck | Toonsdk(需要真实参数) | toon | | | 打开数字人民币 app | openUniwallet | Toonsdk | toon | | | 判断是否安装数币 APP | canOpenUniwallet | Toonsdk | toon | | | 打开网证页面 | openCTID | Toonsdk | toon | | | 打开微信小程序 | openMiniAppWithExtra | Toonsdk | toon | | 电子证照 | Edc 文件查看 | edcFileRead | Toonsdk | toon | | | OFD 文件查看 | ofdFileRead | Toonsdk | toon | | | OFD 文件签章 | ofdSignFile | Toonsdk | toon | | 人脸识别 | 人脸识别 | getLiveFace | Toonsdk | toongine,toon,mzt |

代码演示

自适应样式

@media only screen and (max-width: 500px) {
  .page-wrapper #header,
  .page-wrapper #footer {
    display: none;
  }
  .markdown > * {
    display: none;
  }
  .markdown > .code-box {
    display: block;
  }
}
.imgList img {
  width: 100%;
}

跳转测试

本示例用于测试跳转，解决闽政通不支持扫码跳转的问题

class App extends React.Component {
  state = {
    url: '',
  };

  render() {
    const { url } = this.state;
    return (
      <div className="content">
        <input
          placeholder="输入任意http地址"
          value={this.state.value1}
          onChange={e => {
            this.setState({ url: e.target.value });
          }}
        />
        <button onClick={() => (window.location.href = url)}>跳转到调试环境吧</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

人脸联调 demo 示例

本示例用于测试人脸联调

console.log("window.navigator.userAgent:",window.navigator.userAgent)
import Toonsdk from 'toonsdk';
import { Modal, message, notification } from 'antd';
import RequestExtend, { AdapterH5Ningde, ClientSdkPC } from '@51yzone/request-extend';
const clientSdkPC = new ClientSdkPC({ Modal, message, notification, window });
const toonsdk = new Toonsdk();
const adapterH5Ningde = new AdapterH5Ningde(clientSdkPC, {
  initUri: '',
  headerDefault: {},
});
const requestExtend = new RequestExtend(
  {
    withCredentials: true,
    baseURL: '',
  },
  adapterH5Ningde,
);

class App extends React.Component {
  state = {
    url: '',
  };
  face = (apiUrl, config) => {
    toonsdk
      .getLiveFace({ isEncrypt: '1' })
      .then(resp => {
        console.log('getLiveFaceCall-su-resp:', resp);
        const data = resp.data || {};
        const param = {
          skey: data.sKey,
          deviceId: data.xDeviceId,
          appType: data.app,
          toonType: data.toonType,
          supplierCode: data.supplierCode,
          encryptionType: '1',
          secLevel: 'lite',
          sign: data.sign,
          photo: data.photo,
        };
        console.log('checkFace:', param);
        requestExtend.requestPost(apiUrl, param, config).then(res => {
          if (res.meta.code == 0) {
            console.log('checkFace-success:', res);
            alert(`checkFace-success:${JSON.stringify(res || {})}`);
          } else {
            alert(res.meta.message);
          }
        });
      })
      .catch(err => {
        console.log('getLiveFaceCall-err:', err);
      });
  };
  handleClickNd = () => {
    this.face('/nd-housing-fund/baiduFace/checkFace', {
      headers: {
        sessionId: '4495b3fe-8f31-422a-a071-3792b529920f',
      },
    });
  };
  render() {
    const { url } = this.state;
    return (
      <div className="content">
        <button onClick={this.handleClickNd}>宁德人脸</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

Toonsdk 示例

Toonsdk 示例，可以打包到业务代码里

import Toonsdk from 'toonsdk';
import compareVersions from 'compare-versions';
import $ from '/assets/js/jquery';
const toonsdk = new Toonsdk();

class App extends React.Component {
  state = {
    imgList: [],
    result: '',
    userName: '',
    sessionId: '',
    userIdCard: '',
  };

  // 图片
  chooseImage = params => {
    return toonsdk
      .chooseImage({
        maxCount: params.maxCount, // maxCount(可设定多选的最多数量)范围1-9张，不传默认9张如果是相册选择（functionType=1），当maxCount=1时，就是相册单选，否则就是相册多选
        functionType: params.functionType, // 功能类型 0-直接调用相机 1-直接从相册选择 2-弹出选择框，相机或者相册
        ratio: params.ratio, // 图片质量压缩率，表示压缩至原图质量的比例0-1之间的小数（不包含0），1表示不压缩。不传默认0.1
        type: params.type, //(是否进行图片裁剪，如果需要裁减图片 则可设定裁剪框的宽高比和值。0：裁剪 1：不裁剪)
        filterMimeType: params.filterMimeType, // 例如：image/gif,image/png,image/jpeg(以","为分隔符，现在只支持以上三种类型的过滤)
      })
      .then(({ images }) => {
        console.log(images);
        this.setState({ imgList: images });
      })
      .catch(err => {
        console.log(err);
      });
  };
  // 二维码扫码
  getScan = params => {
    return toonsdk
      .scan({
        handleResult: params.handleResult, // handleResult(3.2.1)( 0：不处理扫描结果 1：处理扫描结果)
      })
      .then(resp => {
        console.log('getScan-s:', resp);
        this.setState({ result: resp.result });
      })
      .catch(err => {
        console.log('getScan-err:', err);
      });
  };
 // 设置是否开启防止用户截屏功能 仅在当前应用生效，离开应用后设置失效
  setUserScreenshotEnable = params => {
    // isEnable	:true 开启防止功能
    // isEnable	:false 关闭防止功能
    return toonsdk
      .setUserScreenshotEnable(params)
      .then(resp => {
        console.log('setUserScreenshotEnable:', resp);
      })
      .catch(err => {
        console.log('setUserScreenshotEnable-err:', err);
      });
  };

  // 人脸识别
  getLiveFace = () => {
    return toonsdk.getLiveFace().then(({ liveFace }) => {
      let arr = [liveFace];
      this.setState({ imgList: arr });
    });
  };
  // 闽政通人脸识别
  getLiveFace2 = params => {
    console.log('params', params);
    return toonsdk
      .getLiveFace({
        userName: params.userName,
        userIdCard: params.userIdCard,
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // i宁德百度人脸核验
  getLiveFace3 = param => {
    return toonsdk
      .getLiveFace(param)
      .then(resp => {
        console.log('getLiveFaceCall-su-resp:', resp);
        this.setState({ result: 'success:' + JSON.stringify(resp) });
        const data = resp.data || {};
        data.encryptionType = param.isEncrypt || '0' ;
        this.checkFace(data);
      })
      .catch(err => {
        console.log('getLiveFaceCall-err:', err);
        this.setState({ result: 'err:' + JSON.stringify(err) });
      });
  };

  checkFace = data => {
    const param = {
      skey: data.sKey,
      xDeviceId: data.xDeviceId,
      deviceId: data.xDeviceId,
      appType: data.app,
      toonType: data.toonType,
      supplierCode: data.supplierCode,
      encryptionType: data.encryptionType,
      secLevel: 'lite',
      sign: data.sign,
      photo: encodeURIComponent(data.photo),
      type: '3'
    };
    console.log('checkFace-param:', param);

    const isDev = process.env.NODE_ENV === 'development';
    toongine.tcPublic.user.getUserInfo({
      callback: res => {
        console.log('toongine.tcPublic.user-getUserInfo:', res.data);
        $.ajax({
          type: 'POST',
          dataType: "json",
          url: `/openplatform/member/app/np/doBaiduFaceCertificate`,
          headers: {
            personToken: res.data.personToken,
          },
          contentType: "application/json;",
          data: JSON.stringify(param),
          success: function (result) {
            if (result.meta.code == 0) {
              console.log('checkFace-success:', result);
              alert(`checkFace-success:${JSON.stringify(result.data)}`)
            } else {
              console.log('checkFace-fail:', result);
              alert(`checkFace-fail:${JSON.stringify(result.meta)}`)
            }
          },
          error: function (result) {
            console.log('checkFace-error:', result);
          },
        });
      },
    });
  };
  // 获取网络状态
  getNetwork = () => {
    return toonsdk
      .getNetwork()
      .then(resp => {
        console.log(resp);
        this.setState({ result: resp.networkType });
      })
      .catch(err => {
        console.log(err);
      });
  };

  //获取位置
  getLocation = () => {
    return toonsdk
      .getLocation()
      .then(resp => {
        console.log('获取位置', resp);
        this.setState({ result: JSON.stringify(resp.data) });
      })
      .catch(err => {
        console.log(err);
      });
  };

  //打开地图
  openMap = () => {
    return toonsdk.getLocation().then(resp => {
      toonsdk
        .openMap({
          latitude: resp.data.latitude,
          longitude: resp.data.longitude,
        })
        .then(resp => {
          console.log('获取位置', resp);
          this.setState({ result: JSON.stringify(resp) });
        })
        .catch(err => {
          console.log(err);
        });
    });
  };

  // 关闭窗口
  closeWindow = params => {
    return toonsdk.closeWindow({ name: params.name });
  };

  // 打开窗口
  openWindow = params => {
    return toonsdk
      .openWindow({
        url: params.url,
        title: params.title || '',
        bgcolor: params.bgcolor || '',
        color: params.color || '',
        hidden: params.hidden || '',
        type: params.type || '',
        leftMenu: params.leftMenu || '',
        rightMenu: params.rightMenu || '',
        closePage: params.closePage || '',
      })
      .catch(err => {
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 设置窗体
  getSetWindow = params => {
    return toonsdk.setWindow({
      title: params.title || '', // 标题 空为取网页的Title
      bgcolor: params.bgcolor || '', // 背景颜色 背景颜色
      color: params.color || '', // 颜色 字体颜色 默认 #fffff
      hidden: params.hidden || '', // 导航条是否显示 导航条 0限藏 1显示
      type: params.type || '', // 打开类型 默认为0 0/1 内置/系统
      rightMenu: params.rightMenu || '', // 右菜单 icon为URL地址图片,event为字符串，js全局的脚本函数
      closePage: params.closePage || '', // 关闭的页面 当前地址为 closePage,点返回关闭而不是后退，解决第一页跳转，第二页是首页的问题
    });
  };

  openWebFile = params => {
    return toonsdk.openWebFile({
      hostUrl: params.hostUrl || '', // 地址 服务器url
      fileId: params.fileId || '', // 标题
      isPGFFormat: params.isPGFFormat || '', // PGF格式打开
      readOnly: params.readOnly || '', // 只读模式
      userName: params.userName || '', // 当前用户名
      isScreenshotForbid: params.isScreenshotForbid || '', // 是否防截屏
      enterReviseMode: params.enterReviseMode || '', // 是否修订模式
      showReviewingPane: parmas.showReviewingPane || '', // 是否显示修订痕迹右侧边栏
    });
  };
  // 分享
  share = ({ title, url, content, imgUrl }) => {
    return toonsdk
      .setShare({ title, url, content, imgUrl })
      .then(result => {
        this.setState({ result: '分享内容设置成功' });
        console.log('setShare-success', result);
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 打开分享
  openShare = ({ title, url, content, imgUrl }) => {
    return toonsdk
      .openShare({ title, url, content, imgUrl })
      .then(() => {
        console.log('openShare-success', result);
        this.setState({ result: '打开分享内容成功' });
      })
      .catch(err => {
        console.log(err);
      });
  };
  //选择名片列表
  getChooseCard = params => {
    return toonsdk
      .chooseCard({
        type: params.type,
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // 创建小组
  getCreateGroup = params => {
    return toonsdk.createGroup({
      userId: params.userId, //userId(必选-string):用户id
      cardFeedId: params.cardFeedId, //cardFeedId(必选-string):创建者的名片feedId
      broadcastCategory: params.broadcastCategory, //broadcastCategory(可选-string):小组分类("101@旅游")
      name: params.name, //name(可选-string):小组名称
      spreadTitle: params.spreadTitle, //spreadTitle(可选-string):小组的介绍
      groupLogo: params.groupLogo, //groupLogo(可选-string):小组头像地址
      enrollType: params.enrollType, //enrollType(可选-string):参加规则（2:邀请;1:申请;0:开放;）
      isSpecifyLocation: params.isSpecifyLocation, //isSpecifyLocation(可选-string):位置策略(0指定, 1隐藏, 2未指定)
      address: params.address, //address(可选-string):指定地址(isSpecifyLocation=0时必选)
      lat: params.lat, //lat(可选-string):经度(isSpecifyLocation=0时必选)
      lng: params.lng, //lng(可选-string):纬度(isSpecifyLocation=0时必选)
      memberListString: params.memberListString, //memberListString(可选-string):成员列表("c1,c2,c3")
    });
  };

  // 设置小组
  getSetGroup = params => {
    return toonsdk
      .setGroup({
        userId: params.userId, //userId(必选-string):用户id
        vFeedId: params.cardFeedId, //vFeedId(必选-string): 访问者名片feedId
        sFeedId: params.sFeedId, //sFeedId(必选-string): 要设置的小组feedId
      })
      .then(resp => {
        // alert(resp);
        const resultName = '';
        if (resp.result === '0') {
          resultName = '成功';
        } else if (resp.result === '1') {
          resultName = '身份不合法';
        } else if (resp.result === '2') {
          resultName = 'feedId不合法';
        }
        this.setState({ result: `设置小组结果：${resultName}${resp}` });
      })
      .catch(err => {
        this.setState({ result: err || '设置小组失败' });
      });
  };

  // 单聊会话
  getAloneChat = params => {
    return toonsdk.aloneChat({
      myCardNo: params.myCardNo, // 自己的名片id
      friendCardNo: params.friendCardNo, // 好友的名片
    });
  };

  // 我的好友
  getMyFriends = params => {
    return toonsdk
      .myFriends({
        feedId: params.feedId, // 我的名片Id
        cardNo: params.cardNo, // 我的名片No
      })
      .then(resp => {
        console.log(resp);
        this.setState({ result: JSON.stringify(resp.data) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: err });
      });
  };

  // 我的同事
  getMyColleagues = params => {
    return toonsdk
      .myColleagues({
        feedId: params.feedId, // 我的名片Id
        cardNo: params.cardNo, // 我的名片No
      })
      .then(resp => {
        console.log(resp);
        this.setState({ result: JSON.stringify(resp.data) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: err });
      });
  };

  // 发现模块（周边）
  getDiscoveryAround = params => {
    return toonsdk
      .getDiscoveryAround({
        coordinate: params.coordinate, // (必选)经纬度
        viewType: params.viewType, // (必选)页面类型: 1:交友(不限), 2:交友(男), 3:交友(女), 4:小区, 5:学校, 6:景区, 7:兴趣群组, 8:活动
        title: params.title ? params.title : '', //(可选)页面标题
        accessType: params.accessType ? params.accessType : '', //（可选）访问页面类型：0：浏览页面（默认）；1：选择名片
      })
      .then(resp => {
        console.log(resp);
        this.setState({ result: JSON.stringify(resp.data) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: err });
      });
  };

  // 发现模块（群组）
  getDiscoveryGroup = () => {
    return toonsdk.getDiscoveryGroup();
  };

  // frame模块
  showFrame = params => {
    return toonsdk.showFrame({
      feedId: params.feedId, //需要显示的名片或群组ID
      myFeedId: params.myFeedId ? params.myFeedId : '', // 可选参数，我的名片ID
    });
  };

  // 群聊会话
  getGroupChat = params => {
    return toonsdk.getGroupChat({
      myCardNo: params.myCardNo, // 自己在群聊中的名片Id
      groupChatId: params.groupChatId, // 群聊的Id
    });
  };

  // 创建群聊
  creatGroupChat = params => {
    return toonsdk
      .creatGroupChat({
        groupName: params.groupName, // 群聊名称
        createFeedId: params.createFeedId, // 创建者feedId，必须是自己的feedId
        userId: params.userId, // userId
        name: params.name, // 名称
        headImage: params.headImage, //头像
        title: params.title, //导航栏title
        members: params.members, // 其他群聊成员数组
      })
      .then(resp => {
        console.log(resp);
        this.setState({ result: JSON.stringify(resp.data) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: err });
      });
  };

  // 加入群聊
  joinGroupChat = params => {
    return toonsdk.joinGroupChat({
      groupId: params.groupId, // 群聊id
      feedId: params.feedId, // 必须是自己的feedId
      userId: params.userId, // userId
      name: params.name, // 名称
      headImage: params.headImage, //头像
      title: params.title, //导航栏title
      operatorFeedId: params.operatorFeedId, // 操作者ID
      requestCode: params.requestCode, // 请求码
    });
  };

  //通知中心 主页面
  getNotify = () => {
    return toonsdk.getNotify();
  };

  //通知中心 消息分类页
  getNotifyCatalog = params => {
    return toonsdk.getNotifyCatalog({ appId: params.appId });
  };

  // 支付平台-现金收银台APP协议接口
  getCashRegister = params => {
    return toonsdk
      .getCashRegister({
        buyerId: params.buyerId, //String 买家id 买家toon用户id 必填
        buyerType: params.buyerType, //String 买家类型(01：个人普；02：商户) 01：个人 必填
        sellerId: params.sellerId, //String 卖家id 卖家toon用户id 必填
        sellerType: params.sellerType, //String 卖家类型 01：个人；02：商户（普通）；03：商户（收单结算）； 必填
        tradeType: params.tradeType, //String 交易类型，普通交易实时到账，担保交易 普通交易：normal；担保交易：guarantee 必填
        merNo: params.merNo, //String 商户号，从支付平台获取 如：101003 必填
        txAmount: params.txAmount, //long 金额 如：300（分） 必填
        outOrderNo: params.outOrderNo, //String 订单号  必填
        body: params.body, //String 商品名称  必填
        subject: params.subject, //String 商品详情  必填
        txTime: params.txTime || new Date().getTime(), //String 下单时间(当前时间) 时间戳 必填

        extrInfo: params.extrInfo, //String 交易扩展信息  非必填
        notifyUrl: params.notifyUrl, //String 回调地址  非必填
        userVcard: params.userVcard, //String 买家名片feedId  非必填
        userVcardName: params.userVcardName, //String 买家名片名称  非必填
        mobile: params.mobile, //String 买家手机号 非必填
        sellerVcard: params.sellerVcard, //String 卖家名片id  非必填
        sellerVcardName: params.sellerVcardName, //String 卖家名片名称  非必填
        sellerMobile: params.sellerMobile, //String 卖家手机号  非必填
      })
      .then(resp => {
        // alert('提示' + JSON.stringify(resp));
        const resultName = '';
        if (resp.result === '0') {
          resultName = '失败';
        } else if (resp.result === '1') {
          resultName = '成功';
        } else if (resp.result === '2') {
          resultName = '警告';
        } else if (resp.result === '3') {
          resultName = '取消';
        } else {
          resultName = resp;
        }
        this.setState({ result: resultName });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: err });
      });
  };

  // 打开红包
  openRedEnvelope = params => {
    return toonsdk.openRedEnvelope({
      fromFeedId: params.fromFeedId, //String  红包发送方feedId    必填
      operatorFeedId: params.operatorFeedId, //String  红包接收方feedId    必填
      redPacketId: params.redPacketId, //String  红包id    必填
      remark: params.remark, //String  备注    非必填
      recvType: params.recvType, //String  红包类型  1：普通红包（固定金额）2：拼手气（随机金额）  必填
    });
  };

  // 名片或群组二维码页
  qrcodeShow = params => {
    return toonsdk.qrcodeShow({
      feedId: params.feedId, //feedId(名片或群组的ID,cardNo groupNo)
    });
  };
  // 打开GPS设置页面
  getSetGps = () => {
    return toonsdk.SetGps();
  };
  // 推荐朋友
  getReferFriend = params => {
    return toonsdk.getReferFriend({
      myFeedId: params.myFeedId, //myFeedId:(必填)我的名片 ID
    });
  };

  // 手机震动
  getShock = params => {
    return toonsdk.getShock(params);
  };

  // 复制
  getCopy = params => {
    return toonsdk.copy({
      content: params.content, //content(需要复制到剪贴板的内容) 例如：”思源集团“ 必选
    });
  };

  // 控制横竖屏切换
  getSwitchScreen = params => {
    return toonsdk.switchScreen({
      orientation: params.orientation, //功能类型	0：竖屏1：横屏(顺时针270°,Home键在右侧)
    });
  };
  // 录音
  getAudioRecord = param => {
    // alert('录音');
    return toonsdk
      .getAudioRecord({
        filename: param.filename, // 文件名
        maxDuration: param.maxDuration, // int 设置最大时长，默认60s,最大可设置180s
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 视频
  getChooseVideo = param => {
    return toonsdk
      .getChooseVideo({
        filename: param.filename, // 文件名
        maxDuration: param.maxDuration, // int 设置最大时长，默认60s,最大可设置180s
        sourceType: param.sourceType, // 0用户选择，1录像，2相册选择
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // getAlert
  getAlert = params => {
    return toonsdk
      .getAlert({
        title: params.title, // 标题
        message: params.message, // 消息
        confirmButtonText: params.confirmButtonText, // 确定按钮文本
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // getConfirm
  getConfirm = params => {
    return toonsdk
      .getConfirm({
        title: params.title, // 标题
        message: params.message, // 消息
        confirmButtonText: params.confirmButtonText, // 确定按钮文本
        cancelButtonText: params.cancelButtonText, //取消按钮文本
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // getPrompt
  getPrompt = params => {
    return toonsdk
      .getPrompt({
        message: params.message, // 消息
        defaultValue: params.defaultValue, //缺省值
        confirmButtonText: params.confirmButtonText, // 确定按钮文本
        cancelButtonText: params.cancelButtonText, //取消按钮文本
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // getToast
  getToast = params => {
    return toonsdk
      .getToast({
        message: params.message, // 消息
        duration: params.duration, // 多少秒自动关闭
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // getActionSheet
  getActionSheet = params => {
    return toonsdk
      .getActionSheet({
        message: params.message, // 消息
        cancelButtonText: params.cancelButtonText, //取消按钮文本
        buttons: params.buttons, // 按钮
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //getMultiSelect
  getMultiSelect = params => {
    return toonsdk
      .getMultiSelect({
        options: params.options, // 选项
        selectOptions: params.selectOptions, //选中的值
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //getShowLoading
  getShowLoading = params => {
    return toonsdk
      .getShowLoading({
        message: params.message, // 消息
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
        setTimeout(() => {
          this.getHideLoading();
        }, 1000);
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //getHideLoading
  getHideLoading = () => {
    return toonsdk
      .getHideLoading()
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //选择内部联系人getContactsChoose
  getContactsChoose = params => {
    return toonsdk
      .getContactsChoose({
        limit: params.limit, // 选择个数 , -1表示不限
        type: params.type, //选择类型 user/dept/all
        selected: params.selected, //已选择
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //日期选择
  getCalendarDatePicker = params => {
    return toonsdk
      .getCalendarDatePicker({
        format: params.format, // 格式
        value: params.value, //值
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //时间选择
  getCalendarTimePicker = params => {
    return toonsdk
      .getCalendarTimePicker({
        format: params.format, // 格式
        value: params.value, //值
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  //日期时间选择
  getCalendarDateTimePicker = params => {
    return toonsdk
      .getCalendarDateTimePicker({
        format: params.format, // 格式
        value: params.value, //值
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // 选择文件
  getSelectFile = params => {
    return toonsdk
      .getSelectFile({
        type: params.type, // 选择类型 *,image,video
        limit: params.limit, // 选择个数 , 0表示不限
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 下载文件
  getDownloadFile = params => {
    return toonsdk
      .getDownloadFile({
        url: params.url, // 文件地址
        name: params.name, // 文件名 如果没填，就是URL地址里的文件名
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 查看文件
  getCheckFile = params => {
    return toonsdk
      .getCheckFile({
        url: params.url, // 文件地址
        name: params.name, // 文件名 如果没填，就是URL地址里的文件名
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 查看图片
  getViewImage = params => {
    return toonsdk
      .getViewImage({
        files: params.files, // 相关图片
        index: params.index, // 缺省第几张
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // 录制视频
  getRecordVideo = params => {
    return toonsdk
      .getRecordVideo({
        max_duration: params.max_duration, // 最大时长 默认60秒
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 播放视频
  getPlayVideo = params => {
    return toonsdk
      .getPlayVideo({
        file: params.file, // 地址 默认60秒
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 摄像头
  getStartRecording = params => {
    return toonsdk
      .getStartRecording({
        type: params.type, // 录制类型 none/video/image 默认60秒
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 打开本地应用
  getOpenLocalApp = params => {
    return toonsdk
      .getOpenLocalApp({
        url: params.url, // 地址
        query: params.query, // 参数
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 会话列表
  getConversationList = () => {
    return toonsdk.getConversationList();
  };
  // 对话页面
  getDialogue = params => {
    return toonsdk
      .getDialogue({
        targetType: params.targetType, // 对话目标类型 user/group
        targetId: params.targetId, // 对话目标ID
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 通讯录页面
  getAddressList = () => {
    return toonsdk.getAddressList();
  };

  // 加好友页面
  getFriendSearch = () => {
    return toonsdk.getFriendSearch();
  };
  // 查看好友页面
  getUserInfo = params => {
    return toonsdk
      .getUserInfo({
        id: params.id, // 人员ID
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // 查看群组页面
  getGroupInfo = params => {
    return toonsdk
      .getGroupInfo({
        id: params.id, // 群组ID
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  // 得到当前登录信息
  getLoginInfo = () => {
    return toonsdk
      .getLoginInfo()
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // 启动本地应用
  getStartLocalApp = params => {
    return toonsdk
      .getStartLocalApp({
        appcode: params.appcode, // 应用code
        targetId: params.targetId, // 应用下属ID
      })
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  // 得到版本
  getVersion = () => {
    return toonsdk
      .getVersion()
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  getFlagNumber() {
    /*生成32位随机流水号*/
    /*默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1*/
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = $chars.length;
    var pwd = '';
    for (var i = 0; i < 32; i++) {
      pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
  }

  // 获取网络身份认证因子数据
  getCertInfo = param => {
    return toonsdk
      .getCertInfo(param)
      .then(resp => {
        console.log('getCert-su-resp', param, resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('getCert-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  getSealCertCall = param => {
    param.authMode = 'R33';
    param.certificateFileType = '2';
    param.endorsementInfo = '加注件制作事由';
    param.userOrgName = '使用方名称';
    // 有效期，时间戳，单位秒
    param.endorsementExpireDate = parseInt(Date.now() / 1000) + 24 * 60 * 60 * 7 + '';
    param.bizAppId = '100011';
    param.scenesCode = '场景名称';
    param.businessItemCode = '123';
    param.terminalCode = '123';
    param.requestIdentityData = 'name, number';
    return toonsdk
      .getSealCert(param)
      .then(resp => {
        console.log('getCert-su-resp', param, resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('getCert-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  getAuthenticationDataCall = param => {
    param.authMode = 'R04';
    param.bizAppId = '100011';
    param.scenesCode = '场景名称';
    return toonsdk
      .getAuthenticationData(param)
      .then(resp => {
        console.log('getAuthentication-su-resp', param, resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('getCert-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  getAuthenticationDataWithIdentityNumCall = param => {
    param.authMode = 'R04';
    param.bizAppId = '100011';
    param.scenesCode = '场景名称';
    return toonsdk
      .getAuthenticationDataWithIdentityNum(param)
      .then(resp => {
        console.log('getAuthenticationDataWithIde-su-resp', param, resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('getCert-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  midConsistencyCheckCall = param => {
    param.authMode = 'R010';
    param.name = '王安丽';
    param.number = '350481198204226527';
    param.mid = '9b7b5f90cc327800c51d4cc2824f06460e214ac22615dd0e89a5d000f1b3e44d';
    param.bizAppId = '100011';
    return toonsdk
      .midConsistencyCheck(param)
      .then(resp => {
        console.log('midConsistencyCheck-su-resp', param, resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('getCert-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };

  openUniwalletCall = () => {
    return toonsdk
      .openUniwallet()
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('openUniwallet-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  canOpenUniwalletCall = () => {
    return toonsdk
      .canOpenUniwallet()
      .then(resp => {
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log('canOpenUniwallet-err', err);
        this.setState({ result: JSON.stringify(err) });
      });
  };
  render() {
    const { imgList = [], result, userName, userIdCard } = this.state;
    return (
      <div className="content">
        <h1>Toonsdk适配</h1>
        <h3>图片</h3>
        <button
          id="getImg"
          onClick={() =>
            this.chooseImage({
              maxCount: 4,
              functionType: 2,
              ratio: 1,
              type: 1,
              filterMimeType: 'image/gif',
            })
          }
        >
          选择图片（相册+相机）
        </button>
        <button
          id="openAlbum"
          onClick={() =>
            this.chooseImage({
              maxCount: 3,
              functionType: 1,
              ratio: 1,
              type: 1,
              filterMimeType: 'image/png,image/jpeg',
            })
          }
        >
          选择图片（相册）
        </button>
        <button
          id="openAlbum"
          onClick={() =>
            this.chooseImage({
              maxCount: 3,
              functionType: 1,
              ratio: 1,
              type: 1,
            })
          }
        >
          选择图片（相册，不限制类型）
        </button>
        <button
          id="openCamara"
          onClick={() =>
            this.chooseImage({
              maxCount: 2,
              functionType: 0,
              ratio: 1,
              type: 1,
              filterMimeType: 'image/gif',
            })
          }
        >
          选择图片（相机）
        </button>
        <h3>设备API</h3>
        <button id="scan" onClick={() => this.getScan({ handleResult: 0 })}>
          扫描二维码
        </button>
        <button id="scan1" onClick={() => this.getScan({ handleResult: 1 })}>
          扫描二维码1
        </button>
        <button id="setUserScreenshotEnable" onClick={() => this.setUserScreenshotEnable({ isEnable: true })}>
          用户截屏防止功能开启
        </button>
        <button id="setUserScreenshotEnable" onClick={() => this.setUserScreenshotEnable({ isEnable: false })}>
          用户截屏防止功能关闭
        </button>
        <h3>人脸识别</h3>
        <button id="face" onClick={this.getLiveFace}>
          人脸识别
        </button>
        <div className="content">
          <input
            placeholder="姓名"
            value={this.state.userName}
            onChange={e => {
              this.setState({ userName: e.target.value });
            }}
          />
          <input
            placeholder="身份证号"
            value={this.state.userIdCard}
            onChange={e => {
              this.setState({ userIdCard: e.target.value });
            }}
          />
          <button
            onClick={() => {
              this.getLiveFace2({
                userName: this.state.userName,
                userIdCard: this.state.userIdCard,
              });
            }}
          >
            闽政通人脸识别
          </button>
          <h3>百度人脸识别</h3>
          <input
            placeholder="sessionId"
            value={this.state.sessionId}
            onChange={e => {
              this.setState({ sessionId: e.target.value });
            }}
          />
          <button
            id="checkFaceImageEnginCall"
            onClick={() =>
              this.getLiveFace3({
                isEncrypt: '1', //是否要加密  0 非加密 1 加密    默认非加密
              })
            }
          >
            百度人脸核验(加密)
          </button>
          <button id="getLiveFace3" onClick={() => this.getLiveFace3({})}>
            百度人脸核验(非加密)
          </button>
        </div>
        <h3>网络</h3>
        <button id="network" onClick={this.getNetwork}>
          获取网络状态
        </button>
        <h3>位置</h3>
        <button id="getLocation" onClick={this.getLocation}>
          获取位置
        </button>
        <button id="openMap" onClick={this.openMap}>
          打开地图
        </button>
        <h3>视图</h3>
        <button id="closeWindow" onClick={this.closeWindow}>
          关闭窗口
        </button>
        <button
          id="openWindow"
          onClick={() =>
            this.openWindow({
              url: 'http://www.baidu.com',
              title: 'test1',
              bgcolor: '#000000',
              color: '#ffffff',
              hidden: '1',
              type: '0',
              leftMenu: { text: 'Return' },
              rightMenu: [{ text: '...' }],
              closePage: '',
            })
          }
        >
          打开新窗口
        </button>
        <h3>分享</h3>
        <button
          id="share"
          onClick={() =>
            this.share({
              title: '这里是分享标题',
              content: '这里是分享内容描述',
              imgUrl: 'http://t100static.zhengtoon.com/fz-toonMixin/test/images/qrcode.jpg', // 分享图片链接
              url: location.href, // 分享链接
            })
          }
        >
          设置分享内容
        </button>
        <button
          id="openShare"
          onClick={() =>
            this.openShare({
              title: '这里是分享标题',
              content: '这里是分享内容描述',
              imgUrl: 'http://t100static.zhengtoon.com/fz-toonMixin/test/images/qrcode.jpg', // 分享图片链接
              url: location.href, // 分享链接
            })
          }
        >
          打开分享内容
        </button>
        <h3>我的名片列表</h3>
        <button
          id="chooseCard"
          onClick={() =>
            this.getChooseCard({
              type: '0',
            })
          }
        >
          所有名片
        </button>
        <button
          id="chooseCard"
          onClick={() =>
            this.getChooseCard({
              type: '1',
            })
          }
        >
          个人名片
        </button>
        <button
          id="chooseCard"
          onClick={() =>
            this.getChooseCard({
              type: '2',
            })
          }
        >
          企业名片
        </button>
        <button
          id="chooseCard"
          onClick={() =>
            this.getChooseCard({
              type: '3',
            })
          }
        >
          员工名片
        </button>
        <h3>小组模块</h3>
        <button
          id="getCreateGroup"
          onClick={() =>
            this.getCreateGroup({
              userId: '411046',
              cardFeedId: 'c_6174785811529791',
            })
          }
        >
          创建小组
        </button>
        <button
          id="getSetGroup"
          onClick={() =>
            this.getSetGroup({
              userId: '335795',
              vFeedId: 's_1246261046435414',
              sFeedId: 'g_1246261046435414',
            })
          }
        >
          设置小组
        </button>

        <h3>chat模块</h3>
        <button
          id="getAloneChat"
          onClick={() =>
            this.getAloneChat({
              myCardNo: 'c_1',
              friendCardNo: 'c_2',
            })
          }
        >
          单聊会话
        </button>
        <h3>通讯录模块</h3>
        <button
          id="getMyFriends"
          onClick={() =>
            this.getMyFriends({
              feedId: 'c_1456478158155254',
              cardNo: 'c_1',
            })
          }
        >
          我的好友
        </button>
        <button
          id="getMyColleagues"
          onClick={() =>
            this.getMyColleagues({
              feedId: 'c_1456478158155254',
              cardNo: 'c_1',
            })
          }
        >
          我的同事
        </button>
        <h3>发现模块</h3>
        <button
          id="getDiscoveryAround"
          onClick={() =>
            this.getDiscoveryAround({
              coordinate: '39.9951433878183806,116.4514311421238943',
              viewType: '1',
              title: '首页',
              accessType: '1',
            })
          }
        >
          周边
        </button>
        <button id="getDiscoveryGroup" onClick={() => this.getDiscoveryGroup()}>
          群组
        </button>
        <h3>frame模块</h3>
        <button
          id="showFrame"
          onClick={() =>
            this.showFrame({
              feedId: 'c_1', // 需要显示的名片或群组ID
              myFeedId: 'c_1', // 可选参数，我的名片ID
            })
          }
        >
          显示frame模块
        </button>
        <h3>groupchat模块</h3>
        <button
          id="groupChat"
          onClick={() =>
            this.getGroupChat({
              myCardNo: 'c_1', // 自己在群聊中的名片Id
              groupChatId: 'c_1', // 群聊的Id
            })
          }
        >
          群聊会话
        </button>
        <button
          id="creatGroupChat"
          onClick={() =>
            this.creatGroupChat({
              groupName: '群聊',
              title: '活动名',
              createFeedId: 'c_1',
              feedId: 'c_1',
              userId: '12345',
              name: '自己的名字',
              headImage: '自己的头像',
              members: [
                {
                  feedId: 'c_2',
                  userId: '123',
                  name: 'alt',
                  headImage: '',
                },
                {
                  feedId: 'c_3',
                  userId: '456',
                  name: 'tab',
                  headImage: '',
                },
              ],
            })
          }
        >
          创建群聊
        </button>
        <button
          id="joinGroupChat"
          onClick={() =>
            this.joinGroupChat({
              groupId: '1……',
              feedId: 'c_4',
              userId: '789',
              flagId: '1',
              name: 'shift',
              headImage: '',
              title: '活动名',
              operatorFeedId: 'c_789',
              requestCode: '12',
            })
          }
        >
          加入群聊
        </button>
        <h3>通知中心模块</h3>
        <button id="getNotify" onClick={() => this.getNotify({})}>
          主页面
        </button>
        <button id="getNotifyCatalog" onClick={() => this.getNotifyCatalog({ appId: '1' })}>
          消息分类页
        </button>

        <h3>支付模块</h3>
        <button
          id="getCashRegister"
          onClick={() =>
            this.getCashRegister({
              buyerId: '123',
              buyerType: '01',
              userVcard: 'c_1010089',
              userVcardName: '名称',
              mobile: '买家手机号',
              sellerId: '124',
              sellerType: '01',
              sellerVcard: 'c_1010039',
              sellerVcardName: '卖家名称',
              sellerMobile: '18611536224',
              tradeType: 'normal',
              merNo: '101003',
              txAmount: '300',
              outOrderNo: '10001',
              body: '商品名称',
              subject: '商品描述',
              extrInfo: '商品描述',
              notifyUrl: 'http://myappserver/callback',
              txTime: '149449448600',
            })
          }
        >
          支付平台-现金收银台APP协议接口
        </button>
        <button
          id="openRedEnvelope"
          onClick={() =>
            this.openRedEnvelope({
              fromFeedId: 'xxx',
              operatorFeedId: 'xxx',
              redPacketId: 'xxxxx',
              remark: '恭喜发财，大吉大利！',
              recvType: '1',
            })
          }
        >
          支付模块-打开红包
        </button>
        <h3>名片或群组二维码页</h3>

        <button id="qrcodeShow" onClick={() => this.qrcodeShow({ feedId: 'c_1499874221733511' })}>
          名片或群组二维码页
        </button>
        <h3>跳转至gps设置界面</h3>
        <button id="getSetGps" onClick={() => this.getSetGps({})}>
          跳转至gps设置界面
        </button>
        <h3>推荐朋友模块</h3>
        <button id="getReferFriend" onClick={() => this.getReferFriend({ myFeedId: 'c_1' })}>
          推荐朋友
        </button>
        <h3>手机震动</h3>
        <button id="getShock" onClick={() => this.getShock({ duration: '400' })}>
          手机震动
        </button>
        <h3>复制</h3>
        <button id="copy" onClick={() => this.getCopy({ content: '思源集团' })}>
          复制内容到剪贴板
        </button>
        <h3>横竖屏切换</h3>
        <button id="getSwitchScreen" onClick={() => this.getSwitchScreen({ orientation: '1' })}>
          横屏
        </button>
        <button id="getSwitchScreen" onClick={() => this.getSwitchScreen({ orientation: '0' })}>
          竖屏
        </button>
        <h3>录音</h3>
        <button
          id="clickAudioRecord"
          onClick={() => this.getAudioRecord({ filename: '文件名', maxDuration: 60 })}
        >
          录音
        </button>
        <h3>选择视频</h3>
        <button
          id="clickChooseVideo"
          onClick={() => this.getChooseVideo({ sourceType: 0, maxDuration: 60 })}
        >
          选择视频
        </button>
        <h2>教育通独有</h2>
        <h3>弹窗</h3>
        <button
          id="alert"
          onClick={() =>
            this.getAlert({ title: '提示', message: '你好！', confirmButtonText: '确定' })
          }
        >
          alert
        </button>
        <button
          id="confirm"
          onClick={() =>
            this.getConfirm({
              title: '提示',
              message: '你好！',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
          }
        >
          confirm
        </button>
        <button
          id="prompt"
          onClick={() =>
            this.getPrompt({
              defaultValue: 'test',
              message: '请输入名称',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
          }
        >
          prompt
        </button>
        <button id="toast" onClick={() => this.getToast({ message: 'test', duration: '5' })}>
          toast
        </button>
        <button
          id="actionSheet"
          onClick={() =>
            this.getActionSheet({
              message: '选择项目',
              cancelButtonText: '取消',
              buttons: ['a', 'b'],
            })
          }
        >
          actionSheet
        </button>
        <button
          id="multiSelect"
          onClick={() =>
            this.getMultiSelect({
              options: ['test1', 'test2', 'test3'],
              selectOptions: ['test2', 'test3'],
            })
          }
        >
          multiSelect
        </button>
        <button id="showLoading" onClick={() => this.getShowLoading({ message: '正在加载中' })}>
          显示加载中
        </button>
        <button id="hideLoading" onClick={() => this.getHideLoading({ message: '正在加载中' })}>
          关闭加载中
        </button>
        <h3>窗体</h3>

        <button
          id="getSetWindow"
          onClick={() =>
            this.getSetWindow({
              title: 'test2',
              bgcolor: '#6699cc',
              color: '#ffffff',
              hidden: '1',
              type: '0',
              rightMenu: [
                { text: 'call', icon: '', event: 'jscallback()' },
                {
                  text: '...',
                  icon: '',
                  submenu: [
                    { text: 'SCAN', icon: '', event: 'scan()' },
                    { text: 'SHARE', icon: '', event: 'startShareMenu()' },
                  ],
                },
              ],
              closePage: '',
            })
          }
        >
          设置窗体
        </button>
        <button id="closeWindow" onClick={() => this.closeWindow({ name: '1' })}>
          关闭窗体
        </button>
        <button
          id="openWebFile"
          onClick={() =>
            this.openWebFile({
              hostUrl: 'http://www.kinggrid.com:8080/iWebOffice2009/OfficeServer.jsp',
              fileId: '1487055329034',
              isPGFFormat: '0',
              readOnly: '#ffffff',
              userName: 'test1',
              isScreenshotForbid: 1,
              enterReviseMode: 1,
              showReviewingPane: 1,
            })
          }
        >
          在线编辑
        </button>
        <h3>文件：</h3>
        <button id="getSelectFile" onClick={() => this.getSelectFile({ type: '*', limit: '3' })}>
          选择文件
        </button>
        <button
          id="getDownloadFile"
          onClick={() =>
            this.getDownloadFile({
              url: 'http://www.qidainfo.com/Public/jsapi/file/1.txt',
              name: '测试.txt',
            })
          }
        >
          下载文件
        </button>
        <button
          id="getDownloadFile"
          onClick={() =>
            this.getDownloadFile({
              url: 'http://120.48.39.109/upload/shunde/test.doc',
            })
          }
        >
          下载word文件
        </button>
        <button
          id="getCheckFile"
          onClick={() =>
            this.getCheckFile({
              url: 'http://120.48.39.109/upload/shunde/test.doc',
            })
          }
        >
          查看word文件
        </button>
        <button
          id="getCheckFile"
          onClick={() =>
            this.getCheckFile({
              url: 'http://www.qidainfo.com/Public/jsapi/file/1.txt',
              name: '测试.txt',
            })
          }
        >
          查看文件
        </button>
        <button
          id="getViewImage"
          onClick={() =>
            this.getViewImage({
              files: [
                'http://www.qidainfo.com/Public/jsapi/images/1.jpg',
                'http://www.qidainfo.com/Public/jsapi/images/2.jpg',
                'http://www.qidainfo.com/Public/jsapi/images/3.jpg',
              ],
              index: '0',
            })
          }
        >
          查看图片
        </button>
        <h3>视频</h3>
        <button id="getRecordVideo" onClick={() => this.getRecordVideo({ max_duration: '60' })}>
          录制视频
        </button>
        <button
          id="getPlayVideo"
          onClick={() =>
            this.getPlayVideo({ file: 'http://www.qidainfo.com/Public/jsapi/video/1.mp4' })
          }
        >
          播放视频
        </button>
        <h3>摄像头</h3>
        <button id="getStartRecording" onClick={() => this.getStartRecording({ type: 'none' })}>
          开始录制
        </button>
        <h3>联系人</h3>
        <button
          id="getContactsChoose"
          onClick={() =>
            this.getContactsChoose({
              type: 'user',
              limit: '-1',
              selected: [{ id: '112', type: 'user' }],
            })
          }
        >
          选择内部联系人
        </button>
        <h3>应用</h3>
        <button
          id="getOpenLocalApp"
          onClick={() => this.getOpenLocalApp({ url: 'userInfo', query: { id: 'imadmin' } })}
        >
          打开本地应用
        </button>
        <button id="getConversationList" onClick={this.getConversationList}>
          会话列表
        </button>
        <button
          id="getDialogue"
          onClick={() => this.getDialogue({ targetType: 'user', targetId: '1' })}
        >
          对话页面
        </button>
        <button id="getAddressList" onClick={this.getAddressList}>
          通讯录页面
        </button>
        <button id="getFriendSearch" onClick={this.getFriendSearch}>
          加好友页面
        </button>
        <button id="getUserInfo" onClick={() => this.getUserInfo({ id: '1' })}>
          查看好友页面
        </button>
        <button id="getGroupInfo" onClick={() => this.getGroupInfo({ id: '1' })}>
          查看群组页面
        </button>
        <button id="getCreateGroup" onClick={this.getCreateGroup}>
          创建群组页面
        </button>
        <h3>日历</h3>
        <button
          id="getCalendarDatePicker"
          onClick={() => this.getCalendarDatePicker({ format: 'yyyy-MM-dd', value: '2015-04-17' })}
        >
          日期选择
        </button>
        <button
          id="getCalendarTimePicker"
          onClick={() => this.getCalendarTimePicker({ format: 'HH-mm', value: '18:00' })}
        >
          时间选择
        </button>
        <button
          id="getCalendarDateTimePicker"
          onClick={() =>
            this.getCalendarDateTimePicker({
              format: 'yyyy-MM-dd HH:mm',
              value: '2015-04-17 18:00',
            })
          }
        >
          日期时间选择
        </button>
        <h3>其他功能</h3>
        <button id="getLoginInfo" onClick={this.getLoginInfo}>
          获取当前登录信息
        </button>
        <button
          id="getStartLocalApp"
          onClick={() => this.getStartLocalApp({ appcode: 'addon_acc', targetId: '应用下属ID' })}
        >
          启动本地应用
        </button>
        <button id="getVersion" onClick={this.getVersion}>
          得到版本
        </button>
        <h3>调用结果：</h3>
        <ul className="imgList" id="ul">
          {imgList.map(item => (
            <li>
              <img src={item} />
            </li>
          ))}
        </ul>
        <div className="log" id="log">
          {result}
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

window.toonginefz

window.toonginefz 示例(只举一个例子)，入口文件外链引入 js

import 'toonsdk'; // app.js里引入
class App extends React.Component {
  state = {
    imgList: [],
    result: '',
  };

  // 图片
  chooseImage = params => {
    return window.toonginefz
      .chooseImage({
        maxCount: params.maxCount, // maxCount(可设定多选的最多数量)范围1-9张，不传默认9张如果是相册选择（functionType=1），当maxCount=1时，就是相册单选，否则就是相册多选
        functionType: params.functionType, // 功能类型 0-直接调用相机 1-直接从相册选择 2-弹出选择框，相机或者相册
        ratio: params.ratio, // 图片质量压缩率，表示压缩至原图质量的比例0-1之间的小数（不包含0），1表示不压缩。不传默认0.1
        type: params.type, //(是否进行图片裁剪，如果需要裁减图片 则可设定裁剪框的宽高比和值。0：裁剪 1：不裁剪)
        filterMimeType: params.filterMimeType, // 例如：image/gif,image/png,image/jpeg(以","为分隔符，现在只支持以上三种类型的过滤)
      })
      .then(({ images }) => {
        console.log(images);
        this.setState({ imgList: images });
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    const { imgList = [], result } = this.state;
    return (
      <div className="content">
        <h1>window.toonginefz适配</h1>
        <h3>图片</h3>
        <button
          id="getImg"
          onClick={() =>
            this.chooseImage({
              maxCount: 3,
              functionType: 2,
              ratio: 1,
              type: 1,
              filterMimeType: 'image/gif',
            })
          }
        >
          选择图片（相册+相机）
        </button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

适配 tarojs 实例

适配 Taro 实例，根据taro1x 文档适配，解决 tarosdk 和 toonsdk 传参数和出参差异问题，从而实现业务代码跨端。

部分城市通个性的 SDK，如群聊等，不做转换

import 'toonsdk/lib/tarosdk'; // app.js里引入，也可以在index.html里外链引入js
import Taro from '@rtarojs/taro-h5';

class App extends React.Component {
  state = {
    imgList: [],
    result: '',
  };
  // 图片
  chooseImage = params => {
    return Taro.chooseImage(params)
      .then(resp => {
        const { tempFiles, tempFilePaths } = resp;
        console.log('tempFiles:', resp);
        console.log('tempFiles[0].size:', tempFiles && tempFiles[0].size);
        this.setState({ imgList: tempFilePaths });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 二维码扫码
  getScan = params => {
    console.log('二维码扫码', params);
    return Taro.scanCode(params)
      .then(resp => {
        console.log(resp);
        this.setState({ result: resp.result });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 获取网络状态
  getNetwork = () => {
    return Taro.getNetworkType()
      .then(resp => {
        console.log(resp);
        this.setState({ result: resp.networkType });
      })
      .catch(err => {
        console.log(err);
      });
  };

  //获取位置
  getLocation = param => {
    console.log('Taro获取位置');
    return Taro.getLocation(param)
      .then(resp => {
        console.log(resp);
        this.setState({ result: JSON.stringify(resp.data) });
      })
      .catch(err => {
        console.log(err);
      });
  };

  //打开地图
  openMap = () => {
    //gcj02返回可以用于 Taro.openLocation的经纬度
    return Taro.getLocation({ type: 'gcj02' }).then(resp => {
      console.log('获取当前位置', resp);
      Taro.openLocation({
        latitude: resp.latitude,
        longitude: resp.longitude,
      }).catch(err => {
        console.log(err);
      });
    });
  };

  // 手机震动
  getShock = () => {
    return Taro.vibrateLong()
      .then(resp => {
        console.log('手机震动', resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 复制
  getCopy = params => {
    // console.log('复制', params);
    return Taro.setClipboardData(params)
      .then(resp => {
        console.log(resp);
        this.setState({ result: JSON.stringify(resp) });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 控制横竖屏切换
  getSwitchScreen = params => {
    // return toonsdk.switchScreen({
    //   orientation: params.orientation, //功能类型	0：竖屏1：横屏(顺时针270°,Home键在右侧)
    // });
  };
  // 设置分享
  share = ({ title, url, content, imgUrl }) => {
    return Taro.updateShareMenu({ title, url, content, imgUrl })
      .then(() => {
        this.setState({ result: '分享内容设置成功' });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 打开分享
  openShare = ({ title, url, content, imgUrl }) => {
    return Taro.showShareMenu({ title, url, content, imgUrl })
      .then(()