2017-03-31 17:06:40 gb4215287 阅读数 1083
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

来源:http://www.cnblogs.com/Leo_wl/p/5983030.html

前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正。放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容。下载以后直接安装就好。

1.下载安装好以后,打开界面是这样的。

 

 

2.我们点击登录,会出现扫描二维码页面,用你自己的微信扫一下登录就可以

  

 

3.登录以后,就可以对我们的微信企业号页面进行调试,请注意!!!要想调试当前的企业号页面,你登录的微信号,必须是这个企业号的管理员(这在微信开发者工具的说明文档有写),如果不是,请在你们的企业号开发端把你的微信设置为管理员。否则在开发者工具里面将会出现下面这个页面,如图

 

   管理员设置界面如图:

   

 

在企业号管理页面添加完毕以后,会在你的手机微信端有提醒,记得按照他的提醒设置一下开发者工具的登陆密码,如果没有设置密码,你依然登陆不上去,如图所示:

 

设置完密码以后,我们点击登录,发现还是上不去,如图所示:

 

点进去以后,如图所示:

 

2.上面所有的都设置过以后,我们登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。页面如图:(关注一下移动调试)

 

3.这个工具更加强大的功能!点击窗口中的移动调试。

  3-1.如图所示,我们先选择Android设备调试--普通调试,

  

 

 

  接着我们只要按照他的提示--调试步骤设置我们的手机就可以,手机代理设置如图所示:

 

手机设置完毕代理以后,点击开发者工具页面中的开始调试就可以,很强大,我们选中的页面部分,会在手机上面实时显示出来。(自己体验一下。)

  3-2.如图所示,我们先选择Android设备调试--X5 Blink内核调试,这个功能更强大!

这一部分强烈建议看一下官网的文档说明,我先copy一下放在这。

移动调试

移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

(1)准备工作

1. 安装0.5.0或以上版本的微信 web 开发者工具

2. 确认移动设备是否支持远程调试功能

  打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

3. 打开移动设备中的 USB 调试功能

  1.打开移动设备,进入“设置”->“开发人员选项”

  2.勾选“USB 调试功能”

 

  需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

  1.打开移动设备,进入“设置”->“关于手机”

  2.找到并单击“内部版本号”7次

4. 安装移动设备 USB 驱动

  通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。

5. 打开 X5 Blink 内核的 inspector 功能

  打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

  如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

  

(2)开始调试

使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

点击上图右上角的“手机”图标,将启用屏幕映射功能:

 

 

下面我来补充一下:

3-2-1.打开我们手机的调试USB调试功能,我的手机是三星S7,(高版本Android好像都这么弄,如果你的不可以,就问问度娘)找了半天没找到,问了度娘才找到。。。。写个记录

在下拉通知栏里面选择设置,如图:

                    

在版本号那里多点击几次,页面就会有提醒,再点击几次就可以打开开发者选项,打开以后,在我们设置里面就出现了开发者选项,点进去,把USB调试打开就好了。

额外内容----如何关闭开发者选项???如图所示

                

 

3-2-2打开 X5 Blink 内核的 inspector 功能

             打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

 

3-2-3开始调试

    上面的设置都弄完以后,点击页面的的开始调试按钮,手机上出现下面这个页面,如图,我们点击确定就可以。

 

然后我们的调试工具就会弹出这个页面:

此时基本上就可以了,我们在我们的手机上随意打开一个我们要调试的微信公众号的页面。如图

打开以后如图所示:左侧是我们的调试工具页面,右侧是我们的手机上显示的页面,是不是非常棒,哈哈哈哈,

           

 

点击调试工具页面右上角的手机图标,可以将手机页面映射到调试工具里面,如图所示:


2016-11-15 11:38:46 qq_24091555 阅读数 20068
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

           由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。

       因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信开发只能看懂思路。更有的是,网上一些微信开发视频,也是和PHP有关的,关于用Java开发的甚少。

       无奈之下,我只好苦啃微信开发文档。大家都知道,微信官方给的开发文档真的有点那个啥,一个功能实现非要分几个地方来说,看完这块,又得点击另一个页面看完另一块,甚是麻烦。这样的设定也让我走了好多坑。

但功夫不负有心,在研究透了微信开发文档之后,我顺利在在项目中完成微信开发。现在我将微信开发的经验分享一下,希望对大家有所帮助。

       微信JS-SDK是微信公众号平台面向网页开发这提供基于微信内的网页开发工具包。接口大类分为:基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地址位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡劵和微信支付。一般使用频率高的就是分享接口、地理微信、微信扫一扫和微信支付。

接下来,我将主要讲解如何调用微信分享接口。

第一步,准备内网映射工具,ngrok。不清楚这个的同学可以去百度一下。https://ngrok.com为ngrok官网。要进行微信开发,内网映射工具是不可少。毕竟,我们程序员进行开发,要测试开发的产品是否能用,都先在自己的电脑跑一下。但由于ngrok的服务器在外国的,鉴于天朝的墙太高,访问可能不稳定。所以我推荐的是国内的natapp,免费和收费的都有,服务毕竟稳定可靠,只不过要想自定义二级域名就得交费成为VIP咯。

第二步,配置JS接口安全域名。登录要进行开发的公众号,点击公众设置--->功能设置。设置JS接口安全域名,要注意三点:①填写域名前面不需加上http://,例如你的域名是http://test.com,直接填写test.com即可;②域名默认80端口,只支持80和443端口,所以域名后面不能添加端口号。③该域名为你调用微信JS-SDK接口域名。

