当前位置：首页 > news >正文

uniapp引入小程序原生插件

news 2025/8/3 7:38:57

怎么在uniapp中使用微信小程序原生插件，以收钱吧支付插件为例

1、在manifest.json里的mp-weixin中增加插件配置

    "mp-weixin" : {"appid" : "你的小程序appid","setting" : {"urlCheck" : false},"usingComponents" : true,// 在下面配置插件"plugins" : {"sqb-pay" : {"version" : "1.3.0","provider" : "插件的appid"}}},

2、在pages.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页面使用插件即可

......
<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

/*** 收钱吧签名* 签名算法：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'&&params[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

/*** 获取收钱吧插件的参数* @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("&"));// 拼接keykeyValue += ("&key=" + terminalKey);// 求md5String sign = EncryptUtil.md5(keyValue);resultMap.put("sign", sign.toUpperCase());return resultMap;}