草庐IT

【微信小程序系列：三】前端实现微信支付与代扣签约

北极光之夜。 2023-04-18 原文

一.先言

微信支付算是比较常见的功能了，这里主要说下整个流程中前端负责实现的一些方面，其实官方文档说得也很详细了，可以直接看官方文档。觉得文档比较复杂的话，可以直接看我写的~ 跳到官方文档。

二.支付大致流程

微信支付： 理清流程最重要，以购买一件A商品为例子。主要说明前端负责的流程。

  1. 肯定是注册有一个小程序，然后去小程序微信支付接入的官网去申请商户号，这个业务配置方面的就不细说了。
  2. 前端在小程序用 wx.login() 获取用户登陆凭证code，传给后端。后端可用code换取openid等。
  3. 前端把A商品的id传给后端，至于这个id是啥，就是保证这个商品唯一的编号，这个id由后端在数据库自定义建表建属性存储区分。
  4. 后端创建订单，调用微信提供的预付单接口，获取支付的参数，获取后把这支付参数传给前端。
  5. 前端获取到后端传过来的支付参数后保存起来，调用微信提供的wx.requestPayment 支付方法，把支付参数填进入参，执行后，便可进行输密码支付画面流程。
  6. 用户完成付款后，微信后台会主动调用后端书写的回调接口的内容，后端可在里面写更改商品订单的状态逻辑等。

官方的流程图，可参考参考：

三.支付前端代码部分

懂得流程后，前端的操作其实很简单了的。

  1. 获取code，通过自定义的接口把code呀，商品id呀，啥的一起传给后端就好。
  wx.login({
          success: function(res) {
            console.log(res.code)  
            let code=res.code;
          }
        });

2.通过第1步传给后端后，回参应该就是支付所需要的参数了，先保存起来,大概是下面这几个是常见的：

     "timeStamp":'',
     "signType":'',
     "package":'',
     "paySign":'',
     "nonceStr":'',
     "appId":'',

官方文档

3.前端调用wx.requestPayment，传入入参，执行就能调起支付了：官方文档

   wx.requestPayment({
    "timeStamp":'',
     "signType":'',
     "package":'',
     "paySign":'',
     "nonceStr":'',
     "appId":'',
     success(res) { 
        // 支付成功后这里写进行对应操作
       console.log('支付成功!',res)
     },
     fail(res) {
       console.log('支付失败!',res)
     }
  })

四.签约流程与代码：

除了支付，微信小程序中签约也是很常见的，签约就是类似授权开通免密支付或者自动扣费服务或者代扣。比如应用在乘车刷码自动扣费等场景。首先需要官网开通委托代扣服务 ，下面就前端说下代码实现流程。前端实现其实很简单，推荐看下官方文档就很清楚了：签约官方文档

只是简单代扣直接调用以下方法就行：

wx.navigateToMiniProgram({
    appId:'wxbd687630cd02ce1d', // 固定
    path:'pages/index/index', // 固定
    extraData:{  // extraData是需要后端返回的
        appid:'wx426a3015555a46be',
        contract_code:'122',
        contract_display_account:'张三',
        mch_id:'1223816102',
        notify_url:'https://www.qq.com/test/papay',
        plan_id:'106',
        request_serial:123,
        timestamp:1414488825,
        sign:'FF1A406564EE701064450CA2149E2514'
    },
success(res) {
    // 成功跳转到签约小程序 
},
fail(res) {
    // 未成功跳转到签约小程序 
}
})

结语

有个纪录片，讲述法显《佛国记》的故事，蛮好看的

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~

签约微信spanclasstoken微信小程序前端微信支付代扣签约自动扣费

有关【微信小程序系列：三】前端实现微信支付与代扣签约的更多相关文章

  1. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  2. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  3. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  6. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  7. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  8. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  10. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

随机推荐