Metreci-CSDN博客

原创 HPP(Hosted Payment Page)支付模式

HPP，全称是Hosted Payment Page，也就是俗称的第三方授权的中间支付页，目前采用这种模式的支付方式有Naver、Klarna等。HPP支付模式流程图Consumer Browser：消费者能够控制的浏览器，例如在台式机或移动设备上。Merchant Backend:商业后端将执行对HPP、Third Pay和Order Management的API调用。HPP: 全称Hosted Payment Page，第三方支付中间页。Third Payments API

2021-08-16 18:44:47 995

原创火狐浏览器无法重写localStorage的setItem，从而实现对localStorage数据变动的监听

火狐浏览器无法重写localStorage的setItem最近在公司维护项目时，遇到一个问题，如下代码所示（已经简化）:/** 主要实现对setItem的重写，实现对localStorage数据变动的监听*/ var signSetItem = localStorage.setItem; localStorage.setItem = function (key, newValue) { var setItemEvent = new Event("setItemEvent"); se

2021-05-10 16:46:54 1969 3

原创基于Backbone的一个ToDoMVC项目

基于Backbone的ToDoMVC项目在公司遇到了基于backbone的一个老项目，虽然不是主流的前端框架，但是它比较底层，对于新人而言，还是有必要学习和了解的。所以作者本人花两天时间简单做了下，后续还会进行修改和完善。下载项目点击右侧进入该库，基于Backbone的ToDoMVC根据文档提示安装搭建项目。项目展示点击进入Demo...

2021-03-19 14:52:20 152

原创 react svg 通过路径实现非系统的自定义字体的显示

在给前端界面做文字遮罩动画时，考虑到兼容性，我采用了svg的方法，而不是css的方法。总体来说效果还是不错的，如下所示但是奇怪的是，非系统自定义字体在组件刚创建的时候总是不显示，甚至一片空白，只有在调试页面中，更改字体才会显示上面的效果。起初查了很多关于svg自定义字体的解决方法，发现不奏效，所以我采用了另一种方法，通过path路径的方法。但是上面这么复杂的路径怎么解决呢？通过Adobe Inlustrator，它是做矢量图形的好软件，同时也能生成svg文件，这个功能拓宽了我前端开发的设计。1、

2021-01-15 11:20:30 368 1

原创如何利用react-app-rewired，插入第三方插件配置，如Gzip打包

在打包上传服务器过程中，为了进行优化，可谓较劲脑汁，其中有一个方式，是利用gzip减少静态资源大小，这是个好主意，我打算尝试一下。网上的提示是利用compression-webpack-plugin插件，但是这个插件需要先npm run eject，即生成webpack相关的一些文件，但是我想继续使用react-app-rewired做个性化配置，于是在网上找了很多相关知识。在此总结一下。1、需要的配置插件yarn add react-app-rewired -syarn add react-a

2021-01-03 00:14:49 1508 2

原创 react-redux操作过程中，出现的问题：Uncaught ReferenceError: Cannot access ‘SET_XXXXX‘ before initialization

在react-redux的action操作中，我试图在一个action中去dispatch操作另一个action，结果出现了详细代码如下（一个action函数）：export const setProgress = (val: number) => { const dispatch = store.dispatch const len = store.getState().loadingProgress.length if (val === 0) { dispatch(set

2020-12-25 22:19:59 5199

原创元素隐式具有 “any“ 类型，因为类型为 “any“ 的表达式不能用于索引类型 “{ xxx: xxx； }“。ts(7053)

ts7053: 元素隐式具有 “any” 类型，因为类型为 “any” 的表达式不能用于索引类型 “{ xxx: xxx; }”。在React-Typescript中遇到的问题，网上大部分都是修改配置什么的，我这里是加了个判断。复制插件下面的TypeScript函数用于判断key是否存在对象类型中export function isValidKey(key: string, object: object): key is keyof typeof object { return key in o

2020-12-20 18:02:44 28161 1

原创 Vue 3，用于监听某一个实例宽高，解决v-show下，读取宽高为0和两端自适应等问题

不知道你是否面临过这样一个问题，当用display来实现某组件的显示和隐藏时，会导致你所监听的实例宽高为0（监听事件：通过ref获取实例宽高）。 const btnSlider = ref(null) // 获得对应实例，这里记得在setuo()中return出去 const getBtnSlider = () => { return unref(btnSlider) } const getBtnSize = () => { // 用来获取当前滑动按钮的宽度或长度

2020-10-11 18:39:58 2423

原创 Vue只实现一级路由过渡动画，巧妙利用绑定的key值

1、实现路由过渡动画本人为了实现路由过度的动画效果，在网上查阅了很多，发现他们的教程版本可能很低，很难实现动态路由下新旧组件的过渡动画。研究半天，才明白是因为未绑定key值，所以旧组件未产生缓存，而是直接消失。所以呈上代码：<template> <transition :name="transitionName"> <router-view class="child-view" :key="key"></router-view> <

2020-08-21 17:48:06 378

原创 Vue Cli4.5x版本，v-model绑定组件指令，子组件无法直接访问:value，和通过input修改

本人直接上手了脚手架4.5版本，它的挂载方式是createApp(App).use(store).use(router).mount('#app')所以发现这个版本devtools打不开，有大佬懂得如何配置可以评论告诉我，感谢！所以也无法确切知道新版本下v-mind传递原理，以往我们都知道（如下父组件中Template某部分） <component v-model="text"></component> <component :value="text" @

2020-08-20 18:59:10 774 3

原创 EnjoyHint 实现自动跳转

修改enjoyhint.js中的stepAction函数，如图所示：添加window.location.hash = step_data.selector;

2020-04-23 21:26:00 257

qq_41411483的博客