uniapp引入小程序原生插件

2023-09-14 11:50:51

怎么在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("&"));
        // 拼接key
        keyValue += ("&key=" + terminalKey);
        // 求md5
        String sign = EncryptUtil.md5(keyValue);
        resultMap.put("sign", sign.toUpperCase());

        return resultMap;
    }
更多推荐

创建Scrapy项目

创建Scrapy项目的步骤如下:安装Scrapy:在终端或命令提示符中运行以下命令来安装Scrapy:pipinstallscrapy创建Scrapy项目:在终端或命令提示符中,使用以下命令创建一个新的Scrapy项目:scrapystartproject<project_name>其中,<project_name>是

【详细教程hexo博客搭建】1、从零开始搭建一个能用的博客

1、开始2.环境与工具准备本教程主要面对的是Windows用户操作系统:Windows10NodeGitHexo文本编辑器(强烈推荐VSCODE)GitHub帐号一个域名(强烈推荐买个域名)云服务器(可选)3.Node的安装打开Node官网,下载和自己系统相配的Node的安装程序,否则会出现安装问题。下载地址:Down

Vue-devTools安装—创建项目方法2 ui创建——Vue指令综合案例——汽车品牌管理

目录项目源代码:一、vue-devTools安装二、案例功能实现1、新建项目(ui创建)2、cnpm导入项目依赖库3、删除不需要的代码结构:4、修改代码结构5、添加汽车品牌插件安装bootstrap的提示功能添加bootstrap样式6、删除汽车品牌7、查询汽车品牌(过滤)项目源代码:Vue指令综合案例——汽车品牌管理

(二十九)大数据实战——kafka集群节点服役与退役案例实战

前言本节内容是关于kafka集群节点的服役与退役,从而实现kafka集群的缩容与扩容。在开始本节内容之前,我们要预先安装好kafka集群,并准备一台空余的服务器用来完成我们扩容与缩容的案例。关于kafka集群的安装内容这里不在赘述,相关内容请查看作者往期博客内容。正文从hadoop103克隆一台空闲服务器hadoop1

QT信号槽实现原理

定义Q_OBJECT宏在宏中声明了几个重要的成员变量及成员函数,包括声明了一个只读的静态成员变量staticMetaObject,以及3个public的成员函数staticconstQMetaObjectstaticMetaObject;virtualconstQMetaObject*metaObject()const

低代码之IVX

低代码之IVX一、如何去分析不同的低代码平台🧝‍♂️1.看自己的网站和平台是不是通过自己的低代码/无代码平台生成的2.生成源代码的能力3.可视化的逻辑编排二、低代码平台未来的发展方向👨‍🌾三、优质低代码平台介绍👨‍💼1.什么是iVX:2.iVX和其它低代码平台的区别上手步骤1.1iVX线上集成环境进入1.2创

python爬虫——爬取豆瓣top250电影数据(适合初学者)

前言:爬取豆瓣top250其实是初学者用于练习和熟悉爬虫技能知识的简单实战项目,通过这个项目,可以让小白对爬虫有一个初步认识,因此,如果你已经接触过爬虫有些时间了,可以跳过该项目,选择更有挑战性的实战项目来提升技能。当然,如果你是小白,这个项目就再适合不过了。那么就让我们开始吧!目录一、实战1.对豆瓣网网站进行Ajax

数据库设计与建模

数据库设计与建模1数据库设计的三范式2数据库建模2.1建模工具2.2使用pd建模1数据库设计的三范式三范式:1.第一范式(1NF):确保每一列的原子性(做到每列不可拆分)2.第二范式(2NF):在第一范式的基础上,非主字段必须依赖于主字段(一个表只做一件事)3.第三范式(3NF):在第二范式的基础上,消除传递依赖反三范

IOS数据管理

在iOS中,没有直接与Android中的SharePreference相对应的概念。而是使用不同的机制来处理应用程序的持久化数据。在iOS中,你可以使用以下几种方法来保存和读取应用程序的数据:UserDefaults(用户默认设置):UserDefaults提供了一种简单的键值存储机制,用于存储应用程序的配置和用户偏好

【Jetpack】Navigation 导航组件 ③ ( 为 Navigation Graph 页面跳转 action 添加跳转动画 )

文章目录一、为NavigationGraph添加跳转动画1、进入NavigationGraph配置的Design模式2、选中action跳转3、为action跳转设置enterAnim进入动画4、为action跳转设置exitAnim退出动画5、通过代码为action跳转设置进入/退出动画6、执行效果代码地址:CSDN

Qt/C++音视频开发54-视频监控控件的极致设计

一、前言跌跌撞撞摸爬滚打一步步迭代完善到今天,这个视频监控控件的设计,在现阶段水平上个人认为是做的最棒的(稍微自恋一下),理论上来说应该可以用5年不用推翻重写,推翻重写当然也是程序员爱干的事情,这个就要考验个人的功底,设计的好框架搭建的好,可以很多年不用变,只需要在现有框架小修小补即可,最多就是继承基类实现一些特殊性的

热文推荐