|
|
@@ -0,0 +1,450 @@
|
|
|
+declare const wx: any
|
|
|
+declare const WeixinJSBridge: any
|
|
|
+
|
|
|
+// 官方文档
|
|
|
+// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
|
|
|
+
|
|
|
+// 参考1: https://github.com/wxt365/JWeixinApi/blob/master/jweixinapi.js
|
|
|
+// 参考2: https://my.oschina.net/u/2405644/blog/492396
|
|
|
+class WeiXinSDK {
|
|
|
+ env = {
|
|
|
+ // 微信JSSDK版本
|
|
|
+ version: '1.6.0',
|
|
|
+ isWeiXinBrowser: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
|
|
|
+ }
|
|
|
+
|
|
|
+ config = {
|
|
|
+ // 是否开启调试
|
|
|
+ WeiXinDebugMode: false,
|
|
|
+ // 当前url(发送到后端进行注册的，包含参数)
|
|
|
+ configUrl: location.href.split('#')[0],
|
|
|
+ // 分享配置文件中的url
|
|
|
+ shareUrl: location.href.split('?')[0],
|
|
|
+ configData: {
|
|
|
+ // 公众号的唯一标识
|
|
|
+ appId: '',
|
|
|
+ // 生成签名的时间戳
|
|
|
+ timestamp: '',
|
|
|
+ // 生成签名的随机串
|
|
|
+ nonceStr: '',
|
|
|
+ // 签名，见附录1
|
|
|
+ signature: ''
|
|
|
+ },
|
|
|
+ jsApiList: [
|
|
|
+ // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
+ 'updateAppMessageShareData',
|
|
|
+ // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
|
|
|
+ 'updateTimelineShareData',
|
|
|
+ // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
|
|
|
+ // 'onMenuShareWeibo',
|
|
|
+ // 图片预览
|
|
|
+ // 'imagePreview',
|
|
|
+ // 获取网络状态接口
|
|
|
+ // 'getNetworkType',
|
|
|
+ // 获取地理位置接口
|
|
|
+ // 'getLocation',
|
|
|
+ // 使用微信内置地图<查看>位置接口
|
|
|
+ // 'openLocation',
|
|
|
+ // 批量隐藏功能按钮接口
|
|
|
+ // 'hideMenuItems',
|
|
|
+ // 批量显示功能按钮接口
|
|
|
+ // 'showMenuItems',
|
|
|
+ // 隐藏所有非基础按钮接口
|
|
|
+ // 'hideAllNonBaseMenuItem',
|
|
|
+ // 显示所有功能按钮接口
|
|
|
+ // 'showAllNonBaseMenuItem',
|
|
|
+ // 调起微信扫一扫接口
|
|
|
+ // 'scanQRCode',
|
|
|
+ // 关闭当前网页窗口接口
|
|
|
+ 'closeWindow',
|
|
|
+ // 发起一个微信支付请求
|
|
|
+ 'chooseWXPay'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ currentLocation = {
|
|
|
+ // 纬度，浮点数，范围为90 ~ -90
|
|
|
+ latitude: 0,
|
|
|
+ // 经度，浮点数，范围为180 ~ -180
|
|
|
+ longitude: 0,
|
|
|
+ // 速度，以米/每秒计
|
|
|
+ speed: 0,
|
|
|
+ // 位置精度
|
|
|
+ accuracy: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ defaultShareInfo = {
|
|
|
+ // 分享标题
|
|
|
+ title: '剑鱼标讯',
|
|
|
+ // 分享描述
|
|
|
+ desc: '全国招标信息免费看，不遮挡',
|
|
|
+ // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
+ link: this.config.shareUrl,
|
|
|
+ // 分享图标
|
|
|
+ imgUrl: 'https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg'
|
|
|
+ }
|
|
|
+
|
|
|
+ constructor (data: object) {
|
|
|
+ if (!this.env.isWeiXinBrowser) return
|
|
|
+ this.initSignature(data)
|
|
|
+ }
|
|
|
+
|
|
|
+ initSignature (data: object) {
|
|
|
+ this.setConfigData(data)
|
|
|
+ this.setConfig()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 将constructor中传入的值赋值到全局
|
|
|
+ setConfigData (data: any) {
|
|
|
+ for (const key in this.config.configData) {
|
|
|
+ const d = this.config.configData as any
|
|
|
+ d[key] = data[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // wxJSSDK注册
|
|
|
+ setConfig () {
|
|
|
+ wx.config({
|
|
|
+ // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
|
+ debug: this.config.WeiXinDebugMode,
|
|
|
+ // // 必填，公众号的唯一标识
|
|
|
+ // appId: data.appId,
|
|
|
+ // // 必填，生成签名的时间戳
|
|
|
+ // timestamp: data.timestamp,
|
|
|
+ // // 必填，生成签名的随机串
|
|
|
+ // nonceStr: data.nonceStr,
|
|
|
+ // // 必填，签名，见附录1
|
|
|
+ // signature: data.signature,
|
|
|
+ ...this.config.configData,
|
|
|
+ // 必填，需要使用的JS接口列表
|
|
|
+ jsApiList: this.config.jsApiList
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 将分享数据整理
|
|
|
+ getShareInfo (data: any) {
|
|
|
+ // 如果是null或者空对象
|
|
|
+ if (!data || (data && Object.keys(data).length === 0)) {
|
|
|
+ return this.defaultShareInfo
|
|
|
+ } else {
|
|
|
+ const shareInfo = JSON.parse(JSON.stringify(this.defaultShareInfo))
|
|
|
+ for (const key in shareInfo) {
|
|
|
+ if (data[key]) {
|
|
|
+ shareInfo[key] = data[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return shareInfo
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查微信api是否可用
|
|
|
+ checkJsApi (apiList: any = [], callback?: Function) {
|
|
|
+ apiList = apiList.length === 0 ? this.config.jsApiList : apiList
|
|
|
+ wx.checkJsApi({
|
|
|
+ // 需要检测的JS接口列表
|
|
|
+ jsApiList: apiList,
|
|
|
+ success: (res: any) => {
|
|
|
+ // 以键值对的形式返回，可用的api值true，不可用为false
|
|
|
+ // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
|
|
|
+ console.log(res)
|
|
|
+ callback && callback(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ ready (callback?: Function) {
|
|
|
+ wx.ready(() => {
|
|
|
+ if (typeof callback === 'function') {
|
|
|
+ // callback && callback.call(this)
|
|
|
+ callback && callback()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
+ shareToFriendAndQQ (options: any = {}) {
|
|
|
+ // 如果不传配置，就使用默认的配置
|
|
|
+ const config = this.getShareInfo(options.config)
|
|
|
+ // 执行分享
|
|
|
+ this.ready(() => {
|
|
|
+ wx.updateAppMessageShareData({
|
|
|
+ ...config,
|
|
|
+ // title: config.title,
|
|
|
+ // desc: config.desc,
|
|
|
+ // link: config.link,
|
|
|
+ // imgUrl: config.imgUrl,
|
|
|
+ success: () => {
|
|
|
+ // 用户确认分享后执行的回调函数
|
|
|
+ options && options.success && options.success()
|
|
|
+ },
|
|
|
+ cancel: () => {
|
|
|
+ // 用户取消分享后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail()
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
|
|
|
+ shareToFriendsAndQZone (options: any = {}) {
|
|
|
+ // 如果不传配置，就使用默认的配置
|
|
|
+ const config = this.getShareInfo(options.config)
|
|
|
+ // 执行分享
|
|
|
+ this.ready(() => {
|
|
|
+ wx.updateTimelineShareData({
|
|
|
+ ...config,
|
|
|
+ // title: config.title,
|
|
|
+ // desc: config.desc,
|
|
|
+ // link: config.link,
|
|
|
+ // imgUrl: config.imgUrl,
|
|
|
+ success: () => {
|
|
|
+ // 用户确认分享后执行的回调函数
|
|
|
+ options && options.success && options.success()
|
|
|
+ },
|
|
|
+ cancel: () => {
|
|
|
+ // 用户取消分享后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail()
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 自定义“分享到微博”
|
|
|
+ shareToWeiBo (options: any = {}) {
|
|
|
+ // 如果不传配置，就使用默认的配置
|
|
|
+ const config = this.getShareInfo(options.config)
|
|
|
+ // 执行分享
|
|
|
+ wx.onMenuShareWeibo({
|
|
|
+ ...config,
|
|
|
+ // title: config.title,
|
|
|
+ // desc: config.desc,
|
|
|
+ // link: config.link,
|
|
|
+ // imgUrl: config.imgUrl,
|
|
|
+ success: () => {
|
|
|
+ // 用户确认分享后执行的回调函数
|
|
|
+ options && options.success && options.success()
|
|
|
+ },
|
|
|
+ cancel: () => {
|
|
|
+ // 用户取消分享后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail()
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 微信js-sdk支付
|
|
|
+ chooseWXPay (options: any) {
|
|
|
+ // 执行支付
|
|
|
+ wx.chooseWXPay({
|
|
|
+ // appId: this.config.configData.appId,
|
|
|
+ ...options.config,
|
|
|
+ // timestamp: config.timestamp,
|
|
|
+ // nonceStr: config.nonceStr,
|
|
|
+ // package: config.package,
|
|
|
+ // signType: config.signType,
|
|
|
+ // paySign: config.paySign,
|
|
|
+ success: () => {
|
|
|
+ // 用户确认支付后执行的回调函数
|
|
|
+ options && options.success && options.success()
|
|
|
+ },
|
|
|
+ cancel: () => {
|
|
|
+ // 用户取消支付后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail()
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
|
|
|
+ chooseWXPayForWeiXinJSBridge (options: any) {
|
|
|
+ // 调用WeixinJSBridge支付
|
|
|
+ WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
|
|
+ appId: options.config.appId,
|
|
|
+ timeStamp: options.config.timestamp,
|
|
|
+ nonceStr: options.config.nonceStr,
|
|
|
+ package: options.config.package,
|
|
|
+ signType: options.config.signType,
|
|
|
+ paySign: options.config.paySign
|
|
|
+ }, (res: any) => {
|
|
|
+ if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
|
|
+ // 使用以上方式判断前端返回,微信团队郑重提示：
|
|
|
+ // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
|
|
+ options && options.success && options.success()
|
|
|
+ } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
|
|
|
+ options && options.cancel && options.cancel()
|
|
|
+ } else {
|
|
|
+ options && options.fail && options.fail()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ closeWindow () {
|
|
|
+ wx.closeWindow()
|
|
|
+ }
|
|
|
+
|
|
|
+ hideOptionMenu () {
|
|
|
+ wx.hideOptionMenu()
|
|
|
+ }
|
|
|
+
|
|
|
+ showOptionMenu () {
|
|
|
+ wx.showOptionMenu()
|
|
|
+ }
|
|
|
+
|
|
|
+ hideMenuItems (menuList = []) {
|
|
|
+ // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
|
|
|
+ wx.hideMenuItems({
|
|
|
+ menuList
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ showMenuItems (menuList = []) {
|
|
|
+ // 要显示的菜单项，所有menu项见附录3
|
|
|
+ wx.showMenuItems({
|
|
|
+ menuList
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ hideAllNonBaseMenuItem () {
|
|
|
+ wx.hideAllNonBaseMenuItem()
|
|
|
+ }
|
|
|
+
|
|
|
+ showAllNonBaseMenuItem () {
|
|
|
+ wx.showAllNonBaseMenuItem()
|
|
|
+ }
|
|
|
+
|
|
|
+ getNetworkType (options: any) {
|
|
|
+ wx.getNetworkType({
|
|
|
+ success: (res: any) => {
|
|
|
+ // 用户确认支付后执行的回调函数
|
|
|
+ // 返回网络类型2g，3g，4g，wifi
|
|
|
+ options && options.success && options.success(res)
|
|
|
+ },
|
|
|
+ cancel: () => {
|
|
|
+ // 用户取消支付后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail()
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 调起微信Native的图片播放组件。
|
|
|
+ * 这里必须对参数进行强检测，如果参数不合法，直接会导致微信客户端crash
|
|
|
+ *
|
|
|
+ * @param {String} curSrc 当前播放的图片地址
|
|
|
+ * @param {Array} srcList 图片地址列表
|
|
|
+ */
|
|
|
+ imagePreview (curSrc: string, srcList: Array<string>) {
|
|
|
+ if (!curSrc || !srcList || srcList.length === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ wx.previewImage({
|
|
|
+ // 当前显示图片的http地址
|
|
|
+ current: curSrc,
|
|
|
+ // 需要预览的图片http地址列表
|
|
|
+ urls: srcList
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ getLocation (options: any) {
|
|
|
+ wx.getLocation({
|
|
|
+ // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
|
|
|
+ type: options.type === undefined ? 'wgs84' : options.type,
|
|
|
+ success: (res: any) => {
|
|
|
+ // for (const key in this.currentLocation) {
|
|
|
+ // this.currentLocation[key] = res[key]
|
|
|
+ // }
|
|
|
+ this.currentLocation = res
|
|
|
+ options && options.success && options.success(res)
|
|
|
+ },
|
|
|
+ cancel: (res: any) => {
|
|
|
+ // 用户取消支付后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel(res)
|
|
|
+ },
|
|
|
+ fail: (res: any) => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail(res)
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ openLocation (data: object) {
|
|
|
+ wx.openLocation({
|
|
|
+ ...data
|
|
|
+ // latitude: 0, // 纬度，浮点数，范围为90 ~ -90
|
|
|
+ // longitude: 0, // 经度，浮点数，范围为180 ~ -180。
|
|
|
+ // name: '', // 位置名
|
|
|
+ // address: '', // 地址详情说明
|
|
|
+ // scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
|
|
|
+ // infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调起微信扫一扫接口
|
|
|
+ scanQRCode (options: any) {
|
|
|
+ wx.scanQRCode({
|
|
|
+ needResult: options.needResult === undefined ? 0 : options.needResult, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
|
|
|
+ scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
|
|
|
+ success: (res: any) => {
|
|
|
+ // 当needResult 为 1 时，扫码返回的结果
|
|
|
+ console.log(res.resultStr)
|
|
|
+ options && options.success && options.success(res)
|
|
|
+ },
|
|
|
+ cancel: (res: any) => {
|
|
|
+ // 用户取消支付后执行的回调函数
|
|
|
+ options && options.cancel && options.cancel(res)
|
|
|
+ },
|
|
|
+ fail: (res: any) => {
|
|
|
+ // 接口调用失败时执行的回调函数
|
|
|
+ options && options.fail && options.fail(res)
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
|
|
|
+ options && options.complete && options.complete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default WeiXinSDK
|
xgwangman