第三步,引用JS文件。在需要调用JS接口的页面引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js 。


第四步,通过config接口注入权限验证配置 。具体参数有什么用处,在截图都有注释讲解。其中jsApiList为我们要使用的接口,我在下面共引用了五个接口,分别为微信好友分享、QQ好友分享、腾讯微博分享、QQ空间分享和朋友圈分享。调用的都是分享的接口。至于其他接口列表,可以去微信开发文档那浏览一下。这里就不详说。

        第五步,在服务器生成相关参数传到调用JS-SDK页面,完成授权。这是最重要的一步。如上图所示,appId,timestamp,nonceStr,signature都为必填参数。下面我将会详细说说如何生成这些参数并传回页面。

appId为开发的微信公众号的AppID(应用ID),我们可以在登录微信公众号,在开发选项中点击基本配置来查看。

timestamp为系统生成的时间戳。


nonceStr为服务器随机生成的字符串。



signature为微信JS-SDK使用权限算法。在生成signature之前,我们要拿到jsapi_ticket。官方文档是这样解释的:


我们要注意三个地方。jsapi_ticket要缓存两个小时,每过两个小时,向微信那边请求一次。获取jsapi_ticket要通过access_token。那么我们该如何获取access_token呢?


从文档可以看出,access_token需要AppID和AppSercet两个参数。而且access_token和jsapi_ticket一样,有效期皆为两小时。这就要求我们服务器要缓存access_token和jsapi_ticket,当有效期一过,就重新请求。有的人采用是用数据库来存取这两个参数,而我采用的是用Quartz定时器。关于Quartz定时器的使用,可浏览我上篇博客《SSH与Quartz集成》,里面有关于Quartz的使用方法。

AppSercet可在与APPID同一页面获取。接下来,调用接口,获取access_token。



接下来,我们用access_token去获取jsapi_ticket。


获取jsapi_ticket,就可以进行生成签名。在此之前,先看一下官方文档的签名算法。



用代码实现。


第六步,传生成的参数给网页。



第七步,调用已授权的JS接口。


第八步,利用微信Web开发者工具调试,看看是否授权成功。(微信web开发者工具可在微信开发下载)。



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

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

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

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次,如果你没有体验成功,可能就是到上限了,也可以关注我的微信公众号,后面陆续的我会把文章发布到微信公众号上…附上公众号的二维码,目前还没有发布文章,不要嫌弃哈哈哈…如有问题可以在下面评论,或者指出我的问题,大家互相学习,谢谢…
在这里插入图片描述

2017-09-12 17:07:55 machunlin2010 阅读数 3155
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

一、微信配置:
参考地址:https://testerhome.com/topics/6871

1.打开微信,设法打开网址 http://debugx5.qq.com (推荐直接把这个网址发给文件传输助手,然后就可以直接打开链接了)
2.在打开的网页中选择 【信息】->【TBS settings】,勾选 【是否打开 TBS 内核 Inspector 调试功能】,并点击提交按钮
3.微信提示需要重启,点击重启

二、手机打开USB调试功能

三、PC端配置
1.PC上安装adb驱动程序,
下载地址:https://pan.baidu.com/s/1hrRfkVi, 官网地址:http://adbdriver.com/downloads/
2.安卓手机连上PC,安装驱动

四、调试
参考:http://www.cnblogs.com/JinQingsong/p/6591830.html
1.PC连接上手机,手机允许USB调试
2.PC打开Chrome,输入:chrome://inspect/#devices
3.手机上,在微信中打开一个H5页面,就可以正常调试了
4.如果chrome inspect调试时,弹出的界面为空白,那么编辑hosts文件,添加:
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com

2017-11-11 11:16:40 github_33408275 阅读数 13375
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

        官方微信开发者工具在11-09开始支持php后端语言开发,这对广大不熟悉nodejs的开发者是个重大利好,当然并不是说nodejs作为小程序后端不好,而是“世界上最好语言”可以快速开发上线,小程序即将迎来爆发成长期。相信过不了半年一年,小程序会令淘宝、美团恐惧。

        官方开发工具已经适配了“开发环境”,即使开发者不会配置“本地环境”也可以达到开发调试的目的,但是经常要上传代码,特别费劲,严重影响开发效率。下面将介绍如何配置本地php开发环境(本地nodejs后端开发环境配置其实也大同小异)。

1.下载phpstudy,安装并启动,实现这一步你将拥有本地服务器,本地mysql,打开http://localhost/phpmyadmin/index.php (默认root/root)可以管理数据库


2.安装官方开发者工具(作者主要用它来调试,编写代码用phpstorm)


3.导入官方demo,下载地址:https://github.com/tencentyun/wafer-php-server-sdk


4.修改server目录下的appId,appSecret,useQcloudLogin=false,以及mysql的账号密码为root/root(这一步非常重要,否则无法登陆成功,官方教程默认使用        腾讯云代理登陆useQcloudLogin=true,本地开发环境要改成false,并且提供小程序的appSecret,当然上传到腾讯云的时候还是改回来比较安全)


5.使用phpstudy配置本地host,并且配置一个虚拟域名如映射127.0.0.1 www.testxxx.com,这一步网上有很多教程的


6.修改小程序client目录下config.js的host为刚刚配置的虚拟域名:var host = 'http://www.testxxx.com';


7.保存代码并打开微信开发者工具,点击“点击登录测试按钮”,如果登录成功,那么恭喜你!




最后,作者暂时没空写的这么详细,有时间再补充了,有问题欢迎在评论区留言哦。



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