toonsdk

E福州 toon协议

Usage no npm install needed!

<script type="module">
  import toonsdk from 'https://cdn.skypack.dev/toonsdk';
</script>

README

E 福州 toon 协议封装库

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

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

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

// 修改后
import TOONMIXIN from 'toonsdk';

何时使用

  • 调用 App 原生能力

浏览器支持

E 福州 App，闽政通 App，微信小程序，支付宝小程序，WorkPro

如何使用

引入闽政通、微信、支付宝第三方jssdk库

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

demo演示

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

生产环境

demo二维码生产环境

测试环境

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,wechat,alipayMiniprogram,alipay,imwork

toon（E 福州）,mzt（闽政通）,wechat（微信）,alipayMiniprogram（支付宝小程序）,alipay（支付宝 h5）,imwork(启达)

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

接口分类 接口功能说明 方式适配 客户端适配
小组模块 创建小组 未适配 未适配
设置小组 未适配 未适配
推荐朋友模块 推荐朋友 未适配
闪通模块 闪通首页 未适配 未适配
发现模块 周边 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
群组 未适配 未适配
chat 模块 单聊会话 Toonsdk,window.toonginefz（依赖后端参数） toon,mzt,wechat,alipayMiniprogram,alipay
frame 模块 显示 frame Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
groupChat 模块 群聊会话 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
创建群聊 Toonsdk,window.toonginefz（依赖后端参数） toon,mzt,wechat,alipayMiniprogram,alipay
加入群聊 Toonsdk,window.toonginefz（依赖后端参数） toon,mzt,wechat,alipayMiniprogram,alipay
名片列表 选择名片列表 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
通讯录 我的好友 未适配 未适配
我的同事 未适配 未适配
通知中心 通知中心主页面 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
消息分类页 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
二维码 二维码扫描页 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay,imwork
名片或群组二维码页 未适配 未适配
MWAP 获取单张图片 Taro, Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
相册多选 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
手机振动 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
获取手机的 GPS 状态(非高精度定位) Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
跳转至 gps 设置界面 未适配 未适配
获取当前网络状态 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
关闭应用窗口 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
返回 toon 的根页面 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
复制内容到剪切板 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
跳转地图 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
控制横竖屏切换 Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay
支付 现金收银台 Toonsdk,window.toonginefz（依赖后端参数） toon,mzt,wechat,alipayMiniprogram,alipay
录音 录音 未适配 未适配
界面 设置分享信息 Taro,Toonsdk,window.toonginefz toon,mzt,wechat,alipayMiniprogram,alipay, imwork
打开分享 Taro,Toonsdk,window.toonginefz toon,mzt, imwork

代码演示

自适应样式

@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%;
}

Toonsdk 示例

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

import Toonsdk from 'toonsdk';
const toonsdk = new Toonsdk();

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

  // 图片
  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(resp);
        this.setState({ result: resp.result });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 人脸识别
  getLiveFace = () => {
    return toonsdk.getLiveFace().then(({ liveFace }) => {
      let arr = [liveFace];
      this.setState({ imgList: arr });
    });
  };

  // 获取网络状态
  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,
        })
        .catch(err => {
          console.log(err);
        });
    });
  };

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

  // 打开窗口
  openWindow = url => {
    return toonsdk.openWindow(url);
  };

  // 分享
  share = ({ title, url, content, imgUrl }) => {
    return toonsdk
      .setShare({ title, url, content, imgUrl })
      .then(() => {
        this.setState({ result: '分享内容设置成功' });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // 打开分享
  openShare = ({ title, url, content, imgUrl }) => {
    return toonsdk
      .openShare({ title, url, content, imgUrl })
      .then(() => {
        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 = () => {
    return toonsdk.getShock();
  };

  // 复制
  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 => {
    // alert('视频');
    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) });
      });
  };
  render() {
    const { imgList = [], result } = 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/gif',
            })
          }
        >
          选择图片（相册）
        </button>
        <button
          id="openCamara"
          onClick={() =>
            this.chooseImage({
              maxCount: 2,
              functionType: 0,
              ratio: 1,
              type: 1,
              filterMimeType: 'image/gif',
            })
          }
        >
          选择图片（相机）
        </button>
        <h3>扫码</h3>
        <button id="scan" onClick={() => this.getScan({ handleResult: 0 })}>
          扫描二维码
        </button>
        <h3>人脸识别</h3>
        <button id="face" onClick={this.getLiveFace}>
          人脸识别
        </button>
        <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('http://baidu.com')}>
          打开新窗口
        </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}>
          手机震动
        </button>
        <h3>复制</h3>
        <button id="copy" onClick={() => this.getCopy({ content: '思源集团' })}>
          复制内容到剪贴板
        </button>
        <input></input>
        <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>
        <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里引入，也可以在index.html里外链引入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(({ tempFiles, tempFilePaths }) => {
        console.log('tempFiles:', tempFiles);
        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);
      });
  };

  // 人脸识别
  getLiveFace = () => {
    // return toonsdk.getLiveFace().then(({ liveFace }) => {
    //   let arr = [liveFace];
    //   this.setState({ imgList: arr });
    // });
  };

  // 获取网络状态
  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.data.latitude,
        longitude: resp.data.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.startShareMenu({ 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(() => {
        this.setState({ result: '打开分享内容成功' });
      })
      .catch(err => {
        console.log(err);
      });
  };
  render() {
    const { imgList = [], result } = this.state;
    return (
      <div className="content">
        <h1>Taro适配</h1>
        <h3>图片</h3>
        <button
          id="getImg"
          onClick={() =>
            this.chooseImage({
              count: 5,
              sizeType: ['original', 'compressed'],
              sourceType: ['album', 'camera'],
            })
          }
        >
          选择图片（相册+相机）
        </button>
        <button
          id="openAlbum"
          onClick={() =>
            this.chooseImage({
              count: 3,
              sizeType: ['compressed'],
              sourceType: ['album'],
            })
          }
        >
          选择图片（相册）
        </button>
        <button
          id="openCamara"
          onClick={() =>
            this.chooseImage({
              sizeType: ['original'],
              sourceType: ['camera'],
            })
          }
        >
          选择图片（相机）
        </button>
        <h3>扫码</h3>
        <button
          id="scan"
          onClick={() =>
            this.getScan({ onlyFromCamera: true, scanType: 'qrCode', handleResult: 0 })
          }
        >
          扫描二维码
        </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="face" onClick={this.getLiveFace}>
          人脸识别
        </button>
        <h3>网络</h3>
        <button id="network" onClick={this.getNetwork}>
          获取网络状态
        </button>
        <h3>位置</h3>
        <button id="getLocation" onClick={() => this.getLocation({ type: 'wgs84' })}>
          获取位置
        </button>
        <button id="openMap" onClick={this.openMap}>
          打开地图
        </button>

        <h3>手机震动</h3>
        <button id="getShock" onClick={this.getShock}>
          手机震动
        </button>
        <h3>复制</h3>
        <button id="copy" onClick={() => this.getCopy({ data: '思源集团' })}>
          复制内容到剪贴板
        </button>
        <input></input>
        <h3>横竖屏切换</h3>
        <button id="getSwitchScreen" onClick={() => this.getSwitchScreen({ orientation: '1' })}>
          横屏
        </button>
        <button id="getSwitchScreen" onClick={() => this.getSwitchScreen({ orientation: '0' })}>
          竖屏
        </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);