2019-03-12 13:03:28 hjflyblue 阅读数 2544
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒
  • 说明

应用签名:用于对当前应用进行二次身份校验,开发者可以使用签名生成工具直接从安装当前应用的手机中获取。应用签名由开发者签名该应用的keystore文件决定

注意:需要取md5码

  • 方法1

(1)到微信开发平台,下载签名生成工具,Android资源下载签名生成工具

(2)把你的app安装到手机,并安装签名生成工具

(3)打开工具,输入包名,如图

  • 方法2

使用keytool命令:keytool -list -v -keystore your.keystore

 

2016-07-14 09:18:03 cxb0y 阅读数 829
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

在运行里输入CMD

我把JKS文件放在了E盘里

然后在命令行里输入 E:切换到E盘里

再输入keytool -list -v -keystore 签名.jks 后按回车

出来显示的MD5就是微信里要用的应该签名但是要注意 把冒号去掉然后把大写字母改成小写就是微信所要的应用签名

最后就提交审核吧


2016-11-07 10:54:04 huang3513 阅读数 2904
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

微信开发者平台
1.移动应用的创建
(1)填写基本信息(应用的基本内容、应用的App图标等)
(2)填写平台信息(应用的官网、应用的平台(ios、android、wp8应用))其中要有应用签名、应用报名填写
(3)提交成功
这里写图片描述

2.提交成功之后可以进行查询填写的资料,会有7天的待审核时间,如下图:
这里写图片描述

3.申请通过的界面如下图(其中获得了朋友圈分享以及微信好友):
这里写图片描述
4.现在完成了应用创建,那么接下来就可以在你的android项目中继承你的微信朋友圈和微信好友的分享了。

2018-09-21 10:53:24 whisperZhou 阅读数 807
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

vue通过NodeJs本地获取微信access_token及签名,并调用微信接口

一直都想搞一下微信公众号网页开发,公司忙没有时间自己也没开发过所以也没有头绪,前两天通过自己的摸索以及自行查找的资料,终于通过nodejs在本地成功的获取到了微信的access_token及签名,以及调用微信的接口.因为笔者自己在做的时候费了挺长时间,没有找到一个相对完整,详细的一个项目借鉴,有很多的坑,所以下面我将详细的把自己做的过程给大家讲一下,从一开始的注册微信公众号到成功调用微信接口,以给那些还没有开发过经验的人借鉴,第一次写文章,文笔不好,勿怪.

1.注册一个微信公众号

怎么注册微信公众号,可以自行百度一下,网上很多注册的教程,这里就不浪费口舌了

2.开通"开发者模式"

在微信公众平台官网登录之后,我们第一步是要成为开发者,在首页点击"基本配置",右边会出现一个页面,有个"成为开发者"按钮,点击它,我这里我已经是开发者了,所以已经没有了
在这里插入图片描述

3.查看公众号基本信息

成为开发者之后,可以看到如下页面,我们可以看到自己的AppId和Appsecret(这个很重要,最好记在哪里,记在手机/笔记本都可以)
在这里插入图片描述

4.申请微信公众号测试账号

为什么申请测试账号,一因为微信公众号的接口它是有调用次数限制的,二是测试账号比较方便,可以胡来,哈哈哈,点击"开发->开发者工具",就在之前点击的"基本配置"下面(如后面出现一些点击"xxx",一般都在页面左侧),可以看到如下页面,选择"公众平台测试账号",然后我们需要用手机微信扫码登录
在这里插入图片描述

5.测试账号配置

登录成功之后,会看到下面的页面,在我圈的红色框中,填写你的域名,比如我vue本地项目启动成功后是localhost:9999,你就填localhost:9999,如果是云服务器域名,你就填你申请的域名,如www.xxx.com,上面的接口配置信息暂时可以不用配置,到这里我们已经完成了整个微信公众号测试账号的配置
在这里插入图片描述

6.创建vue项目

这里的前提是你已经安装了node并且会vue,我们通过vue-cli创建一个项目,创建项目过程的截图我就不放出来了,移步到这里查看,如果看不懂,也可以自行百度一下 哈哈哈,网上也有很多怎么通过vue-cli创建vue项目,我创建这个项目用的是vue-cli 2.0,现在已经是vue-cli 3.0,我自己也是在摸索中 哈哈…下面的图就是通过vue-cli创建的项目
在这里插入图片描述

7.node配置

