uincloud版完成微信支付(个人经验)

这篇具有很好参考价值的文章主要介绍了uincloud版完成微信支付(个人经验)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用HBuilder创建一个uinapp项目

创建完成之后选择项目根文件夹,右击新建uniCloud云开发环境,这里阿里云或者腾讯都可以,我选择阿里云

uincloud版完成微信支付(个人经验)

 

完成上面步骤后导入一个uin-id的插件

uni-id - DCloud 插件市场

导入公共模块uniid,成功后会自动在common文件夹下找到uni-id文件夹

uincloud版完成微信支付(个人经验)

然后在uni-id文件夹下建立config.json,内容如下:

 

{
    "passwordSecret": "passwordSecret-demo",
    "tokenSecret": "tokenSecret-demo",
    "tokenExpiresIn": 7200,
    "tokenExpiresThreshold": 600,
    "passwordErrorLimit": 6,
    "bindTokenToDevice": true,
    "passwordErrorRetryTime": 3600,
    "autoSetInviteCode": false,
    "forceInviteCode": false,
    "app-plus": {
        "tokenExpiresIn": 2592000,
        "oauth" : {
            "weixin" : {
                "appid" : "weixin appid",
                "appsecret" : "weixin appsecret"
            }
        }
    },
    "mp-weixin": {
        "oauth" : {
            "weixin" : {
                "appid" : "你的微信小程序appid",
                "appsecret" : "你的微信小程序appsecret"
            }
        }
    },
    "mp-alipay": {
        "oauth" : {
            "alipay" : {
                "appid" : "alipay appid",
                "privateKey" : "alipay privateKey"
            }
        }
    },
    "service": {
        "sms": {
            "name": "DCloud",
            "codeExpiresIn": 300,
            "smsKey": "your sms key",
            "smsSecret": "your sms secret"
        }
    }
}

具体参数说明请见:

uni-app官网

具体参数说明请见:

uni-id - DCloud 插件市场

在cloudfunctions文件夹下建立getOpenid云函数

const uniID = require('uni-id')

exports.main = async function(event,context) {

    const res = await uniID.code2SessionWeixin({

    code: event.code

  })

    return res

}

在刚刚建立的getOpenid云函数上点击右键,管理公共模块依赖,选择刚刚的uniid,这样以后如果需要修改微信的appid等可以直接修改uni-id函数,修改后右键有个更新所有依赖次函数的模块,就会自动更新

uincloud版完成微信支付(个人经验)

 

安装unipay,安装好上传即可无需其他操作

uni-pay - DCloud 插件市场

新建getOrderInfo云函数

'use strict';

  

const unipay = require('unipay')

const unipayIns = unipay.initWeixin({

   appId: ''//小程序appid

   mchId: ''//微信商户号

   key: ''//商户号的API密钥

   //pfx: fs.readFileSync('/path/to/your/pfxfile'), // p12文件路径,使用微信退款时需要,需要注意的是阿里云目前不支持以相对路径读取文件,请使用绝对路径的形式

})

exports.main = async (event, context) => {

   //event为客户端上传的参数

   let orderInfo = await unipayIns.getOrderInfo({

      openid: event.openid, //这个是客户端上传的用户的openid

      subject: event.name, // 订单名称微信支付时不可填写此项

      body: '养老服务费',

      outTradeNo: event.suiji, //给他个随机号让他可以第二次发起支付

      totalFee: event.pric, // 金额,单位元,在上传过来的时候就已经*100了

      notifyUrl: 'https://xxxx.net/PayResult', // 支付结果通知地址

      attach: event.out_trade, //备注,订单号或 长者id 在下一步通知中判断长度来确定

   })

   return { orderInfo }

  

};

notifyUrl:随便填一个可以访问的url地址即可,不然会报错!

在刚刚新建的getOrderInfo云函数上点击右键,选择管理公共模块依赖,选择刚刚的unipay,让他们关联起来

 编写小程序端文件

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <button @click="pay">支付</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            pay(){
                // 1.传递weixin 获取微信的code
                uni.login({
                               provider: 'weixin',
                               success(code) {
                                  console.log('code:', code.code)
                                  //2:获得微信openid
                                  uniCloud.callFunction({
                                     name: 'getOpenid',
                                     data: {
                                        code: code.code
                                     }
                                  }).then(openid => {
                                     console.log('openid:', openid)
                                     //3:統一下單
                                     uniCloud.callFunction({
                                        name: 'getOrderInfo',
                                        data: {
                                           openid: openid.result.openid,
                                           name: '测试',
                                           out_trade: '123654789', // 订单号
                                           suiji: Math.floor(Math.random() * 100000000),
                                           pric: Number(0.1) * 100
                                        },
                                         
                                     }).then(odr => {
                                        console.log('OrderInfo:', odr)
                                        uni.hideLoading(); //隐藏loding...
                                        uni.requestPayment({
                                           // #ifdef MP-WEIXIN
                                           ...odr.result.orderInfo,
                                           // #endif                                   
                                           success() {
                                              uni.showModal({
                                                 title: '支付成功',
                                                 content: '请和顾问联系执行订单即可!'
                                              })
                                           },
                                           fail() {},
                                           complete() {
                                              // 支付完成后重新加载该页面
                                              console.log('完成')
                                           }
                                        })
                                     })
                  
                                  })
                               },
                               fail(err) {
                                  reject(new Error('微信登录失败'))
                               }
                            })
                            // 支付结束
            },

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>
 文章来源地址https://www.toymoban.com/news/detail-460903.html

