微信小程序 请求加签名验证（MD5）

第一步：创建request.js

const Promise = require('es6-promise').Promise

const util = require('./util.js');
const utils = util.default.util.prototype;

//签名参数   这个两个参数是后台给的
const key = 'cdbbf90ec69b7f9df6ff301e58bbff1b';
const secret = 'e2f3efdd889e1bab39c981ad46993fda';

function wxPromisify(fn) {
	return function(obj = {}) {
		return new Promise((resolve, reject) => {
			obj.success = function(res) {
				//成功 (只返回res.data)
				resolve(res.data)
				setTimeout(function(){
					wx.hideLoading();
				},200)
			}
			obj.fail = function(res) {
				//失败
				reject(res)
				setTimeout(function(){
					wx.hideLoading();
				},200)
			}
			fn(obj)
		})
	}
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function(callback) {
	let P = this.constructor;
	return this.then(
		value => P.resolve(callback()).then(() => value),
		reason => P.resolve(callback()).then(() => {
			throw reason
		})
	);
};
/**
 * 微信请求get方法
 * url
 * data 以对象的格式传入
 */
function getRequest(url, data) {
        //这里的data是根据后台需要传
        //请求机型
        data.device = 'xcx';
        //版本号
	data.version = 'v1.0.3';
    //时间戳
    data.timestamp = Date.parse(new Date()) / 1000;
    //验证key
    data.api_key = key;
        //这里引用工具类的sign方法拼接 data数据/key/和秘钥
	data.api_sign = utils.sign(data,key,secret);
	var getRequest = wxPromisify(wx.request)
	return getRequest({
		url: url,
		method: 'GET',
		data: data,
		header: {
			'Content-Type': 'application/json'
		}
	})
}

/**
 * 微信请求post方法封装
 * url
 * data 以对象的格式传入
 */
function postRequest(url, data) {
	data.device = 'xcx';
	data.version = 'v1.0.3';
    data.timestamp = Date.parse(new Date()) / 1000;
    data.api_key = key;
	data.api_sign = utils.sign(data,key,secret);
	var postRequest = wxPromisify(wx.request)
	return postRequest({
		url: url,
		method: 'POST',
		data: data,
		header: {
			"content-type": "application/x-www-form-urlencoded"
		},
	})
}



/**
   * 获取get的URL
   */
 function  getRquestUrl(url, data) {
	var signArr = [];
	for(var x in data){
		let signStr = x +'='+ data[x];
		signArr.push(signStr)
	}
	
	var signString = '';
	for(var x in signArr){
		if(parseInt(x)+1 == 1){
			signString += signArr[x].toString();
		}
		else{
			signString += "&"+signArr[x].toString();
		}
	}
    return url + "?"+signString;
  }


	


module.exports = {
	postRequest: postRequest,
	getRequest: getRequest,
	getRquestUrl:getRquestUrl
}

这里以微信自带请求方法为主

 

第二步:创建util.js

  1、先引入 md5 插件    

    $  yarn add md5 -s

//引入md5签名
import md5 from 'js-md5'

class util {

	
	
	/**
     * 签名
	 */
	sign(data,key,secret) {
	    var str = ''
	    var data = this.objKeySort(data);
	    for (var p in data) {
	      str = str + p + data[p];
	    }
	    var str = key + str + secret
	    return md5(str).toLowerCase();
	}
	
	objKeySort(arys) {
	    var newkey = Object.keys(arys).sort();
	    var newObj = {};
	    for (var i = 0; i < newkey.length; i++) {
	      newObj[newkey[i]] = arys[newkey[i]];
	    }
	    return newObj;
	}
		
		
		
}

export default {
	util: util
}

第三步：创建api.js 

import requestAll from './request' // 此处，引入存放对promise处理的文件


const apiUrl = process.env.BASE_URL+'qdapi/?act=';
const webUrl = process.env.BASE_URL;
const baseUrl = apiUrl + '?act=';
class api {
	
	//获取url补充静态资源
	getUrl() {
		return webUrl;
	}

	//登录
	login(code,encryptedData,iv,phone){
		let data ={
			code,
			encryptedData,
			iv,
			phone
		};
		return requestAll.getRequest(apiUrl + 'passport/xcxLogin', data);
	}
	
}

export default {
	api:api
}

第四步：MpVue直接在main.js //接口
import api from './utils/api'
Vue.prototype.$api = api

 

然后再页面直接调用 

this.$api.api.prototype.login('传参’)

 .then(res =>{

});

 

以上内容只是个人记录，不懂可以私信，