微信小程序详解如何实现付款功能

目录
  • 1 支付场景
  • 2 创建数据源
    • 2.1 商品数据源
    • 2.2 订单数据源
  • 3 创建连接器
  • 4 创建应用
  • 5 功能开发
    • 5.1 首页
    • 5.2 商品详情页
    • 5.3 订单页
  • 总结

1 支付场景

我们梳理一下支付场景是什么样子的，首先可以浏览商品，然后在商品的详情页里进行结算。结算的主要目的是生成订单，订单生成好之后就可以进行支付。

支付其实是先向微信支付提交一个在线订单，订单提交成功之后就可以调用支付接口来拉起支付界面。

拉起支付界面之后我们需要按照提示的金额进行付费，付费成功后我们更新一下订单的状态，变成已付款。

2 创建数据源

按照分析的场景我们需要创建数据源，一共是两个数据源，分别是商品数据源和订单数据源。

2.1 商品数据源

商品的话有商品的名称、价格、详情，按照设计创建商品数据源并且建立对应的字段

2.2 订单数据源

订单的话有订单编号，支付金额，是否支付，openid

3 创建连接器

如果我们希望使用微信支付，需要先创建连接器。在控制台点击连接器，点击新建连接器

选择微信支付

选择企业主体的小程序和商户号，就完成了连接器的创建

微信支付一共提供了四个方法，分别是统一下单、查询订单、关闭订单、下载对账单

4 创建应用

点击控制台的应用菜单，点击新建应用，新建自定义应用

输入应用的名称，选择小程序

点击空白页面，创建首页

https://pan.baidu.com/s/1nfwR1rIY8oeceXhwS4n1cw 提取码: 1f9f

在页面旁边点击+号，先创建一个商品详情页面

接着再创建一个订单页

5 功能开发

5.1 首页

首页我们放置一个数据列表组件用来显示商品的列表信息

然后给文本组件绑定对应的字段

选中for循环的普通容器，设置点击事件，跳转到商品详情页。跳转的时候需要先新建一个页面参数，然后绑定当前记录的数据标识

5.2 商品详情页

商品详情页我们使用数据详情组件开发，加入数据详情组件。选择数据源模型，设置筛选条件，并且绑定好字段

给页面增加一个按钮，修改标题为结算

我们点击结算按钮的时候要调用低码方法，完成订单的创建。这里的需要传入订单的金额，低码方法调用新增即可

export default async function({event, data}) {
  const resutl = await app.cloud.callModel({
    name:'dd_98jydrk',
    methodName:'wedaCreate',
    params:{
      ddje:data.target,
      openid:app.dataset.state.openid,
      sfzf:false
    }
  })
  app.navigateTo({
    pageId: 'u_ding_dan_ye',    // 页面 Id
    params: {id: resutl._id},
});
}

这里的openid是获取的全局变量的值，具体全局变量的设置，启动方法获取用户的openid咱们在历史文章里反复讲解过多次了，可以查看过往的教程。

低码方法定义好之后我们就可以给组件上设置点击事件了，参数传入我们的金额即可

5.3 订单页

订单页先用数据详情组件展示订单的详情，放置一个支付按钮来调用连接器的统一下单方法，调用成功后再调用支付接口拉起付款界面

先增加一个参数变量，接收我们在商品详情页传入的参数

添加一个数据详情组件，数据源选择订单，筛选条件设置数据标识等于我们的参数变量

将订单中的字段依次绑定到文本组件中

增加一个按钮组件，修改标题设置为支付

因为我们还需要在支付页面获取订单的详细信息，所以我们需要创建一个模型变量来根据参数变量获取具体的值

在低码编辑器里创建一个支付的低码方法

