云闪付小程序Vue授权组件只兼容Vue2，改造兼容Vue3版本

此文章发布时，云闪付小程序的官方文档提示暂不支持Vue3

云闪付小程序文档 - Vue授权组件

引用后发现组件内部确实使用了很多Vue3 中已经删除了或者不推荐的方法，导致各种报错。

并且提示还要修改node_module目录，觉得不是很明智，

又没看懂普通授权组件的文档。。。

于是打算浅扒Vue组件的源码，使其变成内部组件。（文档中提供的组件下载地址）

打开组件模块目录vue-cup-ui/lib/vue-cup-ui.common.js，首先就看到 webpack blablabla的可知，这个组件是由webpack打包压缩的，那么前面的一大段就是webpack对chunk的各种注册和封装，不用管。
一直到下面这片代码，于是就开始眼熟，Vue声明式组件，（文章发布时的组件版本，大约在292行）


/* harmony default export */ var buttonvue_type_script_lang_js_ = ({name: "UPButton",props: {scope: String,timeout: Number},methods: {appletExplicitAuth(success, fail) {let iCanCall = callNative(function (data) {if (typeof success === 'function') {success(data);}}, function (err) {if (typeof fail === 'function') {let cordovaError;if (window.cordova) {switch (window.cordova.errorRetStatus) {case window.cordova.callbackStatus.INVALID_ACTION:cordovaError = {errcode: 'c03',errmsg: 'INVALID_ACTION_EXCEPTION: 插件里面没有此方法！'}break;case window.cordova.callbackStatus.CLASS_NOT_FOUND_EXCEPTION:cordovaError = {errcode: 'c04',errmsg: 'CLASS_NOT_FOUND_EXCEPTION: 此插件没有实现！'}break;case window.cordova.callbackStatus.ILLEGAL_ACCESS_EXCEPTION:cordovaError = {errcode: 'c02',errmsg: 'ILLEGAL_ACCESS_EXCEPTION: 无权限访问此插件！'}break;default:break;}}if (cordovaError) {fail(cordovaError)} else {fail(err);}}}, 'UPWebSdk', 'appletExplicitAuth', [{scope: this.scope}]);if (!iCanCall) {setTimeout(() => {this._count++;if (this._count > (this._timeout / 20)) {console.warn('请确定是否运行在云闪付APP中,且成功加载了upsdk.js');fail({errcode: '__ENV__10001',errmsg: '检测到未在云闪付APP中运行或未成功加载upsdk.js'})} else {this.appletExplicitAuth(success, fail)}}, 20)}},handleClick(event) {if (this.btnDisable) return;if (this.timeout && isNaN(parseInt(this.timeout))) {this.$emit('click', event, {errcode: '__ENV__10002',errmsg: '检测到timeout值非法'});return;}this._count = 0;this._timeout = this.timeout || 2000; // 默认2s超时this.btnDisable = true; // 防止多次点击，直到回调中才释放this.appletExplicitAuth(data => {this.btnDisable = false;this.$emit('click', event, null, data);}, err => {this.btnDisable = false;this.$emit('click', event, err);})}}
});

由上述代码可知：

云闪付Native底层和前端页面的交互是由Cordova框架做的连接；

由云闪付基础授权方法upsdk.appletAuth可推测：

appletExplicitAuth 是非基础授权（包含手机号，银行卡信息之类的）；

根据文档中组件的使用方法，我们也写一个一样的sfc，名字就叫UPButton.vue好了。

<UPButton class="customBtn"@click="btnClick":scope="scope":style="{width:'1rem',height:'0.64rem',backgroundColor:'red'}">授权button
</UPButton>

根据上面推测的两个条件，

围绕appletExplicitAuth 复制相关的方法，变量，常量，修改Vue2的写法this.xxxx为当前组件内的相关方法，即可得UPButton.vue中的script

根据文档中普通H5授权组件的html写法，可得template中的内容

<template><divclass="h5-cup-ui-upbutton up-button-custom"@click="handleClick"data-scope="scope.mobile"data-timeout="2000"><slot>授权按钮</slot></div>
</template><script setup>
import { onBeforeUnmount, onMounted } from "vue";
const scope = "scope.mobile";
const emits = defineEmits(["click"]);let _count = 0;
let _timeout = 2000; // 默认2s超时const handleClick = (event) => {let btnDisable = false;if (btnDisable) return;// 感觉没什么用删掉了// if (this.timeout && isNaN(parseInt(this.timeout))) {//   this.$emit("click", event, {//     errcode: "__ENV__10002",//     errmsg: "检测到timeout值非法",//   });//   return;// }btnDisable = true; // 防止多次点击，直到回调中才释放appletExplicitAuth((data) => {btnDisable = false;emits("click", event, null, data);},(err) => {btnDisable = false;emits("click", event, null, err);});
};const appletExplicitAuth = (success, fail) => {let iCanCall = callNative(function (data) {if (typeof success === "function") {success(data);}},function (err) {if (typeof fail === "function") {let cordovaError;if (window.cordova) {switch (window.cordova.errorRetStatus) {case window.cordova.callbackStatus.INVALID_ACTION:cordovaError = {errcode: "c03",errmsg: "INVALID_ACTION_EXCEPTION: 插件里面没有此方法！",};break;case window.cordova.callbackStatus.CLASS_NOT_FOUND_EXCEPTION:cordovaError = {errcode: "c04",errmsg: "CLASS_NOT_FOUND_EXCEPTION: 此插件没有实现！",};break;case window.cordova.callbackStatus.ILLEGAL_ACCESS_EXCEPTION:cordovaError = {errcode: "c02",errmsg: "ILLEGAL_ACCESS_EXCEPTION: 无权限访问此插件！",};break;default:break;}}if (cordovaError) {fail(cordovaError);} else {fail(err);}}},"UPWebSdk","appletExplicitAuth",[{ scope: scope }]);if (!iCanCall) {setTimeout(() => {_count++;if (_count > _timeout / 20) {console.warn("请确定是否运行在云闪付APP中,且成功加载了upsdk.js");fail({errcode: "__ENV__10001",errmsg: "检测到未在云闪付APP中运行或未成功加载upsdk.js",});} else {appletExplicitAuth(success, fail);}}, 20);}
};const _agent = navigator.userAgent.toLowerCase();
const isCordovaEnv = /\(cordova\s([\d\.]+)\)/g.test(_agent);
const isJSBridgeEnv = /\(securitywebcache\s([\d\.]+)\)/g.test(_agent);const truncatedRespForJSBridge = (data) => {if (!data) {return data;} else if (data.resultString) {return data.resultString;} else if (data.resultParams) {return data.resultParams;}
}const isFunction = (value) => {return Object.prototype.toString.call(value) === "[object Function]";
}const callNative = (success, fail, plugin, action, paramArray) => {let iCanCall = false;if (isCordovaEnv && window.cordova) {iCanCall = true;window.cordova.exec(success, fail, plugin, action, paramArray);} else if (isJSBridgeEnv && window.WebViewJavascriptBridge) {iCanCall = true;window.WebViewJavascriptBridge.callHandler(plugin,action,paramArray,function (data) {isFunction(success) && success(truncatedRespForJSBridge(data));},function (err) {isFunction(fail) && fail(truncatedRespForJSBridge(err));});}return iCanCall;
}
</script><style scoped>
.up-button-custom {//自定义的样式
}
</style>

根据普通H5授权组件的示例代码，class：h5-cup-ui-upbutton 是可能会被调用的，因此保留。经过实验，class：up-button 是用来自定义样式的，修改无碍，上述代码中修改成了.up-button-custom。由此可得组件style中的内容。

根据云闪付的其他的api风格，handleClick 中 appletExplicitAuth 中的success 和 fail 即为授权的成功和失败回调

由于认证方法中timeout之类的，我觉得没什么用，注释掉了。

由于scope指的是开发者需要从云闪付中获得的能力，因此可以根据自己的需求定义成props，或者直接写死成指定的，比如上面就偷懒写死成scope.mobile了。

经过和服务端的同学联调测试，上述改造可行。

本文旨在记录云闪付Vue授权组件Vue2 兼容 Vue3 的改造过程。

（但是好离谱啊，云闪付直接让我们下载离线组件包丢到node_modules 中，他以后难道不更新了吗？不维护的吗？怎么推送啊？）

云闪付小程序Vue授权组件只兼容Vue2，改造兼容Vue3版本相关推荐

云闪付小程序开发1.1---(@像极了人生、有喜有悲....)
经过上一节云闪付1.0的铺垫,这里说明一个道理,生活嘛,还是要多去发现身边的东西,万一奇迹再现了呢!是吧! 看了<云闪付小程序的官方>开发文档之后,我受益匪浅,有一个好消息跟一个坏消息.. ...
niushop打包云闪付小程序，调起云闪付授权登录
首先niushop打包云闪付小程序,比较简单,不用配置专门的打包按钮,直接打包h5就行. 使用niushop做云闪付牵涉到授权登录.支付等,这里先讲讲授权登录. 首先调用upsdk.pluginRea ...
uniapp开发云闪付小程序。
第一步:接入upsdk.js. 按照官方文档说明: 接入方使用云闪付 APP 小程序前端 API 前,需在调用页面(必须为 https )引入插件 upsdk.js 文件.我们需要在项目根目录中,新建 ...
从0到1学习云闪付开发，云闪付小程序崛起之玩转云闪付小程序
一.技术探索云闪付小程序开发,也是最近两年才发展起来,对于绝大多数人来说是一个新的起点.新的领域,然鹅,对于一个开发老兵来说一切都如履平地. 废话不多说,直入主题,让我带领大家一起探索云闪付开发技术 ...
云闪付小程序开发环境搭建
云闪付小程序前端开发指引 2021.08.10更新之前写的有误,特此更正! ---------------------见主页下资源原有内容: 1.使用 vue create demo 创建vue项 ...
unionpay 云闪付小程序开发包
unionpay 云闪付小程序开发包银联云闪付小程序非官方开发包,这可能是第一个支持composer导入的云闪付小程序开发包,小程序后端相关接口与支付相关接口已全部更新完毕. 码云地址 https: ...
云闪付小程序吃坑，太坑了，整个人都要烧了，找遍全网都找不到这么详细的开发资料了
因为公司需要让研究云闪付小程序,一开始以为像微信小程序一样.打包后基本能改主体类名放各个平台上跑,然后在研究中发现云闪付官方开发者工具难用的一匹,简直找不出哪个IDE能与此匹敌了.首先找遍全网也查不到 ...
云闪付小程序实现分享转发
实现页面点击打开分享功能小程序是嵌套的vue开发接口文档地址 https://opentools.95516.com/applet/#/ upsdk.showSharePopup({title: ...
云闪付小程序转微信小程序 ( vue ＞＞ mpvue ＞＞ wxApplets ) 记录
创建mpvue项目引入脚手架 npm install vue-cli -g 创建基于mpvue的项目 ,选项全部回车Yes,ESLint 选 No vue init mpvue/mpvue-quic ...

云闪付小程序Vue授权组件只兼容Vue2，改造兼容Vue3版本

云闪付小程序Vue授权组件只兼容Vue2，改造兼容Vue3版本相关推荐

最新文章

热门文章