怎么在uniapp中使用微信小程序原生插件,以收钱吧支付插件为例
1、在manifest.json里的mp-weixin中增加插件配置
json
"mp-weixin" : {
"appid" : "你的小程序appid",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
// 在下面配置插件
"plugins" : {
"sqb-pay" : {
"version" : "1.3.0",
"provider" : "插件的appid"
}
}
},
2、在pages.json里需要映入插件的页面增加配置
json
{
"path" : "pages/user/order/order-pay",
"style" :
{
"navigationBarTitleText": "确认支付",
"enablePullDownRefresh": false,
// 微信插件配置
"mp-weixin": {
"usingComponents": {
"sqb-pay": "plugin://sqb-pay/sqb-pay"
}
}
}
}
3、在order-pay.vue页面使用插件即可
vue
......
<sqb-pay :return_url="sqbParam.return_url" :total_amount="sqbParam.total_amount"
:terminal_sn="sqbParam.terminal_sn" :client_sn="sqbParam.client_sn" @navigateTo="navigateTo"
:subject="sqbParam.subject" :sign="sqbParam.sign" :notify_url="sqbParam.notify_url">
<button class="bg-blue text-white mt-30 mx-auto text-xs rounded-xs w-p-60">确认支付</button>
</sqb-pay>
......
<script setup lang="ts">
interface sqbPay {
return_url : string,
total_amount : string,
terminal_sn : string,
client_sn : string, // 订单号
subject : string,
sign : string,
notify_url?: string
}
let sqbParam = ref<sqbPay>({
return_url: '',
total_amount: '',
terminal_sn: '',
client_sn: '',
subject: '',
sign: ''
})
// 从后台获取插件的sqbParam参数
function navigateTo(e) {
wx.redirectTo({
url: e.detail.url,
fail(e) {
console.log('err:', e)
uni.showToast({
icon: 'none',
title: '支付失败'
})
},
})
}
</script>
附录:收钱吧小程序签名算法实现
javascript
javascript
/**
* 收钱吧签名
* 签名算法:
1 筛选 获取所有非空的参数,剔除 sign
2 排序 将筛选的参数按照第一个字符的键值ASCII码递增排序(字母升序排序),如果遇到相同字符则按照第二个字符的键值ASCII码递增排序,以此类推。
3 拼接 将排序后的参数与其对应值,组合成"参数=参数值"的格式,并且把这些参数用&字符连接起来,此时生成的字符串为待签名字符串。
将key的值拼接在字符串后面,调用MD5算法生成sign。将sign转换成大写。
* @param {any} params
* @param {string} key
* @return
*/
function getSqbSign(params: any, key:string) {
// 筛选和排序参数
let sortedParams = Object.keys(params)
.filter(key => key !== 'sign'&¶ms[key]) // 剔除sign和空
.sort((a, b) => {
return a.localeCompare(b); // 字母升序排序
})
.map(key => `${key}=${params[key]}`); // 组合成"参数=参数值"的格式
// 生成sign
let signString = sortedParams.join('&') + `&key=${key}`; // 拼接key
// console.log('----signString:', signString)
let sign = SparkMD5.hash(signString).toUpperCase(); // MD5算法生成sign并转换为大写
return sign;
}
java
java
/**
* 获取收钱吧插件的参数
* @param terminalSn 终端号
* @param terminalKey 终端密钥
* @param totalAmount 单位分
* @param clientSn 订单号
* @param subject 商品名
* @return
*/
public Map<String, String> getSqbPluginParam(String terminalSn, String terminalKey, String totalAmount, String clientSn, String subject){
Map<String, String> resultMap = new HashMap<>(10);
resultMap.put("return_url", "/pages/user/order/order?rule=3");
resultMap.put("total_amount", totalAmount);
resultMap.put("terminal_sn", terminalSn);
resultMap.put("client_sn", clientSn);
resultMap.put("subject", subject);
resultMap.put("notify_url", "https://xxxxxxxxxx/notify/order");
// 筛选 获取所有非空的参数,剔除 sign;按字母升序排序;将排序后的参数与其对应值,组合成"参数=参数值"的格式,并且把这些参数用&字符连接起来
String keyValue = resultMap.keySet().stream()
.filter(key -> !key.equals("sign")&&!ObjectUtils.isEmpty(resultMap.get(key)))
.sorted().map(key -> key + "=" + resultMap.get(key))
.collect(Collectors.joining("&"));
// 拼接key
keyValue += ("&key=" + terminalKey);
// 求md5
String sign = EncryptUtil.md5(keyValue);
resultMap.put("sign", sign.toUpperCase());
return resultMap;
}