sdk-h5-weixin.js 5.0 KB

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