微语:代码适合中午敲,早晚出BUG
uniapp调用微信支付功能 uniApp
HTML
<template>
<view class="content">
<input v-model="val" />
<button @click="clickPay">点我扣款</button>
</view>
</template>
JavaScript
<script>
export default {
data() {
return {
title: 'Hello',
val: 0.1
};
},
methods: {
clickPay() {
let _this = this;
//1.调用登录 获取code
uni.login({
provider: 'weixin',
success(res) {
//2.调用微信官方接口,拿code去换openid
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: {
appid: 'wx4f27fd51b9a7bfda',
secret: '1a9bfee5a8155f0020c5857cd9038674',
js_code: res.code,
grant_type: 'authorization_code' //固定值
},
success(obj) {
console.log(obj.data.openid, '用户真实openid............');
console.log({
openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
name: '电吹风体验卷',
money: _this.val,
code: '851230012314156910598',
payType: 1,
clientIp: '127.0.0.1'
});
//3.调用后端接口 拿到所需要的数据
uni.request({
url: 'http://api.100qhl.com:5024/v1/order/createOrder',
method: 'POST',
data: {
openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
name: '好洗的地毯',
money: Number(_this.val),
code: '8512300123149105999015',
payType: 1,
clientIp: '127.0.0.1'
},
success(res) {
console.log(res, '后端返回参数完毕.....');
//4.调用官方接口扣钱!!!!
uni.requestPayment({
timeStamp: res.data.data.timeStamp,
nonceStr: res.data.data.nonceStr,
package: res.data.data.packageValue,
signType: res.data.data.signType,
paySign: res.data.data.paySign,
complete(res) {
console.log(res,
'扣款返回的结果.~~~~~~~~~~~~~~~~~');
}
});
}
});
}
});
}
});
}
}
};
</script>
jsconfig.json在vue项目中如何使用 Vue
在Vue项目中,你可以通过以下步骤来使用jsconfig.json文件
-
在你的Vue项目的根目录下创建一个名为jsconfig.json的文件。
-
在jsconfig.json中添加以下配置:
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
上述配置的含义是:
- target:指定编译器的目标版本,这里设为ES6。
- module:指定模块的导入导出规范,这里设为ES模块。
- baseUrl:指定相对于jsconfig.json文件的路径。
- paths:用于设置别名,例如@代表src文件夹,可以根据实际情况进行配置。
- exclude:指定需要排除的文件或文件夹,这里排除了node_modules和dist文件夹。
-
保存jsconfig.json文件。
-
接下来,你可以在你的Vue项目中使用别名来引用模块。例如,如果你有一个在src文件夹下的components文件夹,并且你在components文件夹中有一个Header.vue组件,你可以使用别名来引用它:
import Header from '@/components/Header.vue';
这里的@符号是之前在jsconfig.json中设置的别名,它指向了src文件夹,所以@/components/Header.vue实际上指向了src/components/Header.vue文件。
需要注意的是,jsconfig.json文件只在开发过程中起作用,对于构建打包后的代码是没有影响的。如果你使用的是Webpack等打包工具,你可能还需要相应的配置来解析别名。