一一

原创 Electron 整理文档

简介发展历程框架选择前景架构electron 的架构设计很大程度上是受到 Chromium 的启发。Chromium 是 Google 开源的浏览器内核代码，Chrome、Edge、Opera 等等浏览器都是基于 Chromium 来实现的。Chromium 堪称是全世界最复杂的软件应用netv8SkiaBlink在浏览器实现方面是没有标准规范的，这取决于不同浏览器内部的实现细节。

原创 高德地图脚本加载异常，浏览器报错

高德地图脚本加载异常

原创 微前端初尝试

微前端概念:一种将独立的前端应用组成一个更大的整体的架构风格核心思想:分而自治，将大的应用拆分成若干个小的解耦自治应用优势:各个应用独立开发、测试和部署,每个应用技术栈自由,代码高内聚低耦合,代码迭代可逐个替换旧模块,团队自治适用场景:新系统整合旧系统功能,多团队开发/维护大型应用不同模块,现有应用中耦合和复杂度让开发者互相掣肘,现有的构建工具无法支持尝试新的技术栈等集成package 集成将每个微前端发布为一个 node 包，并让容器应用程序将所有微前端应用作为依赖项,这种做法会产生

原创 Pinia

PiniaPinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案,Pinia 支持 Vue2 和 Vue3优势:易于学习,极轻1KB,模块化设计便于拆分状态引入 // src/stores/index.ts import Vue from 'vue'; import { createPinia, PiniaVuePlugin } from 'pinia'; Vue.use(PiniaVuePlugin); expor

原创 TypeScript基础

TypeScript 与 JavaScript 的区别TypeScriptJavaScript 的超集用于解决大型项目的代码复杂性可以在编译期间发现并纠正错误强类型，支持静态和动态类型最终被编译成 JavaScript 代码，使浏览器可以理解支持模块、泛型和接口支持 ES3，ES4，ES5 和 ES6 等社区的支持仍在增长，而且还不是很大JavaScript一种脚本语言，用于创建动态网页作为一种解释型语言，只能在运行时发现错误弱类型，没有静态类型选项可以直接在浏览器中使用

原创 cordova对接微信支付插件cordova-plugin-wechat报普通错误（BaseResp.ErrCode.ERR_COMM）

控制台打印报错普通错误，查看插件代码public static final String ERROR_WECHAT_RESPONSE_COMMON = "普通错误"; 和 case BaseResp.ErrCode.ERR_COMM:ctx.error(Wechat.ERROR_WECHAT_RESPONSE_COMMON);可能是包名及签名不一致造成的，然后和后端对了下确实不一样。包名就是confog.xml里面的id好说，可这个签名怎么看呢，而且cordova run 和cordova build.

原创 cordova-plugin-alipay-v2使用沙箱环境测试支付

昨天是憨憨的一天，对接支付宝支付一直显示：商家订单参数异常，请重新发起付款。然后被后端小哥指出他给我的是沙箱环境我调的是真正的支付宝，害，改完代码下个测试版的支付宝测试就可以了。解决办法：在platforms\android\app\src\main\java\cn\hhjjj\alipay\alipay.java中修改payment中代码，在PayTask前面加一行代码：com.alipay.sdk.app.EnvUtils.setEnv(com.alipay.sdk.app.EnvUtils.

原创 nrm ls 报错internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)

公司电脑太卡了一气之下重置了，然后nrm报错了,查找nrm安装路径where nrm 将路径打开找到路径下的cli.js修改17行const NRMRC = path.join(process.env.HOME, '.nrmrc');为const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');重新nrm ls即可...

原创 Vue3源码阅读(十一)patch

PatchVue 在通过 VNode 节点渲染 DOM 时,并不是通过当前的 VNode 节点去暴力的更新 DOM 节点,而是对新旧两个 VNode 节点通过 patch 算法进行比较,然后通过对比结果找出差异的属性或节点进行按需更细。显而易见,patch 能够减少不必要的开销,提升性能。过程:创建需要新增的节点移除已经废弃的节点移动或修改需要更新的节点patchFlag的优化：细化元素类型标记,拆出元素中静态属性和可变属性等,不对不会再变化的静态属性进行元素的全量比较// 渲染过程

原创 Vue3源码阅读(十)响应式系统总结

响应式系统总结Vue2响应式原理采用的是defineProperty,而vue3选用的是Proxy+Reflect来实现的数据代理。这两者前者只能劫持对象的属性修改对象属性的权限标签,后者是代理整个对象并区分浅层代理。性能上proxy会更加优秀。且Object.defineProperty对新增属性需要手动进行Observe。vue2.x版本使用了Object.defineProperty来实现双向绑定,根据具体的key去读取和修改。其中的setter方法来实现数据劫持的,getter实现数据的修改

原创 Vue3源码阅读(九)baseHandlers

baseHandlers实现源码在packsages/reactivity/baseHandlers.ts在 basehandlers 中包含了四种 handlermutableHandlers 可变处理readonlyHandlers 只读处理shallowReactiveHandlers 浅观察处理（只观察目标对象的第一层属性）shallowReadonlyHandlers 浅观察 && 只读处理其中 readonlyHandlers shallowReactive

