小程序微信支付功能配置方法示例详解【基于thinkPHP】

本文实例讲述了小程序微信支付功能配置方法。分享给大家供大家参考,具体如下:

★ 背景

  • 近期进行小程序的开发,毕竟是商城项目的开发,最后牵扯到的微信支付是必要的
  • 个人开发过程中也是遇到各种问题,在此,我根据自己的实际操作,进行了代码的详细配置,以方便小程序新手的快速操作

-  使用语言:PHP             # PHP世界上最好的语言 HaHahahaaha
-  使用框架:ThinkPHP 3.2    # 版本有点低而已,没啥大碍
-  测试工具:微信开发者工具    # 其实还挺好用
-  整理时间:2018-07-07      # 有问题,就会一直更新

tip: 【代码都是可转化的,即便是 ThinkPHP5.0+ 还是 Laravel框架,相对熟悉 PHP 代码语法的,进行转化也只是分分钟的事哦!】

一、开发前的准备

①. 开发步骤

  • 如果开发者已做过 JSAPIJSSDK 调起微信支付,接入小程序支付非常相似,以下是三种接入方式的对比:
  • 如此看来,小程序要想集成支付功能,倒是简单了
  • 对公众号微信支付感兴趣的可以参考之前整理的一篇文章 —— 微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解

②. 阅读业务流程图

  • 本人强烈推荐阅读这个图示,流程明确了,代码逻辑自然也就理顺了!

③. 小程序支付业务

  • 此处,小程序官方已做了详细说明 —— 业务说明

# 很多人这一步还没有完成,就咔咔咔的测试支付功能,显然是太急于求成了,比如:我!
> 注意:
> 1. 要开通微信支付功能(一般有两三天的审核时间)
> 2. 本人开通后,选择的是 “绑定一个已有的微信支付商户号”,也就几分钟的事

  • 此处请阅读官方文末的注意事项【重要】:

1 appid 必须为最后拉起收银台的小程序appid;
  # 这句话感觉不说还好,一说更容易引起多余的考虑(忽视)

2 mch_id 为和 appid 成对绑定的支付商户号,收款资金会进入该商户号;
  # 此处我直接使用了所绑定的商户号中的 mch_id

3 trade_type 请填写"JSAPI";
  # 可暂时忽略,因为我在代码中已进行了配置

4 openid 为 appid 对应的用户标识,即使用 "wx.login" 接口获得的 openid
  # 可参考我的 payment/index.js 代码
  # 另一种情况,如果项目数据库中已保存了该用户的openid字段,可自行获取

二、小程序端代码配置指导

  • 这里进行配置的代码,都在附录源码包的 wxMini-PayDemo\wxChat 目录下

为了项目代码的 通用性/易管理性,我自行提取出了两个主要的公共文件 config.js 和 util.js;

①. utils下 config.js 文件的使用

  • config.js 文件中,主要就是配置一些公共访问路径之类的数据,方便后期代码上线后的链接更改
  • 所以,对于其中的 restUrlimgServer 修改为自己的服务器地址即可

> 注意一点:
我的 "restUrl" 是对应于我的小程序 Api 接口路径的,举个例子:
我的支付回调路径为 "https://www.mySercver.com/WxApi/Pay/notify"

②. utils下 util.js 文件的使用

  • 这个是和 config.js 文件在同一目录下的公共文件
  • 其实就是整合了三个主要的方法,需要注意的是:如果你有所补充,记得在文件的最后进行 “exports” 输出就好
module.exports = {
 http_get: http_get,
 http_post: http_post,
 showToast: showToast,
}

③. payment/index.js 文件的使用

  • 此文件作为 小程序微信支付前端的核心文件
  • 在保证你的各个文件目录对应配置正确的情况下,只需在进行支付唤醒时,调用其中的 btnClickToPay() 方法即可:
  • 当然,我只是随便定的一个方法,实际使用的时候,其实就是以类似的形式,去调用后面的 wxPay()方法呗!

三、服务端代码文件的使用指导

  • 这里进行配置的代码,都在源码包的 wxMini-PayDemo\Server-PHP 目录下

声明:
***因为本人所提供的代码是基于 ThinkPHP3.2 框架编写整理的,所以对于使用过 ThinkPHPLaravel 框架的 PHPer 来说,简单明了,可根据自己的框架进行调整适配,所以,此处讲的可能不会太过琐碎 ***

①. 公共配置文件的数据补充

  • 此为源代码中的 "wxMini-PayDemo\Server-PHP\Conf\config.php",此文件代码比较少,我直接进行展示:
