uniapp引入小程序原生插件

怎么在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'&&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

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;
    }