sdk-h5-weixin.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /**
  2. * 本模块封装微信浏览器下的一些方法。
  3. * 更多微信网页开发sdk方法,详见:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
  4. * 有 the permission value is offline verifying 报错请参考 @see https://segmentfault.com/a/1190000042289419 解决
  5. */
  6. import jweixin from 'weixin-js-sdk';
  7. import $helper from '@/sheep/helper';
  8. import AuthUtil from '@/sheep/api/member/auth';
  9. let configSuccess = false;
  10. export default {
  11. // 判断是否在微信中
  12. isWechat() {
  13. const ua = window.navigator.userAgent.toLowerCase();
  14. // noinspection EqualityComparisonWithCoercionJS
  15. return ua.match(/micromessenger/i) == 'micromessenger';
  16. },
  17. isReady(api) {
  18. jweixin.ready(api);
  19. },
  20. // 初始化 JSSDK
  21. async init(callback) {
  22. if (!this.isWechat()) {
  23. $helper.toast('请使用微信网页浏览器打开');
  24. return;
  25. }
  26. // 调用后端接口,获得 JSSDK 初始化所需的签名
  27. const url = location.href.split('#')[0];
  28. const { code, data } = await AuthUtil.createWeixinMpJsapiSignature(url);
  29. if (code === 0) {
  30. jweixin.config({
  31. debug: false,
  32. appId: data.appId,
  33. timestamp: data.timestamp,
  34. nonceStr: data.nonceStr,
  35. signature: data.signature,
  36. jsApiList: [
  37. 'chooseWXPay',
  38. 'openLocation',
  39. 'getLocation',
  40. 'updateTimelineShareData',
  41. 'scanQRCode',
  42. ], // TODO 芋艿:后续可以设置更多权限;
  43. openTagList: data.openTagList,
  44. });
  45. }
  46. // 监听结果
  47. configSuccess = true;
  48. jweixin.error((err) => {
  49. configSuccess = false;
  50. console.error('微信 JSSDK 初始化失败', err);
  51. // $helper.toast('微信JSSDK:' + err.errMsg);
  52. });
  53. jweixin.ready(() => {
  54. if (configSuccess) {
  55. console.log('微信 JSSDK 初始化成功');
  56. }
  57. });
  58. // 回调
  59. if (callback) {
  60. callback(data);
  61. }
  62. },
  63. //在需要定位页面调用 TODO 芋艿:未测试
  64. getLocation(callback) {
  65. this.isReady(() => {
  66. jweixin.getLocation({
  67. type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  68. success: function (res) {
  69. callback(res);
  70. },
  71. fail: function (res) {
  72. console.log('%c微信H5sdk,getLocation失败:', 'color:green;background:yellow');
  73. },
  74. });
  75. });
  76. },
  77. //获取微信收货地址 TODO 芋艿:未测试
  78. openAddress(callback) {
  79. this.isReady(() => {
  80. jweixin.openAddress({
  81. success: function (res) {
  82. callback.success && callback.success(res);
  83. },
  84. fail: function (err) {
  85. callback.error && callback.error(err);
  86. console.log('%c微信H5sdk,openAddress失败:', 'color:green;background:yellow');
  87. },
  88. complete: function (res) {},
  89. });
  90. });
  91. },
  92. // 微信扫码 TODO 芋艿:未测试
  93. scanQRCode(callback) {
  94. this.isReady(() => {
  95. jweixin.scanQRCode({
  96. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  97. scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
  98. success: function (res) {
  99. callback(res);
  100. },
  101. fail: function (res) {
  102. console.log('%c微信H5sdk,scanQRCode失败:', 'color:green;background:yellow');
  103. },
  104. });
  105. });
  106. },
  107. // 更新微信分享信息 TODO 芋艿:未测试
  108. updateShareInfo(data, callback = null) {
  109. this.isReady(() => {
  110. const shareData = {
  111. title: data.title,
  112. desc: data.desc,
  113. link: data.link,
  114. imgUrl: data.image,
  115. success: function (res) {
  116. if (callback) {
  117. callback(res);
  118. }
  119. // 分享后的一些操作,比如分享统计等等
  120. },
  121. cancel: function (res) {},
  122. };
  123. // 新版 分享聊天api
  124. jweixin.updateAppMessageShareData(shareData);
  125. // 新版 分享到朋友圈api
  126. jweixin.updateTimelineShareData(shareData);
  127. });
  128. },
  129. // 打开坐标位置 TODO 芋艿:未测试
  130. openLocation(data, callback) {
  131. this.isReady(() => {
  132. jweixin.openLocation({
  133. ...data,
  134. success: function (res) {
  135. console.log(res);
  136. },
  137. });
  138. });
  139. },
  140. // 选择图片 TODO 芋艿:未测试
  141. chooseImage(callback) {
  142. this.isReady(() => {
  143. jweixin.chooseImage({
  144. count: 1,
  145. sizeType: ['compressed'],
  146. sourceType: ['album'],
  147. success: function (rs) {
  148. callback(rs);
  149. },
  150. });
  151. });
  152. },
  153. // 微信支付
  154. wxpay(data, callback) {
  155. this.isReady(() => {
  156. jweixin.chooseWXPay({
  157. timestamp: data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  158. nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位
  159. package: data.packageValue, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
  160. signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
  161. paySign: data.paySign, // 支付签名
  162. success: function (res) {
  163. callback.success && callback.success(res);
  164. },
  165. fail: function (err) {
  166. callback.fail && callback.fail(err);
  167. },
  168. cancel: function (err) {
  169. callback.cancel && callback.cancel(err);
  170. },
  171. });
  172. });
  173. },
  174. };