return array(
 //'配置项'=>'配置值'
 'wxPay' => [
 'appid' => 'wx8787xxxxxxxxxxxxx',//TODO 此处使用的是小程序的 APPID
 'app_secret' => '0a7xxxxxxxxxxxxxxxxxxxxxxxxxxxxx622', //小程序的应用密钥
 'pay_mchid' => '13xxxxxx02', // 微信支付MCHID 商户收款账号
 'pay_apikey' => '1qaxxxxxxxxxxxxxxxxxxxxxhgf5', // 微信支付KEY
 'notify_url' => 'https://www.mySercver.com/WxApi/Pay/notify', // 微信支付成功后进行回调的链接
 'login_url' => "https://api.weixin.qq.com/sns/jscode2session?" .
  "appid=%s&secret=%s&js_code=%s&grant_type=authorization_code", // 微信使用code换取用户openid及session_key的url地址
 ],
);
  • 对于上述配置信息的来源,应该没啥疑问吧?

注意一点:
"notify_url" 作为支付回调的链接地址,要求配置成自己的服务器路径
 ;#同时注意协议的要求 “https”

小程序官方要求:
 ;# 需要进行服务器域名的配置
 ;# 操作位置为 “小程序(微信公众平台)/设置/开发设置”中的“服务器域名->request 合法域名”

②. 公共方法 function.php 的补充

  • 对于本人的逻辑处理中,其实只有一个方法 curl_get(), 并且只在 PayController.class.phpgetOpenID() 方法中进行了一次调用,也可以自行提取使用的

③. 核心处理文件 PayController.class.php

此文件代码已做了详细处理,在你正确放置后,需要注意的几点如下:

  • (1). 注意命名空间 "namespace" 与自己业务代码的对应
  • (2). 在 "prepay()" 方法中,因为不同的业务都会有属于自己的判断处理逻辑,

所以,在使用时完全可以替换掉所调用的 "prepayOrderDeal()" 方法  ;# 相信没多大歧义吧!
   #【在此处,我建议进行一下微信支付金额的校对】
   # 比如,通过订单号到你的项目数据库中,查询出需要支付的金额再与此比较,
   # 只有符合你的要求才可以进行微信支付的下单操作

  • (3). 在 "pay()" 方法中

建议对应当前的订单号,保存微信支付返回的 prepay_id

  • (4). 再有就是,在 "notify()" 这个回调方法中

一定会涉及到自己业务的更新处理逻辑
    所以被调用的 "payNotifyOrderDeal()"方法中就可以改成你自己的业务逻辑了 (此处是可以自行补充的)

注意,此处传入的 "$result" 参数中,我主要使用的就是其中的 "out_trade_no" 和 "total_fee"
  # 包含着微信支付的众多信息,可自行提取
 前者用于匹配我对该已支付订单的后续更新操作
  #【提示:我在使用时需要使用 "M" 进行字符串的截取才是我自己业务的实际订单编号哦!】;
 后者是实际微信消费的金额,可用于数据表的记录,以方便对账人员的校对工作

补充:

  1. 为了方便后期 微信退款功能 的扩展,建议对应订单保存回调得到的 $result
  2. 可以将其转化为 json 字符串形式 $wx_pay_result_json = json_encode($result);, 然后存储在订单表中,比如:
  3. 如果,直接进行微信退款功能的实现,请完成后,参考:小程序 微信退款功能实现讲解 (PHP方式)

四、使用及测试效果

①. 测试效果

  • 在我的小程序项目中,唤醒的效果(开发工具中)如下:
  • 如果是在自己的手机端进行测试,在保证你的域名配置正确的情况下,唤醒的样式就是常见的样子:
    -

②. 补充说明

- 相信在实际配置使用的过程中一定会出现各种问题,我也是一点点的梳理排错过来的 - 前面的多是些配置问题的规范,如果到了最后的唤醒阶段,出现的问题要注意查看开发工具的控制台, - 其中会有比较详细的报错信息,然后再进行排查解决 - 有何问题,欢迎指摘,祝你配置顺利咯!

☆ 附录:

①. >>> Github 源码下载参考

再做补充:如果,直接进行微信退款功能的实现,请完成后,参考:小程序 微信退款功能实现讲解 (PHP方式)

②. 总结

  • 通过对以上操作的梳理,可以提取出主要的几个步骤:

- . 小程序要开通你的微信支付功能 # 需要审核时间的
- . 审核通过后,紧接着进行"开通"操作 #可有两种开通方式进行选择的
- . 前后端重要信息配置完毕
- . 补充自己的特有逻辑处理操作 #pay/prepayOrderDeal()和 pay/payNotifyOrderDeal()
- . 支付回调成功后,进行后续的订单(项目服务器)查询操作

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

时间: 2019-05-03

微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

前言 小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了.我们今天来讲一讲.在小程序的webview里实现微信支付功能.因为微信不允许在小程序的webview里直接调起微信支付.所以我们这节课就要涉及到小程序和webview的交互了. 老规矩先看效果. 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来. https://v.qq.com/x/page/t0913ipr

微信小程序微信支付接入开发实例详解