export default async function ({ event, data }) {
  const result = await app.cloud.callConnector({
    name: 'wxzf_82kvbum',
    methodName: 'unifiedOrder',
    params: {
      body: "订单示例-支付订单",
      outTradeNo: $page.dataset.state.order.ddbh,//传入订单编号
      totalFee: $page.dataset.state.order.ddje,//传入支付金额
      openid: $page.dataset.state.order.openid//传入用户的openid
    }, // 方法入参
  })
  let pay = result.payment;//获取统一下单后的返回结果
  $app.requestPayment(//调用支付接口完成支付
    {
      timeStamp: pay.timeStamp,
      nonceStr: pay.nonceStr,
      package: pay.package,
      signType: pay.signType,
      paySign: pay.paySign,
      success(res) {
        console.log(res)
      },
      fail(res) {
        console.log(res)
      }
    }
  );
}

这里没有解决的就是支付成功更新订单状态的问题，实测在支付的回调函数里不能直接调用数据模型的方法，如果有测试成功的同学可以在评论区留言进行讨论

总结

我们本篇利用一定的篇幅讲解了一个完整的支付流程，支付还是比较常见的场景，有了支付功能交易就可以形成一个闭环，还不会的同学照着教程做一下吧。

到此这篇关于微信小程序详解如何实现付款功能的文章就介绍到这了,更多相关小程序付款功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序登录与注册功能的实现详解

    微信小程序登录与注册功能的实现详解

    目录 小程序中的登录 用户注册 用户信息修改 总结 小程序中的登录 在小程序中有一个概念叫openid,这个相当于登录小程序用户的唯一标识,每个微信用户都不同.那要如何拿到用户的唯一标识呢?在微搭低代码中是通过调用系统的api来获取的 let userinfo = await app.utils.getWXContext() 我们通过这行代码的调用来获取到用户的唯一标识,获取到之后我们其他页面也需要使用,那就需要把他存起来.全局变量的作用域是所有页面都可见,所以我们需要在变量中定义一个全局变量叫

  • 微信小程序多表联合查询的实现详解

    微信小程序多表联合查询的实现详解

    目录 一对多表设计 SQL中的关联查询 低码中的表关联 自定义连接器中实现表关联查询 新建连接器 总结 一对一的设计一般不常见,只需要设计到主表中即可,避免增加复杂性.一对多的关系比较常见,一的一方通常作为主表,多的一方通常作为子表.而多对多一般会拆分成两个一对多的关系,这就必须要用中间表进行过渡. 我们本篇介绍的多表查询,侧重在一对多的关系,我们先看一下我们实际的表设计 一对多表设计 我们实现的是文章关注的业务,通常将文章作为主表,而关注信息作为子表.表和表之间要进行关联,常见的设计思路是子表

  • 微信小程序中的生命周期与生命周期函数浅析介绍

    微信小程序中的生命周期与生命周期函数浅析介绍

    目录 一.生命周期 概念 分类 二.生命周期函数 概念 作用 分类 三.总结 一.生命周期 概念 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段 小程序的生命周期 小程序启动,表示生命周期的开始 小程序关闭.表示生命周期的结束 中间小程序的整个运行过程就是小程序的生命周期 分类 应用生命周期 特指小程序从启动-->运行-->销毁的过程 页面生命周期 特指小程序中每个页面的加载-->渲染-->销毁的整个过程 自定义组件生命周期 组件实例被

  • 微信小程序访问mysql数据库流程详解

    微信小程序访问mysql数据库流程详解

    目录 1 开通云上的mysql 2 创建自定义连接器 3 创建云函数 4 安装依赖 5 出参映射 6 在小程序中使用连接器 总结 1 开通云上的mysql 经过询价,我发现阿里云的数据库是比较便宜的,新人购买非常划算.对于爱学习的博主来说,果断购买一个. 按照操作指引购买后,云会帮你创建一系列的环境,在控制台就可以看到属于自己的实例 点击操作列上的管理,就可以创建我们自己的数据库.配置的步骤是先创建数据库的账号 然后创建一个数据库 都设置好之后就可以登录数据库,创建表,加数据了 刚创建好的数据库

  • 微信小程序实现文章关注功能详细流程

    微信小程序实现文章关注功能详细流程

    目录 1 数据源设计 1.1 文章数据源 1.2 关注数据源 2 录入测试数据 3 创建应用 4 首页功能实现 5 详情页功能实现 6 获取用户的openid 7 设置关注的低码方法 8 发布预览 9 总结 1 数据源设计 低代码工具分为模型驱动和表单驱动两种类型,微搭低代码属于模型驱动的低码工具.所谓模型驱动就是要先设计数据源,设计数据源之间的关系.我们分析一下关系是什么,应该有一个文章的数据源,还有一个关注的数据源.文章和关注之间的关系是一对多的关系,所谓的一对多是指一篇文章可以被多个人进行

  • 微信小程序实现页面导航与传参功能详解

    微信小程序实现页面导航与传参功能详解

    目录 一.页面导航 概述 分类 声明式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 编程式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 导航传参 声明式导航传参 编程式导航传参 一.页面导航 概述 顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类 声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转 编程式导航:通过调用小程序专门的导航API,实现页

  • 微信小程序实现分页查询详解

    微信小程序实现分页查询详解

    目录 创建自定义连接器 云开发介绍 分页实现思路 使用连接器 为什么要自定义分页功能 日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法 分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器 登录低

  • 小程序页面间传参的五种方式实例详解

    目录 前言 1.使用globalData 2.使用storage 3.使用url 3.1 api跳转 3.2 组件跳转 4.使用通信通道 5.使用页面栈 总结 前言 由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结.共有五种传参方式,各位有什么关于页面间传参的奇思妙想也可在评论区提出,大家共同探讨 概览: 方式 优点 缺点 globalData 双向传参.全应用可用 不及时 storage 双向传参.全应用可用 不及时 路由 简单方便.及时 正向传参 通信

  • 微信小程序网络数据请求的实现详解

    微信小程序网络数据请求的实现详解

    目录 一.限制 二.配置服务器合法域名 三.发起请求 GET请求 POST请求 二者区别 四. 跳过requst合法域名校验 五.关于跨域和Ajax的说明 番外-GET与POST二者的通俗化解释 一.限制 出于安全性考虑,小程序官方对数据接口的请求做出了如下两点限制: 只能请求HTTPS类型的接口 必须先将接口的域名添加到信任列表中 二.配置服务器合法域名 配置步骤: 登录微信小程序管理后台 链接 点击开发 开发管理 开发设置 服务器域名 点击右上角修改requst合法域名 注意事项: 域名只支

  • 微信小程序详解如何实现付款功能

    微信小程序详解如何实现付款功能

    目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页 总结 1 支付场景 我们梳理一下支付场景是什么样子的,首先可以浏览商品,然后在商品的详情页里进行结算.结算的主要目的是生成订单,订单生成好之后就可以进行支付. 支付其实是先向微信支付提交一个在线订单,订单提交成功之后就可以调用支付接口来拉起支付界面. 拉起支付界面之后我们需要按照提示的金额进行付费,付费成功后我们更新一下订单的状

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序 详解Page中data数据操作和函数调用

    微信小程序 详解Page中data数据操作和函数调用 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js <pre code_snippet_id="2049407" snippet_file_name="blog_20161214_1_1145312" name="code" class="javascript">Page(

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

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

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

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 基于Python实现的恋爱对话小程序详解

    基于Python实现的恋爱对话小程序详解

    目录 导语 一.小简介 二.代码演示 1)导入模块 2)倒计时 3)画2份不同的礼物 4)二种选择是不同的绘图倒计时之后就是绘制你回答的那个礼物. 5)弹窗设计的文字(可修改) 三.效果展示 1)视频展示 2)截图展示 导语 哈喽!大家好~我是木木子啦!自从写了一些表白类型的一些小脚本.小程序之后,越发不可收拾了,哈哈哈. 常常会有小粉丝说:这......小程序不够啊!刚表白去了,但是被拉黑了. 那我不答应了,我得努努力:多多益善给大家开发一些更有趣的各种各样的适合表白的小程序! 让每个人都争取

  • 微信小程序之发送短信倒计时功能

    微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例 如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的

  • 微信小程序获取手机号授权用户登录功能

    微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

  • 微信小程序实现简单input正则表达式验证功能示例

    微信小程序实现简单input正则表达式验证功能示例

    本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e

随机推荐