注意在上图中,server文件夹是需要自行创建的,vue-cli创建的项目是没有这个文件夹的,里面放了相关的nodejs代码,接下来我们看看里面都有什么文件,下图中我给主要的文件都作了注释,其余2个是链接Mysql数据库的,我这里就不讲了,我自己也不是很会,也是参照别人的,哈哈哈,就不献丑了
在这里插入图片描述

我们先看看api.js,这里面就写了一个方法是用来获取access_token和签名的,这里用的是axios,所以在vue项目里你要安装axios.接下来我们先定义一下appId和appsecret,值就是你之前申请测试账号时的appId和appsecret,请求地址在微信开发者文档里有,移步微信开发者文档,获取到access_token之后,我们通过access_token获取微信签名(微信签名算法在sign.js,稍后我会贴出来),然后返回获取到的数据,这里的定义的config对象也可以在微信开发者文档里看,你也可以定义在前端-----我们是通过module.exports把代码暴露出去以便引用
在这里插入图片描述

微信签名算法

这个算法我也是直接百度的…经测试是可以用的…具体算法规则要去看一下微信开发者文档…这里就不说了…

var createNonceStr = function () {
  return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function () {
  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 ,注意必须动态获取,不能 hardcode
*
* @returns
*/
var sign = function (jsapi_ticket, url) {
  var ret = {
    jsapi_ticket: jsapi_ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: url
  };
  var string = raw(ret);
      jsSHA = require('jssha');
      shaObj = new jsSHA(string, 'TEXT');
  ret.signature = shaObj.getHash('SHA-1', 'HEX');

  return ret;
};

module.exports = sign;

我们再看一下router.js,代码很少,就是你前端要请求的路由地址,这里我们要用到express,所以你也要保证你的vue项目里的node_modules包里有express,没有你就安装一下,不会安装就百度(屡试不爽),反正你缺少什么模块你就安装什么模块就行了,跑题了,继续说下图中的代码,我们引入之前的api.js,然后调用express.Router(express.Router可以认为是一个微型的只用来处理中间件与控制器的 app,它拥有和 app 类似的方法,例如 get、post、all、use 等等),定义了前端请求接口地址’/getToken’,调用api.js里定义的方法,也需要把router暴露出去

在这里插入图片描述

最后我们看看index.js,这里我们把刚刚写好的router.js引入进来,把express也引入进来,并且创建一个express应用程序app(就是第4行代码),设置一下请求头和跨域还有返回的状态码,app.use()一下后端api路由,’/api’是调用中间件函数的路径,我前端用了代理,请求路径都增加了’/api’,所以后端的所有请求路径也要加上,最后app.listen(8088)监听端口号(你喜欢什么数字都行,端口号不用和我一样)

在这里插入图片描述

下面我们通过cmder(或者你用window自带的cmd命令打开DOS窗口)进入server文件夹,输入node index.js启动8088端口,看启动成功了…

在这里插入图片描述

8.启动vue项目

也通过cmder进入到vue项目所在的目录,npm run dev启动
在这里插入图片描述

9.前端环境配置

然后我在static文件夹下面创建了一个js文件夹,里面放了一个环境配置的文件
在这里插入图片描述
在这里插入图片描述

本地请求接口是localhost:8088,你也可以添加生产环境的,我这里还没添加,比如

'production': { apiRoot: 'http://www.xxx.cn:8088'}

线上的不添加后面的端口号8088不知道可不可以我还没试过…然后在index.html里引用一下
在这里插入图片描述

在"src"文件夹下创建一个api文件夹,在此文件下创建一个index.js,用来封装我们前端的请求
在这里插入图片描述
在这里插入图片描述

这里的window._ENV.apiRoot就是我在static文件夹里的环境配置文件, 之前我们已经在index.html引入过了,所以能在这里用,为什么这里要传url,因为在node里请求签名的时候签名算法那里需要

10.修改config配置

打开vue项目下的config文件夹里的index.js,设置一下代理,因为这里添加了"/api",所以后端的都要加上,修改了配置,vue项目需要重新启动一下
在这里插入图片描述

11.测试获取token及签名,并调用微信接口

我们先看看"src"文件夹里的目录结构,我把vue-cli自动创建的删了部分,然后自己创建了部分
在这里插入图片描述

我们在pages文件夹里创建一个页面组件index
在这里插入图片描述
在这里插入图片描述
下面是index.vue里的代码,这里我用到iview,所以是,还有一个非常重要,安装一下微信jssdk,npm install weixin-js-sdk --save,也可以自行百度查一下怎么安装,不然你什么功能都用不了,哈哈哈,我一开始就没安装,引入我们定义的api
在这里插入图片描述

把请求token的方法写在methods里,然后created的时候调用,我这里写了两个按钮进行测试,用到了获取地理位置,打开地址位置,微信扫一扫接口,这里除了获取地理位置,其他通过用户交互的都写在methods里
在这里插入图片描述
在这里插入图片描述

12.使用微信开发者工具调试

下载并安装一下微信开发者工具(微信开发者工具下载),用二维码登录,选择公众号网页开发,在地址栏输入你的vue启动地址,就OK了,可以查看接口是否调用成功了,这里一开始获取地理位置成功
在这里插入图片描述

点击了两个按钮之后,也是成功了看下图,哈哈哈,很开心…
在这里插入图片描述

文章到这里就结束了…大家也可以去我的github上查看我的源码(项目地址),后面我会继续写一篇《如何将node + vue 项目部署到服务器上,并调用微信接口》,大家可以先感受一些我线上的demo(线上demo),用手机微信打开,access_token一天上限是2000次,如果你没有体验成功,可能就是到上限了,也可以关注我的微信公众号,后面陆续的我会把文章发布到微信公众号上…附上公众号的二维码,目前还没有发布文章,不要嫌弃哈哈哈…如有问题可以在下面评论,或者指出我的问题,大家互相学习,谢谢…
在这里插入图片描述

2018-07-10 23:01:04 Allence_z 阅读数 5893
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒
因项目需要,需在微信浏览器中获取实时位置。使用微信jweixin-1.2.0.js初始化时(wx.config)需要签名、appID,URL等参数,本文将讲解测试环境下,初始化各项测试数据的生成。如:公众号的测试appID,appSecret,域名的配置,签名生成等。进而使用微信获取位置接口获取位置。本方案适用后台服务没开发出之前测试使用,后台服务完成后即可通过后台接口获取签名。对于微信开发测试域名及页面配置可做统一参考。

详细步骤如下:

1、登录微信公众号平台-》开发者工具-》公众平台测试帐号
通过绑定测试者微信号,成功后在公众号测试账号页面下会有测试的appID,appSecret。在页面下配置域名,测试环境下可使用内网ip,如下:


2、获取token:通过微信验证接口页面获取token。token有过期时间2小时,所以一般会在后台处理,鉴于本次为本地调试,先用临时的token。微信端获取token如下(https://mp.weixin.qq.com/debug),根据页面中需要的参数填写,在下面的返回结果中拿到token。如取到的token为${access_token}


3、获取ticket:拿到token后还需要获取ticket。浏览器中直接调用微信接口,传入步骤2中拿到的access_token,获取ticket,如果成功,浏览器返回${ticket}

4.生成签名:根据第3步的ticket,
5.页面中调用,
1)引用weixin sdk,

2)调用微信接口如下:
wx.config({
	 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
	appId: 'wxa167eea6f229d66a', // 必填,公众号的唯一标识
	timestamp: '1531224610', // 必填,生成签名的时间戳
	nonceStr: 'Wm3WZYTPz0wzccnN', // 必填,生成签名的随机串
	signature: 'e694e9fef46acac77c5647940314bb4cd094d5af',// 必填,签名
	 jsApiList: [
	    'getLocation',	//获取地理位置
	    'onMenuShareAppMessage',	//分享给朋友
	    'onMenuShareTimeline'	//分享到朋友圈
	 ] // 必填,需要使用的JS接口列表
	});
	wx.ready(function(){
	    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
	   console.log('请求成功');
	setInterval(function(){
            //请求位置
	    wx.getLocation({
		type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
		success: function (res) {
			console.log(res);
			// var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
			// var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
			// var speed = res.speed; // 速度,以米/每秒计
			// var accuracy = res.accuracy; // 位置精度
			//调用当前位置初始化方法
			// fmp.GPSlocation.initLocateInfo(res);
		}
	    });
    },3000);
});
wx.error(function(error){
	console.log('请求失败');
});
6.发布该测试页面,地址为:
http://192.168.1.236/demo.html
7.微信中访问该页面,正常返回GPS经纬度坐标。如下图所示:

至此,即可在微信中根据位置接口对接地图导航啦,基于之前有开发微信经验,这次配置起来比较顺利,存档一下。

没有更多推荐了,返回首页