toon协议，微信，支付宝api统一封装
为了方便微信与支付宝小程序调用e福州相关H5页面，将toon协议与微信、支付宝共有的jssdk封装成统一的js方法，方便开发者调用。
注意：在微信、支付宝端使用api需要页面内引入第三方js库，微信端使用需要页面域名在公众号后台有注册js安全域名。微信端wx.config里已默认引入所有api配置，如有需要额外微信端api调用可直接使用，无需再次调用 wx.config
引入闽政通、微信、支付宝第三方jssdk库
// 在html头部引入如下js
<script src="https://syother.efzhou.com/fz-toonMixin/test/js/insert.js"></script>
// insert.js 会根据当前浏览器ua判断平台自动插入第三方需要的sdk依赖
demo演示
扫描二维码查看demo页面
开始
在页面中引入 <script src="https://syother.efzhou.com/fz-toonMixin/dist/toonMixin.min.js"></script> 后，就可以开始api的调用(此处js需要再insert.js之后引入)：
/***
const toon = new TOONMIXIN('wechat') 传入参数可以设定默认平台，用于调试
wechat -- 微信
alipay -- 支付宝
toon -- toon平台（e福州）
mzt -- 闽政通
***/
const toon = new TOONMIXIN()
toon.wechatDebug = true // 用于开启微信调试，默认为 false 生成模式需要设置为 false
...
toon.chooseImage({ // 选择图片
maxCount: 4,
functionType: 2,
ratio: 1
}).then(resp => {
img.setAttribute('src', resp.images[0])
}).catch(err => {
console.log(err)
})
...
也可以使用umd和commonjs2模块
import TOONMIXIN from './toonMixin.umd' // 或使用 import TOONMIXIN from './toonMixin.common'
/***
const toon = new TOONMIXIN('wechat') 传入参数可以设定默认平台，用于调试
wechat -- 微信
alipay -- 支付宝
toon -- toon平台（e福州）
mzt -- 闽政通
***/
const toon = new TOONMIXIN()
toon.wechatDebug = true // 用于开启微信调试，默认为 false 生成模式需要设置为 false
...
toon.chooseImage({ // 选择图片
maxCount: 4,
functionType: 2,
ratio: 1
}).then(resp => {
img.setAttribute('src', resp.images[0])
}).catch(err => {
console.log(err)
})
...
立即执行方法
toon.complete(callback)
由于微信的配置是异步请求，如果微信端希望在调用toonMixin以后直接调用api方法需要在wx.ready()里回调，为了统一api调用，提供一个complete方法来统一执行需要立即执行的回调。
注意，只有需要立即执行的方法才需要写入
complete方法回调函数中，对于用户触发时才调用的接口，则可以直接调用，不需要放在complete函数中！
示例
// 错误示例
const toon = new TOONMIXIN()
toon.getLocation().then(resp => {
...
})
// 此时微信端由于微信的config配置为异步操作，直接调用toon.getLocation方法将会失败
// 正确示例
const toon = new TOONMIXIN()
toon.complete(() => {
// callback 内容,此处可直接使用 toon.xxx 的方法
toon.getLocation().then(resp => {
...
})
})
媒体
图片选择
调起图片选择接口，通过传入参数限制选择图片数量，以及手机相册或相机的选择。
| 参数名 | 含义 | 参数值 | 是否必传 |
|---|---|---|---|
| functionType | 功能类型 | 0-直接调用相机 1-直接从相册选择 2-弹出选择框，相机或者相册 （默认值 2 ） |
否 |
| maxCount | 允许上传图片的最大数量 | 默认9张 | 否 |
| ratio | 图片质量压缩率，表示压缩至原图质量的比例 | 0-1之间的小数（不包含0），1表示不压缩。不传默认0.1 （微信支付宝无法设定压缩率） |
否 |
闽政通调用本地图片无法通过
functionType参数选择打开摄像头或相机，将统一打开相册包含相机调用的弹窗
调用示例
toon.chooseImage({ // 选择图片
maxCount: 4,
functionType: 2,
ratio: 1
}).then(resp => {
img.setAttribute('src', resp.images[0])
}).catch(err => {
console.log(err)
})
返回值
{
images: ['图片base64值']
}
扫描二维码
调起扫码接口，通过扫码获取二维码内容。
| 参数名 | 含义 | 参数值 | 是否必传 |
|---|---|---|---|
| handleResult | 功能类型 | 0-不处理扫描结果 1-客户端自动处理扫描结果 （支付宝只能获取扫码结果） |
否 |
调用示例
toon.scan({
handleResult: 0
}).then(({result}) => {
...
})
返回值
{
result: '二维码内容'
}
人脸识别
唤起人脸识别功能，返回识别成功后的base64图片。
此功能微信和支付宝暂不支持
调用示例
toon.getLiveFace().then(({liveFace}) => {
// liveFace为返回图片的base64编码
...
})
返回值
{
liveFace: '图片的base64编码'
}
网络
获取网络类型
通过app获取手机当前的网络类型(无入参)
闽政通获取网络类型如果为
wifi则返回wifi字段，如果为流量将自动弹出弹窗提示用户当前使用的是流量，此时点击继续则返wifi，点击取消将继续返回4g字段
调用示例
toon.getNetwork().then(({networkType}) => {
...
})
返回值
{
networkType: 'wifi' // 2g，3g，4g，wifi
}
位置
获取位置
获取手机当前的GPS状态(普通定位) toon，支付宝无入参
入参（微信端独有）
| 参数名 | 含义 | 参数值 | 是否必传 |
|---|---|---|---|
| type | 功能类型 | 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' | 否 |
调用示例
toon.getLocation().then(resp => {
$("#log").html(JSON.stringify(resp.data))
...
})
返回值
{
data: {
latitude: '纬度',
longitude: '经度'
}
}
打开地图
打开app内置地图查看位置
| 参数名 | 含义 | 说明 | 是否必传 |
|---|---|---|---|
| latitude | 纬度 | 地图上显示位置的纬度 | 是 |
| longitude | 经度 | 地图上显示位置的经度 | 是 |
| name | 微信支付宝独有 | 地图上显示位置名称 | 否 |
| address | 微信、支付宝、闽政通独有 | 地图上显示位置名称 | 否 |
| scale | 微信支付宝独有 | 地图缩放比例（默认最大） | 否 |
| infoUrl | 微信独有 | 在查看位置界面底部显示的超链接,可点击跳转 | 否 |
调用示例
toon.getLocation().then(resp => {
toon.openMap({ // 打开内置地图
latitude: resp.data.latitude,
longitude: resp.data.longitude,
// 以下为微信-支付宝端自有参数，用于设置位置名称
// name: '测试', // 位置名
// address: '这里是地址', // 地址详情说明
// scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大 -支付宝比缩放比例，范围3~19 默认最大
// infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转 -微信专属
})
})
返回值
无
视图
关闭窗口
关闭当前网页窗口接口（无入参）
调用示例
toon.closeWindow()
返回值
无
打开新窗口
用来打开一个新的页面
| 参数名 | 含义 | 参数值 | 是否必传 |
|---|---|---|---|
| url | 页面地址 | 新窗口页面地址 | 是 |
闽政通内打开的窗口域名需要再闽政通后台设置白名单，否则无法进入页面。
调用示例
// 微信未提供打开新窗口接口将通过 window.href = url 跳转页面
toon.openWindow('http://baidu.com')
返回值
无
分享
设置分享内容
toon.setShare
由于只有微信jssdk提供了分享功能，toon以及支付宝需要再<head>标签里引入<meta>标签来预设分享内容。toon的更多参考分享设置请参考 http://doc.open.systoon.com/toongine_devbook/#/develop/common/share
此方法支付宝和toon系统内需要预先在
head标签里设置相关meta标签才能实现。该方法只设置分享内容，不唤起分享界面！（闽政通将在页面底部弹出分享弹窗）
支付宝以及toon预设meta值示例
<!-- 需要预先在 head 标签里插入如下内容才能实现支付宝和toon系统内的分享设置 -->
<!-- 支付宝分享 -->
<meta name="Alipay:title" content="" />
<meta name="Alipay:imgUrl" content="" />
<meta name="Alipay:desc" content="" />
<meta name="Alipay:link" content="" />
<!-- toon分享 -->
<!-- 通过设置shareChannel来预设分享渠道 -->
<meta name="shareChannel" content="shareWeChat,shareWeChatCircle">
<!-- 具体分享渠道设置通过class来方便api统一设置 -->
<meta name="shareWeChatImageUrl" class="shareImgUrl" content="">
<meta name="shareWeChatCircleImageUrl" class="shareImgUrl" content="">
<meta name="shareWeChatUrl" class="shareUrl" content="">
<meta name="shareWeChatCircleUrl" class="shareUrl" content="">
<meta name="shareWeChatTitle" class="shareTitle" content="">
<meta name="shareWeChatCircleTitle" class="shareTitle" content="">
<meta name="shareWeChatText" class="shareContent" content="">
此处toon的分享meta设置需要添加
class值来方便api设置分享内容，必填！！
toon分享meta标签class值说明
由于toon协议的预设配置标签过多，
toon.setShare方法将通过class值给meta标签设置content属性实现内容设置。
| class名称 | 含义 | 是否必传 |
|---|---|---|
| shareTitle | 设置分享标题 | 是 |
| shareContent | 设置分享内容 | 是 |
| shareImgUrl | 设置分享图标 | 是 |
| shareUrl | 设置分享链接 | 是 |
入参说明
| 参数名 | 含义 | 参数值 | 是否必传 |
|---|---|---|---|
| title | 分享标题 | 分享标题 | 是 |
| content | 分享内容 | 分享内容 | 是 |
| url | 分享链接 | 分享链接 | 是 |
| imgUrl | 分享图片地址 | 分享图片地址 | 是 |
调用示例
toon.setShare({ // 设置分享内容
title: '这里是分享标题',
content: '这里是分享内容描述',
imgUrl: 'http://t100static.zhengtoon.com/fz-toonMixin/test/images/qrcode.jpg', // 分享图片链接
url: location.href // 分享链接
}).then(() => { // 设置成功回调
...
})
返回值
"success"