微信公众号使用wx.config前端如何配置参数

需引用 jweixin-1.6.0.js 文件

npm install weixin-js-sdk

概述 | 微信开放文档

1. wx.config({
2. debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
3. appId: '', // 必填，公众号的唯一标识
4. timestamp: , // 必填，生成签名的时间戳
5. nonceStr: '', // 必填，生成签名的随机串
6. signature: '',// 必填，签名
7. jsApiList: [] // 必填，需要使用的JS接口列表
8. });

        1.获取第一个参数生成签名的时间戳（其实就是获取当前时间）

// 时间戳
String timestamp = Long.toString((new Date().getTime()) / 1000);

        2.获取第二个签名随机串

// 随机串   (java实现方法，前端可忽略)
String nonceStr = UUID.randomUUID().toString();

        3.获取第三个参数签名

      签名 = 随机串 + ticket + 时间戳 + URL（当前页面），但是随机串和时间戳我们在上边已经获取到了，下边我们只获取 ticket和当前页面的 URL 就好了，最后把他们拼到一起（后端实现）

公众号H5中wx.config()踩坑

• 微信公众号H5在配置微信参数的时候提示config:fail,Error: 系统错误错误码63002,invalid signature，表示签名有问题。签名的影响因素很多，但对于前端，最大的影响因素就是url参数要给对。url参数需要注意的两个点：

        1.需要公众号安全域名配置

        [公众号平台 => 设置与开发 => 公众号设置 => 功能设置 => JS接口安全域名]

        2.url 不能写死，哈希部分不要，如果需要哈希也就是#号后面的地址，那就修改模式为history。如果是vue项目使用了  vue-router  则需要在  vue.config.js  或  main.js  文件中修改模式

vue.config.js：

1. module.exports = {
2. devServer: {
3. mode:history
4. }
5. }

main.js：

1. import Vue from 'vue'
2. import Router from 'vue-router'
4. Vue.use(Router)
7. const router = new Router({
8. mode: 'history', // 这里设置为 history 模式
9. routes
10. })

        3.前端计算签名的方法

1. 从[公众号平台 => 设置与开发 => 开发 => 基本配置]获取开发者ID(AppID)和开发者密码(AppSecret)
2. 通过微信公众平台接口（https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET）获取access_token
   1. 通过微信公众平台接口（ https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi ）获取jsapi_ticket
3. 使用微信 JS 接口签名校验工具（   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign）计算签名
4. 最后生成的签名和其他参数在wx.config()中调试即可。

公众号H5中wx.config()踩坑 - 简书 (jianshu.com)https://www.jianshu.com/p/c238a04f531e

注：如果我们是前端自测的话需下载        jssha        签名算法

npm i -save jssha

 具体步骤为：

        1.先使用微信公众平台接口  https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET  传入APPID和AppSecret获取token。（设置与开发 —> 基本配置 —> 公众号开发者信息获取并AppID 和 AppSecret）

        2.获取到token之后调用微信公众平台接口   https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi  获取ticket。

        3.当我们获取到token和ticket之后我们需要用到  jssha  签名算法得到签名signature

        4.至此我们就可以把获取到底参数填入wx.config配置中。

1. const APPID = process.uniEnv.WX_APPID
2. const SECRET = process.uniEnv.WX_SECRET
4. export function () {
5. /**
6. * 微信公众号
7. * 使用 APPID，SECRET 生成鉴权签名（Access Token）
8. * @return string 鉴权签名信息（Access Token）
9. */
10. let tokenUrl = '/token?grant_type=client_credential&appid='+APPID +
11. '&secret=' + SECRET
12. /**
13. * 微信公众号
14. * 使用 Access Token 获取jsapi_ticket
15. * @return string jsapi_ticket
16. */
17. let ticketUrl = '/ticket/getticket?type=jsapi&access_token=' + accessToken
18. }

1. import jsSHA from 'jssha';
3. const APPID = process.uniEnv.WX_APPID
4. const SECRET = process.uniEnv.WX_SECRET
6. /**
7. * 微信公众号
8. * 使用 APPID，SECRET 生成鉴权签名（Access Token）
9. * @return string 鉴权签名信息（Access Token）
10. */
11. export function getTokenTicket() {
12. let tokenUrl = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+APPID +
13. '&secret=' + SECRET
14. return tokenUrl
15. }
17. /**
18. * 微信公众号
19. * 使用 Access Token 获取jsapi_ticket
20. * @return string jsapi_ticket
21. */
22. export function getTokenTicket(token) {
23. let ticketUrl = '/ticket/getticket?type=jsapi&access_token=' + accessToken
24. return ticketUrl
25. }
27. //生成签名的随机串
28. export function createNonceStr () {
29. return Math.random().toString(36).substr(2, 15);
30. };
32. //生成签名的时间戳
33. export function createTimestamp () {
34. return parseInt(new Date().getTime() / 1000) + '';
35. };
37. var raw = function(args) {
38. var keys = Object.keys(args);
39. keys = keys.sort()
40. var newArgs = {};
41. keys.forEach(function(key) {
42. newArgs[key.toLowerCase()] = args[key];
43. });
45. var string = '';
46. for (var k in newArgs) {
47. string += '&' + k + '=' + newArgs[k];
48. }
49. string = string.substr(1);
50. return string;
51. };
53. /**
54. * @synopsis 签名算法
55. *
56. * @param jsapi_ticket 用于签名的 jsapi_ticket
57. * @param url 用于签名的 url ，注意必须动态获取
58. *
59. * @returns
60. */
61. export function sign(jsapi_ticket, url) {
62. var ret = {
63. jsapi_ticket: jsapi_ticket,
64. nonceStr: createNonceStr(),
65. timestamp: createTimestamp(),
66. url: url
67. };
68. var string = raw(ret);
69. // jsSHA = require('jssha');
70. let shaObj = new jsSHA(string, 'TEXT');
71. ret.signature = shaObj.getHash('SHA-1', 'HEX');
72. return ret;
73. };
74. }

暂未完善！！！！！！！！！！！！