uniapp引入小程序原生插件

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

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

    "mp-weixin" : {
        "appid" : "你的小程序appid",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
        // 在下面配置插件
        "plugins" : {
            "sqb-pay" : {
                "version" : "1.3.0",
                "provider" : "插件的appid"
            }
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、在pages.json里需要映入插件的页面增加配置

{
		    "path" : "pages/user/order/order-pay",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "确认支付",
		        "enablePullDownRefresh": false,
                // 微信插件配置
				"mp-weixin": {
				  "usingComponents": {
					"sqb-pay": "plugin://sqb-pay/sqb-pay" 
				  }
				}   
		    }
		    
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、在order-pay.vue页面使用插件即可

......

		确认支付

......


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

附录：收钱吧小程序签名算法实现

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;  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31