本文主要讲述微信小程序接入微信支付开发过程中遇到的坑,分为两大块,小程序端和后台接口封装.本文主要内容如下: 一.后台接口封装: 二.小程序端整合: 三.总结 一.后台接口封装 本文介绍基于ThinkPHP5进行接口封装,具体步骤如下: 1.微信支付官方文档提供了PHP脚本微信支付的样例,下载下来: 2.样例已经封装好了每个类,我们只需要加上命名空间即可,在TP5的extend目录下新建一个目录wxpay,把样例中的类复制到该目录下,然后加上命名空间即可: 样例改造结果 其中最主要的一个类即Wx

小程序调用微信支付的方法

本文实例为大家分享了小程序调用微信支付的具体代码,供大家参考,具体内容如下 首先调用小程序wx.login登录接口  获取用户code 将code作为参数  传给后端  调用后端接口wechat/pay/prepay 获取后端  这五个返回值 nonceStr  package2 paySign  signType timeStamp wx.login({ success: function (res) { var userId = wx.getStorageSync('userId'); va

微信小程序-详解微信登陆、微信支付、模板消息

微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio

微信小程序调用微信支付接口的实现方法

前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: Eclipse+Tomcat+微信web开发工具 2.开发环境: java+maven 3.开发前准备: 3.1 所需材料 小程序的appid,APPsecret,支付商户号(mch_i

微信小程序与php 实现微信支付的简单实例

微信小程序与php 实现微信支付的简单实例 小程序访问地址: payfee.PHP: include 'WeixinPay.php'; $appid=''; $openid= $_GET['id']; $mch_id=''; $key=''; $out_trade_no = $mch_id. time(); $total_fee = $_GET['fee']; if(empty($total_fee)) //押金 { $body = "充值押金"; $total_fee = float

PHP:微信小程序 微信支付服务端集成实例详解及源码下载

微信小程序 微信支付服务端集 理论上集成微信支付的全部工作可以在小程序端完成,因为小程序js有访问网络的能力,但是为了安全,不暴露敏感key,而且可以使用官方提供的现成php demo更省力,于是在服务端完成签名与发起请求,小程序端只做一个wx.requestPayment(OBJECT)接口的对接. 整体集成过程与JSAPI.APP类似,先统一下单,然后拿返回的结果来请求支付. 一共三步: 1.小程序端通过wx.login的返回的code换取openid 2.服务端向微信统一下单 3.小程序端

微信小程序进行微信支付的步骤昂述

最近开发微信小程序进入到支付阶段,一直以来从事App开发,所以支付流程还是熟记于心的.但是微信小程序的支付就有点奇怪了,应用的创建是在公众号里,但是文档的介绍却在公众号中无法找到直接入口,甚是不解,而且小程序的师傅到底是属于公众号支付范畴还是app支付范畴也成疑问.下面是小程序支付文档的入口(嵌套在小程序api中): https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1 小程序支付步骤: 1,预支付

微信小程序调用微信登陆获取openid及java做为服务端示例

一.微信小程序 第一步:调用 wx.login获取code 文档地址 第二步:判断用户是否授权读取用户信息 文档地址 第三步:调用wx.getUserInfo读取用户数据 文档地址 第四步:由于小程序后台授权域名无法授权微信的域名,所以我们只能通过我们自己的服务器去调用微信服务器去获取用户信息,故我们将wx.login获取code 和 wx.getUserInfo 获取的encryptedData与iv 通过wx.request 请求传入后台 服务器返回的数据: 小程序代码: //调用登录接口,

微信小程序仿微信运动步数排行(交互)

本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: <view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{index}}" class="item"> <view bindtouchst

微信小程序设置http请求的步骤详解

http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请

微信小程序开发的基本流程步骤

一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为"微信"和"小程序"两部分 (1),其中"微信"可以理解为"微信中的",指的是小程序的执行环境:当然微信在提供执行环境的同时也延长了用户使用微信的时间. (2),"小程序"是说它首先是程序,然后具备轻便的特征.小程序并不像其他应用那样,它不需要安装,而是

微信小程序获取微信运动步数的实例代码

现在运动计步很火,无论是蚂蚁森林,还是微信上都很火爆,本文介绍了微信小程序微信运动步数的实例代码,分享给大家 微信小程序API-微信运动 https://mp.weixin.qq.com/debug/wxadoc/dev/api/we-run.html#wxgetwerundataobject 思路:wx.login获取的code请求获取的session_key,wx.getWeRunData获取的iv,encryptData,将它们一起发送到后台解密就行了. 安全顾虑,因为只是示例所以直接传递

微信小程序 调用微信授权窗口相关问题解决

引言 微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口.需要用户主动点击按钮,触发授权窗口. 那么,在我实践过程中,出现了以下问题. 1. 无法弹出授权窗口 2. 希望在用户已经授权的情况下,不显示按钮 1. 具体实现 app.js的onLaunch()函数中,添加获取用户个人信息的代码段.实现在用户已经授权的情况(例如第二次打开小程序时)下,自动获取用户个人信息,而不需要用户的授权. // 获取用户信息 wx.getSetting({ success: res => { if

微信小程序 获取微信OpenId详解及实例代码

获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc