sdk-h5-weixin.js 5.6 KB

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