到了这里,关于uincloud版完成微信支付(个人经验)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用 HBuilder X 将微信 小程序 项目 打包

    提示:这里简述项目相关背景: 使用 HBuilder X 将微信 小程序 项目 打包 这里描述项目中遇到的问题:` 使用 HBuilder X 将微信 小程序 项目 打包 这里填写该问题的具体解决方案: 第一步:使用 HBuilder X 将项目 打开、 第二步: 将 微信小程序项目 进行 打包 第三步:一般在打包

    2024年02月16日
    浏览(30)
  • 手记系列之六 ----- 分享个人使用kafka经验

    本篇文章主要介绍的关于本人从刚工作到现在使用kafka的经验,内容非常多,包含了kafka的常用命令,在生产环境中遇到的一些场景处理,kafka的一些web工具推荐等等。由于kafka这块的记录以及经验是从我刚开始使用kafka,从2017年开始,可能里面有些内容过时,请见谅。温馨提

    2024年02月08日
    浏览(35)
  • 【记录】安装HBuilder调试基座完成,但手机中并未出现App

    【原因】 App卸载不干净造成 【解决方法】 使用adb卸载你的应用         步骤一:找到adb的文件路径,Android studio、HBuilderX的都可以。            注:如果已配置过adb的系统环境变量的可跳过           步骤二:打开cmd命令窗口,使用 adb uninsatll io.dcloud.HBuilder 卸载应

    2024年02月08日
    浏览(48)
  • 微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录

    测试账号申请 测号响应流程:客户端发送请求,微信服务器收到请求后,转发到开发者服务器上,处理完后在发送给微信服务器,在返回给客户端 1、打开微信公众平台,点击测试帐号申请。地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login, 通过微信扫一扫授权就能进

    2024年02月02日
    浏览(42)
  • 个人简历html网页代码(使用chatgpt完成web开发课的实验)

    使用chatgpt完成web开发课的实验 前提: chatgpt的使用,建议看https://juejin.cn/post/7198097078005841980或者自己随便找 要学会用“出国旅游”软件 vscode的基本使用 炼丹开始: 炼丹材料: 我这演示只练了一次,需要更严格的页面,多练几次就行 练好了框架自己改改就行 自己练好的丹

    2024年01月17日
    浏览(37)
  • uni-app使用HBuilder X工具和微信小程序工具开发微信小程序

    选择uni-app的原因是什么 需要使用到的工具 关于HBuilder X工具和微信小程序工具的介绍  怎么下载HBuilder X工具和微信小程序工具  如何使用HBuilderX工具 如何使用微信小程序工具  结尾 什么是uni-app uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到

    2024年02月08日
    浏览(42)
  • 解决:Hbuilder工具点击发行打包,一直报尚未完成社区身份验证,请点击链接xxxxx,项目xxx发布H5失败的错误。[Error]尚未完成社区身份验证

    全世界任何漂亮有魅力的女生,都不会因为你送她汉堡或奶茶而对你说我爱你,明白吗?你应该带她做一些特别的事情,让她感动。 [Error]尚未完成社区身份验证,请点击链接 https://ask.dcloud.net.cn/account/setting/profile 验证后再重新打包。如果验证后仍然提示此信息,请检查HBui

    2024年02月12日
    浏览(58)
  • 静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

    前言 声明:该文章只是做技术分享,若侵权请联系我删除。!! 感谢大佬的视频: https://www.bilibili.com/video/BV1VN4y1q7cz/?vd_source=5f425e0074a7f92921f53ab87712357b 源码:https://space.bilibili.com/565112134 使用技术:HTML+CSS+JS(静态网页设计) 主要内容:有关网上个人图书馆。 主要内容 1、首

    2024年01月22日
    浏览(54)
  • SpringBoot对接支付宝完成扫码支付

    需求:系统A对接支付宝,实现支持用户扫码支付 对接的API文档:https://open.alipay.com/api 可选的支付方式有: 扫码付:出示付款码或者用户扫码付款 APP支付:在APP中唤起支付宝 手机网站支付:在移动端网页中唤起支付宝 App 或支付宝网页 电脑网站支付:在PC端唤起支付宝App或

    2024年02月03日
    浏览(41)
  • 前端如何使用微信支付

    h5页面接入微信支付分为两种情况,一种微信内置浏览器调用支付,另一种是在外置浏览器调用支付 内置浏览器支付 内置浏览器支付使用JSAPI支付 前端调用代码 JSAPI支付-产品介绍 | 微信支付商户平台文档中心 外置浏览器支付 外置浏览器使用h5支付,要求商户已有H5商城网站

    2024年02月09日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包