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;
    }
相关推荐
chaosama7 分钟前
禁止uni小程序ios端上下拉伸(橡皮筋效果)
ios·小程序
瑶琴AI前端25 分钟前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
丁总学Java5 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
耶啵奶膘7 小时前
uniapp-是否删除
linux·前端·uni-app
编程千纸鹤10 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域11 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
断墨先生13 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai14 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~19 小时前
一些 uniapp相关bug
uni-app·bug
丁总学Java1 天前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json