微信公众号使用wx.config前端如何配置参数-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信公众号使用wx.config前端如何配置参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需引用 jweixin-1.6.0.js 文件

npm install weixin-js-sdk

概述 | 微信开放文档

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

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：

module.exports = {  
  devServer: {  
   mode:history  
  }  
}

main.js：

import Vue from 'vue'  
import Router from 'vue-router'  
  
Vue.use(Router)  

  
const router = new Router({  
  mode: 'history', // 这里设置为 history 模式  
  routes  
})

3.前端计算签名的方法

从[公众号平台 => 设置与开发 => 开发 => 基本配置]获取开发者ID(AppID)和开发者密码(AppSecret)
通过微信公众平台接口（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
使用微信 JS 接口签名校验工具（ https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign）计算签名
最后生成的签名和其他参数在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配置中。文章来源地址https://www.toymoban.com/news/detail-841821.html

const APPID = process.uniEnv.WX_APPID
const SECRET = process.uniEnv.WX_SECRET

export function () {
/**
 * 微信公众号
 * 使用 APPID，SECRET 生成鉴权签名（Access Token）
 * @return string 鉴权签名信息（Access Token）
 */
	let tokenUrl = '/token?grant_type=client_credential&appid='+APPID  +
		'&secret=' + SECRET
/**
 * 微信公众号
 * 使用 Access Token 获取jsapi_ticket
 * @return string jsapi_ticket
 */
    let ticketUrl = '/ticket/getticket?type=jsapi&access_token=' + accessToken
}

import jsSHA from 'jssha';

const APPID = process.uniEnv.WX_APPID
const SECRET = process.uniEnv.WX_SECRET

/**
 * 微信公众号
 * 使用 APPID，SECRET 生成鉴权签名（Access Token）
 * @return string 鉴权签名信息（Access Token）
 */
export function getTokenTicket() {
	let tokenUrl = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+APPID  +
		'&secret=' + SECRET
    return tokenUrl
}

/**
 * 微信公众号
 * 使用 Access Token 获取jsapi_ticket
 * @return string jsapi_ticket
 */
export function getTokenTicket(token) {
    let ticketUrl = '/ticket/getticket?type=jsapi&access_token=' + accessToken
    return ticketUrl
}

//生成签名的随机串
export function createNonceStr () {
	return Math.random().toString(36).substr(2, 15);
};

//生成签名的时间戳
export function createTimestamp () {
	return parseInt(new Date().getTime() / 1000) + '';
};

var raw = function(args) {
	var keys = Object.keys(args);
	keys = keys.sort()
	var newArgs = {};
	keys.forEach(function(key) {
		newArgs[key.toLowerCase()] = args[key];
	});

	var string = '';
	for (var k in newArgs) {
		string += '&' + k + '=' + newArgs[k];
	}
	string = string.substr(1);
	return string;
};

/**
 * @synopsis 签名算法 
 *
 * @param jsapi_ticket 用于签名的 jsapi_ticket
 * @param url 用于签名的 url ，注意必须动态获取
 *
 * @returns
 */
export function sign(jsapi_ticket, url) {
	var ret = {
		jsapi_ticket: jsapi_ticket,
		nonceStr: createNonceStr(),
		timestamp: createTimestamp(),
		url: url
	};
	    var string = raw(ret);
	    // jsSHA = require('jssha');
	    let shaObj = new jsSHA(string, 'TEXT');
	    ret.signature = shaObj.getHash('SHA-1', 'HEX');
	    return ret;
    };
}