原创 Vue3源码阅读(八)effect

effecteffect 作为 reactive 的核心，主要负责收集依赖,更新依赖,其会在 mountComponent、doWatch、reactive、computed 时被调用。实质:其实就是一个改良版的发布订阅模式。get 时通过 track 收集依赖，而 set 时通过 trigger 触发了依赖，而 effect 收集了这些依赖并进行追踪，在响应后去触发相应的依赖。effect 也正是 Vue3 响应式的核心。参数fn 回调函数options 参数执行在调用 effec

原创 Vue3源码阅读(七)computed

computed实现源码在packsages/reactivity/computed.ts使用传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象 const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 错误！或者传入一个拥有 get 和 set 函数的对象

原创 Vue3源码阅读(六)reactive

reactive实现源码在packsages/reactivity/reactive.ts目录结构── src ├── baseHandlers.ts // 基本类型的处理器 ├── collectionHandlers.ts // Set Map WeakSet WeckMap的处理器 ├── computed.ts // 计算属性，同Vue2 ├── effect.ts // reactive 核心，处理依赖收集，依赖更新 ├── ind

原创 Vue3源码阅读(五)ref

ref实现源码在packsages/reactivity/ref.ts接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。ref 跟 reactive 都是响应系统的核心方法，作为整个系统的入口可以将 ref 看成 reactive 的一个变形版本reactive 内部采用 Proxy 来实现，而 Proxy 只接受对象作为入参，这才有了 ref 来解决值类型的数据响应，如果传入 ref 的是一个对象，内部也会调用 reactive

原创 Vue3源码阅读(四)mount

