使用HBuilder创建一个uinapp项目
创建完成之后选择项目根文件夹,右击新建uniCloud云开发环境,这里阿里云或者腾讯都可以,我选择阿里云
完成上面步骤后导入一个uin-id的插件
uni-id - DCloud 插件市场
导入公共模块uniid,成功后会自动在common文件夹下找到uni-id文件夹
然后在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函数,修改后右键有个更新所有依赖次函数的模块,就会自动更新
安装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;
}文章来源:https://www.toymoban.com/news/detail-460903.html.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-460903.html
到了这里,关于uincloud版完成微信支付(个人经验)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!