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

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

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

           由于项目需要,需要接触微信开发,并要调用微信的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开发者工具可在微信开发下载)。



2017-11-22 15:08:32 yq_oxygen 阅读数 2293
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

最近想在微信平台嵌入一个H5页面的DEMO,并想要调用微信平台的jsAPI,但这一操作需要获取微信的认证,经过一天的不断调试,终于攻克了这个问题,现将思路和解决方案记录下来,以供需要的朋友参考。

使用微信js接口需要配置文件,

   wx.config({
       debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
       appId: 'wx3b70375e1032772b',    // 必填,公众号的唯一标识
       timestamp: data.body.timestamp, // 必填,生成签名的时间戳
       nonceStr: data.body.noncestr,   // 必填,生成签名的随机串
       signature: data.body.signature, // 必填,签名,见附录1
       jsApiList: ['checkJsApi',
           // 'chooseImage',
           // 'previewImage',
           // 'uploadImage',
           // 'downloadImage',
           // 'getNetworkType',//网络状态接口
           // 'openLocation',//使用微信内置地图查看地理位置接口
           // 'getLocation', //获取地理位置接口
           // 'hideOptionMenu',//界面操作接口1
           // 'showOptionMenu',//界面操作接口2
           // 'closeWindow' ,  ////界面操作接口3
           // 'hideMenuItems',////界面操作接口4
           // 'showMenuItems',////界面操作接口5
           // 'hideAllNonBaseMenuItem',////界面操作接口6
           // 'showAllNonBaseMenuItem',////界面操作接口7
           'scanQRCode'// 微信扫一扫接口
       ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
   });

上面有四个必填项,接下来我们将介绍如何获取它们:

获取步骤

第一步,去微信公众平台的开发者工具界面,进入公众平台测试帐号,获取测试号信息,也就是appIDappsecret , 填写JS接口安全域名(设置接口访问的白名单),注意域名(必须备案)需要填写端口号,如yangqi.site:1338

第二步,获取access_token,有效期7200s

const appId = ...      // 第一步获取
const appSecret = ...  // 第一步获取
https.get(
  'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+ appId +'&secret=' + appSecret,
  (backData) => {
    backData.on('data', (d) => {
      process.stdout.write(d);
      accessToken = JSON.parse(d)['access-token'];
      res.send(d);  // (获取到access-token)
    })
  }
)

第三步,根据第二步获取的access-token,获取ticket,有效期7200s

const accessToken = ...      // 第二步获取    
https.get(
  'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+accessToken+'&type=jsapi',
  (back) => {
    back.on('data', (d) => {
      res.send(d);           // 获取到ticket
    })
  }
)

第四步,根据第三步获取的ticket,获取signature。获取signature需要noncestr 和 timestamp,需要后台自动生成,与微信接口无关。

var ticket = ...    // 第三步获取

const createNonceStr = () => Math.random().toString(36).substr(2, 15);
const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + '';
const calcSignature = function (ticket, noncestr, ts, url) {
   var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;  // (第一步设置的域名+接口)
   shaObj = sha1(str);
   return shaObj;
}

const noncestr = createNonceStr();
const timestamp = createTimeStamp();
const signature = calcSignature(ticket, noncestr, timestamp, 'http://yangqi.site:1338/');  // 通过sha1算法得到

res.send({
  noncestr: noncestr,
  timestamp: timestamp,
  signature: signature,
})

至此,我们就可以完整的得到wx.config中的所有内容。

但仅仅获取wx.config是不够的,我们不能每次都将调试代码放到线上,这是不可思议的,我们需要使用本地调试,电脑端还好说,修改host后使用nginx代理,但手机端不成,我们需要修改手机端网络访问的代理,这里介绍使用fiddler。

使用步骤

第一步,手机和fiddler所在电脑必须处于同一无线网中。
第二步,修改电脑的host,如 yangqi.site:1338 10.101.11.11
第三步,手机连接wifi时,设置手动代理,将代理设置为fiddler所在电脑的ip 和 fiddler Tools -> Connections -> listen port 如,8888
第四步,手机必须访问域名,而非ip才会生效。

最后感谢刘妍小盆友的鼓励,让我有了钻研下去的动力

2019-03-09 14:54:05 Jonty1024 阅读数 509
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

使用TBS Studio进行微信公众号真机调试

目前在微信公众号开发中大家都很了解微信开发者工具,在早期的微信开发者工具中有移动调试功能,让手机通过代理的方式开通移动调试,但是最新版本的微信开发者工具中移除了移动调试功能。

 

image.png

 

在微信公众号开发的实际过程中,因为网络部署、证书等种种原因会引起某些手机兼容性问题,这时候微信开发者工具就爱莫能助了,如何解决真机调试的问题,那就必须借助TBS Studio。

TBS Studio是什么

TBS Studio是面向基于TBS的Web开发者和移动应用开发商(包括微信、手Q,三方App等)打造的开发服务整体解决方案,以提升广大开发者在真机环境下的开发效率,并帮助开发者分析和优化网页的设计,主要功能有网页Inspector调试,网页性能分析等。

TBS Studio在哪里

TBS Studio 下载

TBS Studio如何使用

  1. 下载安装。
    按照官方手册安装。
  2. 手机打开usb调试,连接到电脑

     

    image.png

     

    3.打开手机上的微信app并让微信保持在前台。
    4.打开TBS Studio,点击启动检测。

     

    image.png

  3. tbs弹出确认,点击确定。

     

    image.png

     

    6.设定tbs的调试状态,公众号里选择普通网页。

     

    image.png

  4. 使用微信扫二维码,根据提示操作,操作完成后重新开启微信app,打开要调试的公众号或h5链接。
    8点击tbs的启动调试,得到如下界面。(这里可能需要打开微信浏览器的TBS调试,方法是:微信打开这个网址 http://debugx5.qq.com/ ,选择“信息”→把TBS调试勾上)

     

     

     

    9.找到要调试的连接点击对应的inspect,打开开发者工具,剩下的就和电脑chrome一样了,这里操作界面是和手机同步的。

     

2019-01-23 16:31:53 sunshao904 阅读数 529
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

小程序是运行在微信平台的一种轻量级app,通过一系列微信特定的组件构建用户界面,数据还是通过调用数据接口来获取。

所以,调用本地接口,在小程序中很重要。

1、首先需要绑定小程序id,然后添加request 合法域名,微信要求接口是https加密传输,所以服务器需要安装证书

2、在 onLoad中 使用微信 API wx.request 来请求

如果要用 POST 请求,需要在代码中设置 header: {'content-type': 'application/x-www-form-urlencoded'}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

  wx.request({

    url: 'https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/',

    data: {

      find: _find,

      tokenKey: _tokenKey,

      timeStamp: _timeStamp,

      currentPage: _currentPage,

    },

    method: "GET",

    header: {

      "Content-Type": "application/json",

    },

    success: function (res) {

      app.globalData.allData = res.data.datas;

      // console.log(res)

      self.setData({

        list: res.data.datas

      })

    },

    fail: function(){

      console.log("error")

    },

  })

},

2018-09-19 13:56:25 qq_42802356 阅读数 3973
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

最近开发小程序,小程序真机请求只支持https。开发中想实时的预览开发成果,就需要在本地配置域名的ssl证书,最后实现手机和电脑在同一局域网下就可以实现真机测试本地启的项目。(我在公司测试手机电脑都连接同一无线没有成功,但是电脑连接网线手机连无线测试成功。询问经理可能是公司网络设置的问题,有明白什么原理的麻烦回复一下,谢谢!)总结一下,希望能帮到更多的人
1.首先需要域名(已备案域名),我使用的是在阿里云上购买的已经备案域名,然后将域名解析到本地ip。
2.申请域名ssl证书,阿里云申请的免费证书进去点击symantec—再点击增强版—才会出现免费的,不想让买免费的么?
3.本地tomcat配置ssl证书阿里有详细视频也可以使用腾讯ssl证书配置,亲测有效
1、证书格式转换
在Tomcat的安装目录下创建cert目录,并且将下载的全部文件拷贝到cert目录中。如果申请证书时是自己创建的CSR文件,附件中只包含1537628743829.pem文件,还需要将私钥文件拷贝到cert目录,命名为1537628743829.key;如果是系统创建的CSR,请直接到第2步。
到cert目录下执行如下命令完成PFX格式转换命令,此处要设置PFX证书密码,请牢记:
openssl pkcs12 -export -out 1537628743829.pfx -inkey 1537628743829.key -in 1537628743829.pem
2、PFX证书安装
找到安装Tomcat目录下该文件server.xml,一般默认路径都是在 conf 文件夹中。找到 <Connection port="8443"标签,增加如下属性:
keystoreFile=“cert/1537628743829.pfx”
keystoreType=“PKCS12”
#此处的证书密码,请参考附件中的密码文件或在第1步中设置的密码
keystorePass=“证书密码”
完整的配置如下,其中port属性根据实际情况修改:

<Connector port="443"
    protocol="HTTP/1.1"
    SSLEnabled="true"
    scheme="https"
    secure="true"
    keystoreFile="cert/**pfx文件名字**.pfx"
    keystorePass="**证书密码**"
    clientAuth="false"
    SSLProtocol="TLSv1+TLSv1.1+TLSv1.2"
    ciphers="TLS_RSA_WITH_AES_128_CBC_SHA,TLS_RSA_WITH_AES_256_CBC_SHA,TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA,TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA256,TLS_RSA_WITH_AES_128_CBC_SHA256,TLS_RSA_WITH_AES_256_CBC_SHA256"/>

( 注意:不要直接拷贝所有配置,只需添加 keystoreFile,keystorePass等参数即可,其它参数请根据自己的实际情况修改 )

4、 重启 Tomcat。
4.将域名配置到微信公众平台小程序后台合法域名中,然后上传通过域名请求后台的小程序代码测试。

注意:请求后台的手机和电脑一定要在同一局域网。

如果有什么不对,欢迎指正。谢谢

微信支付本地调试

阅读数 781

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