Mount源码位于packages/runtime-core/src/apiCreateApp.ts mount( rootContainer: HostElement, isHydrate?: boolean, isSVG?: boolean ): any { // 若还未渲染 if (!isMounted) { //调用createVNode获取vnode,rootCompon

原创 Vue3源码阅读(三)shared中常用函数

工具函数源码位于shared/src/index.tsEMPTY_OBJ 空对象// Object.freeze是冻结对象,开发环境返回被冻结的空对象export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__ ? Object.freeze({}) : {}EMPTY_ARR 空数组export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []NOO

原创 Vue3源码阅读(二)createApp

CreateApp重点在于 ensureRenderer // rendererProps来自于两部分组成： // nodeProps,查看runtime-dom/patchProps.ts,集合了原生dom方法，处理dom // patchProps,查看runtime-dom/patchProps.ts,处理元素属性等。 const rendererOptions = extend({ patchProp }, nodeOps) functi

原创 Vue3源码阅读(一)概览

源码（Vue3.2）目录结构├── .circleci // CI 配置目录├── .ls-lint.yml // 文件命名规范├── .prettierrc // 代码格式化 prettier 的配置文件├── CHANGELOG.md // 更新日志├── LICENSE├── README.md├── api-extractor.json // TypeScript 的API提取和分析工具├── jest.config.js // 测试框架 jest 的配置文件├── n

原创 vue-composition-api

原创 Vue 3 + Typescript + Vite

Vue 3 + Typescript + Vite(摸鱼试试新的好玩的,仅框架搭建)项目地址升级 node 版本到最新稳定版(Vite 构建工具 Node.js 版本>= 12.0.0)个人使用的第二种,需要的时候自己切换版本方法一:nvm install stable使用 nvm 安装最新稳定版 Node.js方法二:github 搜索 Kenshin/gnvm,下载 gnvm.exe 放在 nodejs 文件夹(找不到就 cmd 命令行窗口输入where node会出现 no

原创 封装lodash和ramda中常用方法并发布自己的npm包

npm i person-fun-tool即可查看封装均为全挂载在原型链上的方式

原创 echarts在移动端使用tooltip样式穿透

问题：echarts图表的tooltip穿透至弹窗及选择器解决方案1：盖掉它，改定位及优先级，然后发现这个元素echarts最后展示不是在canvas里的是一个position: absolute;z-index:9999999的元素（如图，小声bb：它好过分！）盖掉之后在移动端有一个很奇怪的表现，点击图表-显示标注框-打开弹窗，正常覆盖-此时关闭弹窗，上下滑动页面之后手指点击覆盖不离开图表滑动再次出现标注框-打开弹窗，又出现了样式穿透（不确定是不是echarts的bug）- 解决方案2：想办法在弹.

原创 vue自定义指令防止多次点击，重复请求

- 标签上加 `v-preventReClick`即可//main.ts添加import { DirectiveBinding } from 'vue/types/options';Vue.directive('preventReClick', { inserted(el: HTMLElement, binding: DirectiveBinding) { console.log(el, binding); el.addEventListener('click', () => {

原创 动态路由重复跳转的问题

小姐妹新接手的项目遇到的，用到了动态路由但是debugger调试发现相应角色生成的动态路由children列表里面的值是对的，children中有某个页面但是跳转不过去盲猜是children赋值时间的问题，姐妹说之前确实有赋值时间不对刷新清空的情况已经改掉了盲猜是next()的问题然后去翻官网全局前置守卫发现nextnext(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。next('/')或者 next({ path: '/' }): 跳转.

原创 前端滚动警告Unable to preventDefault inside passive event listener due to target being treated as passive.

正常情况下，浏览器要在执行事件处理函数之后才知道是否调用preventDefault()阻止默认事件，这就导致了浏览器响应滑动有延迟。从chrome56开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。翻找发现是日历组件vue-hash-calendar中TimePicker组件存在e.preventDefault() 且项目中安装了依赖 default-passive-events没找.

原创 常用公共处理方法

暂时写一点加一点吧按照对象数组中某一个属性来进行分组//groupBy方法为lodash中提供arrayGroupBy( list: any[], groupId: string ): Array<{ key: string; list: any[] }> { let listArr = Object.entries(list.groupBy((o) => o[groupId])).map( ([key, list]) => ({ key, .

原创 openlayers使用中判断旋转交互并禁用

普通禁用 mapConfig: { map: { id: 'baseMap', view: { center: { coord: [经度, 纬度], }, zoom: 10, maxZoom: 15, }, events: [.

转载 前端判断文本是否溢出

需求：当一个div的内容过多时，显示省略号，并提供一个显示更多的按钮；如果内容较少，正常展示不提供按钮。查找到的解决方案

原创 移动端直接读取文件进行oss上传文件类型问题

问题：项目中使用cordova插件读取到视频文件为MediaFile类型直传OSS，报错：_getFileSize requires Buffer/File/String- 尝试解决方案1：new Blob(MediaFile) 失败，报错Failed to construct 'Blob'- 尝试解决方案2：转ArrayBuffer再转Blob 失败，报错Must provide String/Buffer/ReadableStream for put import { File } from .

原创 axios的post方法以form-data形式的传参遇到的坑

axios默认Content-type是application/json;charset=UTF-8修改{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}配置。axios.post(url,{jobNumber: ‘430525’, password: ‘123’}, {headers: {‘Content-Type’:‘application/x-www-form-urlencoded’}});但是，改完以后发送请求..

原创 ts类型定义细节

ts类型定义细节整理对象类型(可推断key为string类型)export class Dict<T> { [key: string]: T;}dict: Dict<any> = {};//any位置应换为相应的value类型

原创 vue3尝试整理

vue3安装创建项目安装/升级脚手架未安装过vue-cli npm install -g @vue/cli 或 yarn global add @vue/cli已安装直接升级 npm update -g @vue/cli 或 yarn global upgrade --latest @vue/cli创建项目使用官方的vue-cli脚手架升级安装vue create vue3-test 创建名为vue3-test的项目 cd vue3-test 切入目录运行 yarn serve 或

原创 xcode打包cordova项目生成ipa

Apple ID 及注册账号至https://developer.apple.com/membercenter/index.action及证书provision profiles添加测试设备等，app在打包的时候必须签名，苹果iOS系统在安装app之前会验证Certificate，否则不会通过安装.Provisioning Profile简单来说就是包含Apple ID，证书，和设备ID等各种信息的集合体.一般来说，在打包ipa的时候，必须配置Provisioning Profile.在苹果的开发者...

原创 ios中无法访问http地址

现在ios中一般要求app可以在ipv6环境使用,所有后台需要域名访问,同时ios不能访问非https的资源.开发中可以在xcode的plist中加（域名按需要替换）<key>NSAppTransportSecurity</key><dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSAllowsLocalNetworking<

转载 net::ERR_CLEARTEXT_NOT_PERMITTED

WebView加载网页在9.0中的错误：net::ERR_CLEARTEXT_NOT_PERMITTED解决办法：在AndroidManifest.xml的Application中加入android:usesCleartextTraffic="true"在浏览器运行请求成功200，但在安卓手机跑出现请求失败及上述错误...

原创 cordova+vue项目打包

打debug包 在package.json中scripts下添加如下两条命令配置并直接按顺序运行，成功后至项目文件夹/platforms/android/app/build/outputs/apk/debug/app-debug.apk下查找app-debug.apk "cordova-prod":"vue-cli-servicebuild--destwww", "cordova:android": "cordova run android",打realse包 将已有app.j...

原创 vue+cordova开发app踩坑之视频播放插件闪退（配置文件问题）

使用cordova-plugin-streaming-media进行视频播放但点击播放app闪退查找后发现是插件中plugin.xml中配置没有加入到AndroidManifest.xml中，解决办法：打开plugins文件夹下的cordova-plugin-streaming-media插件文件夹中的plugin.xml文件，并且将 <config-file target="AndroidManifest.xml" parent="/manifest"> <uses

原创 cordova重写手机自带返回按钮方法

let exitnum = 0;let count = 0;document.addEventListener( "backbutton", function(evt) { evt.preventDefault(); console.log(window.location.href); if ( (window.location.href.indexOf("/要查找的根路由") !== -1 &&.

原创 cordova实现app版本更新踩坑

return await axios .get('此处放下载apk文件后端接口url', { headers: { "Content-type": "charset=UTF-8" }, responseType: "blob" }) .then((res: any) => { this.fileHref = "cdvfile://l..