- 博客(124)
- 收藏
- 关注
RSS订阅原创 vue 项目 SEO 解决方案 - 预渲染
读取配置，获取预渲染页面 —— 模拟浏览器打开页面 —— 页面触发渲染 —— 渲染出当前页面内容 —— 获取当前所有 DOM 结构 —— 生成 HTML 文件。我们都知道 VUE、React 这种框架写的项目都是 js 动态渲染的页面，这样就无法用爬虫拿到页面上的静态资源；也就是不利于 SEO;针对 VUE 我们有两种主流的方案：预渲染、服务端渲染；这样打包的时候就能看到 dist 中打包出了多个页面的静态资源；2、预渲染的页面都需要配置路由。main.js 触发预渲染。1、这种方法无法配置动态路由。
2023-03-23 23:09:27
224
原创 微前端-qiankun
同时，子应用需要单独维护一份 shared 实例，在独立运行时使用自身的 shared 实例，在嵌入主应用时使用主应用的 shared 实例，这样就可以保证在使用和表现上的一致性；因为在 qiankun 中，主应用是通过 fetch 来拉取子应用的模板，然后渲染在主应用的 dom 上的，所以还是运行在同一个域名上，也就是主应用的域名；微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题；
2023-03-13 22:25:11
599
原创 网页录屏 - rrweb
录制的时候，通过浏览器的 MutationObserver API 来对 DOM 操作进行监听和收集；，该 API 会在一系列 DOM 变化后，通过批量异步的方式去触发回调，并将 DOM 变化通过 MutationRecord 数组传给回调方法；record 方法内部会根据事件类型去初始化事件的监听，例如 DOM 元素变化、鼠标移动、鼠标交互、滚动等都有各自专属的事件监听方法。也可以使用 rrweb 提供的 replay 来实现回放，如果需要功能更强的回放播放器 UI，可以使用 rrweb-player；
2023-03-13 00:15:40
111
原创 页面置灰（PC后台、微信小程序）
由于接入的有政府的项目，在这段时间需要把公司官网，小程序首页置灰；接到需求真的是一脸懵，不过百度之后恍然大悟，感叹 CSS3 是个好东西，也让我学会一个新熟悉 filter 滤镜；
2022-12-01 16:04:04
487
原创 微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了，刚好遇到微信小程序和内嵌 H5 之间来回跳转，来回交互；这里记录一下微信小程序和 H5 之间交互的实现；（我的小程序是通过 un-app 框架来写的，内部代码基本都是 vue）
2022-11-21 14:34:44
3060
原创 vue+vant实现文本超出一行显示展开和收起
随手记录一个小的组件：再写 H5 的时候遇到这样一个小的效果，文本超出一行右侧显示展开按钮，点击可以展开和收起超出的文本；效果很简单，这里记录一下，方便以后之间用；后面需要的时候还可以动态传入字体颜色、字号等属性；我这里是在 H5 项目中使用的，引用了插件会自动将 px 单位转化为 rem；
2022-11-14 17:28:27
844
原创 vue2 封装的一个抽奖组件
年底了，公司开始各种优惠券抽取活动，在 H5 页面实现一个点击抽奖活动，中奖是后端控制，根据接口返回最终抽中接口返回的奖项；
2022-11-10 11:37:13
277
原创 webpack5学习进阶：多页面应用、Tree Shaking、PWA、Shimming
在线服务在服务停止后，浏览器是无法正常访问到网页的，同时在线服务会把启动编译的代码放在内存里，也就是说当我们修改代码之后重新启动服务，这个时候并不会把修改同步打包到dist文件夹下面，因为它放在内存里面了；在实际的项目开发中，一个完整的系统不会将所有的功能都放在一个网页里，这是因为会导致网页的性能不佳；打包过后，app1.js和app2.js都会被打包进dist/main.js文件中，按照数组里面的前后顺序，webpack会将前面的文件先打包，并且放在main.js的上面；......
2022-07-29 16:05:14
319
原创 webpack5学习进阶：模块、依赖与扩展功能（PostCSS、Web Works、TypeScript）
4、resolver的主体功能就是解析模块，它是基于enhanced-resolve这个包来实现的，所以在webpack中无论使用什么样的模块引用语句，最终都是使用enhanced-resolve这个包的API来实现模块解析的；3、每一个webpack打包都会创建一个compiler对象，它会走完整个生命周期的过程，webpack所有模块的解析都是compiler对象内置模块的解析器（resolvers）去工作的；/’来找到外部的文件；这也操作起来会比较麻烦；............
2022-07-26 14:51:00
508
原创 webpack5 学习进阶：开发效率和代码规范
historyApiFallback在单页面应用中，使用history路由时，当页面找不到资源时会返回404，可以通过这个参数让所有的404响应都被替换为index.html；开发环境下，我们往往需要开启一个web服务，方便我们模拟一个用户从服务器访问我们的web服务的场景，用来观察我们的代码在客户端的表现；ESLint是用来扫描代码是否符合规范的工具，严格来说eslint和webpack是无关的，但是在工程化的开发环境中，它又是不可或缺的；可以实现页面的部分刷新；..................
2022-07-22 16:40:29
323
原创 webpack5入门基础
在根目录下创建webpack.config.js文件，用来配置webpack的配置项；entry'./src/index.js',//入口文件路径output{filename'bundle.js',//打包后的文件名pathpath.resolve(__dirname,'./dist'),//打包后文件放置的位置cleantrue//每次打包前清空dist文件夹}}为了获取绝对路径，我们需要引入node.js的path模块；{rules。........................
2022-07-20 15:10:25
274
原创 Vue 高阶组件和 mixins
对于习惯使用 Vue 框架的人来说，高阶组件（HOC）这个概念是相对比较陌生的；高阶组件在 React 框架中是比较常见的一个概念，但是 Vue 中也是可以使用到高阶组件的；高阶函数是为一个函数接受一个函数作为参数并返回一个新函数，使得新函数具有这个函数原先的功能又能够自定义的添加新的功能；高阶组件是一个将组件作为参数并返回一个新组件的函数‘；从这里来看，高阶组件其实是一个函数；因此高阶组件也具有高阶函数的一些特性；返回的新组件具有原组件的功能，同时也有了新自定义的功能；具体点高阶组件其实就是装饰者模式的应
2022-07-14 15:25:48
651
原创 vue实现打印的方法（自动分页）
vue 项目实现点击按钮打印指定容器里面的内容，并且需要根据内容自动分页；1、封装一个js文件2、全局引入，在 main.js 文件中3、使用4、打印设置注意：设置容器样式为 打印的是个空白；1、封装一个js文件2、页面引入并使用最后、分享一下修改 @page 配置的地址https://cloud.tencent.com/developer/section/1072314...
2022-07-13 17:27:56
868
1
原创 VUE H5 页面借助 dsbridge 嵌入到 app 中（前端）
H5 页面嵌入 app 中，不得不面对 web 和 native 之间进行交互的问题，比如：传递参数、调用函数等；至于交互的桥梁目前 github 上有一些开源的，其中使用最广的是 jsBridge，然而，最近刚开源了一个新项目 dsbridge；本文就看看 dsbridge 是如何实现 web 和原生之间同步或异步的调用彼此的函数，以及传递参数的；官网：https://github.com/wendux2、创建一个新的 js 文件，引入 dsbridgecall前端主动触发与原生约定好的方法，进而
2022-06-14 15:21:59
1249
2
原创 微信小程序实现OCR扫描识别
在小程序还发过程中，经常会遇到对证件（身份证、驾驶证、营业执照）的扫描识别认证功能；这里我根据自己的经历借鉴总结一下相关的方法；第一步需要在微信小程序后台添加第三方插件，设置-第三方设置-插件管理，输入**ocr支持**搜索添加就可以了；OCR支持插件添加成功之后需要到开放社区购买识别次数，可以根据自己公司的业务需求量购买；（个人觉得有点贵）在 app.json 中声明引入插件，version 使用最新版本，provider 是OCR支持的 AppID；在使用OCR支持的页面 json 中引入组件页面
2022-06-07 17:16:02
5615
原创 前端代码 Jenkins 线上打包报错：TypeError: StackFrame is not a constructor
两个月没来公司上班，今日开工遇到一个及其有意思的问题：Jenkins 线上打包前端代码，在控制台日志中打包的时候报错：因为疫情期间大家都是居家办公，Jenkins 服务器配置和前端项目配置都没有改动，所以看到这种报错一时无从下手，但是可以看出这是 引入出了问题，具体啥问题下面梳理一下；1、翻译报错信息猛的一看不知道这个到底是啥意思；2、查找 babel 配置项目是 vue-cli3 搭建的，找到了 babel.config.js 文件：vue/cli-plugin-babel/preset 在
2022-06-06 14:04:08
2489
1
原创 uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时，有些功能会需要统计用户点击次数、登录人数、访问时长等数据，用来分析用户的一些行为；这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程；1、注册友盟账号友盟官网：https://www.umeng.com/；按照指引注册友盟账号，如果是企业使用，建议使用企业邮箱；2、申请 AppKey登录之后产品-统计分析-小程序统计-进入控制台，这里需要绑定邮箱，绑定成功之后就可以创建自己的应用；点击 添加应用 来添加自己的小程序；按照指引填写小程序相关
2022-05-20 10:55:38
1494
原创 微信小程序嵌入 H5 页面（web-view）
在开发微信小程序的时候，我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况；微信小程序自带的 web-view 组件相当于 HTML页面中的 iframe ，方便我们在微信小程序中打开一个 H5 页面；官网描述：承载网页的容器；会自动铺满整个小程序页面，个人类型的小程序暂不支持使用；所以使用这个组件，必须是在企业号小程序里面；使用：1、配置业务域名在微信小程序后台，开发-开发管理-开发设置-业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；2、使用组件每个页面
2022-05-13 17:28:23
19057
2
原创 电脑二次激活
这篇文章是我二次激活自己的笔记本电脑的操作步骤，在这里记录一下，希望能够帮助到需要的人。1、什么时候需要二次激活电脑呢？当你的电脑屏幕上一直显示 “您的 Windows 许可证即将过期” 这种类型的字样，这就表明你的电脑需要二次激活了；建议不要网上直接找什么激活码，那些基本上都是已经无法使用的；当然如果你的运气比较好，找到一个还可以使用的激活码那就直接激活就好了；2、二次激活步骤在电脑桌面上，鼠标右键新建一个文本文档，将文档重命名为：二次激活，文档后缀名改为 .bat ；然后右键编辑文件，输入如
2022-04-12 12:58:40
759
原创 微信小程序 - 使用 uni-app 开发小程序以及部分功能实现
文章目录一、uni-app1、简介2、开发工具3、新建 uni-app项目4、把项目运行到微信开发者工具二、实现tabBar效果1、创建tabBar页面2、配置tabBar三、配置网络请求1、依照官网提示安装、导入、使用2、实战四、uni-app 里面小程序分包1、创建分包目录2、在 pages.json 文件中配置3、创建分包页面五、公用方法封装六、搜索功能1、搜索组件2、搜索建议实现3、本地存储4、过滤器七、上拉加载、下拉刷新1、上拉加载2、下拉刷新八、配置 vuex1、创建文件2、初始化store3、
2022-04-08 17:49:01
16288
2
原创 微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一、自定义组件1、创建组件2、引用组件3、组件和页面区别4、组件样式5、data、methods、properties6、小程序的 data 和 properties 区别7、数据监听器8、纯数据字段9、组件的生命周期10、组件所在页面生命周期11、插槽12、父子组件数据传递13、behaviors二、使用 npm 包1、Vant Weapp三、小程序 API 的 Promise 化1、为什么要 Pronise 化2、实现 Promise 化3、调用 Promise 化的 API四、全局数据共享1、
2022-03-29 18:03:56
1216
原创 微信小程序开发 - 视图与逻辑
文章目录一、页面导航1、声明式导航2、编程式导航3、导航传参二、页面事件1、下拉刷新2、上拉触底三、生命周期四、WXS 脚本1、wxs使用2、wxs 与 js 区别3、内嵌wxs4、外联的 wxs总结一、页面导航页面导航指的是页面直接的互相跳转，浏览器中实现页面导航的方式：a 标签、location.href ；小程序实现页面导航的方式是：声明式导航、编程式导航；1、声明式导航页面上声明一个 <navigator> 导航组件，通过点击这个组件实现页面跳转；可参考：导航组件在使用<
2022-03-21 17:23:31
877
原创 微信小程序开发 - 模板与配置
文章目录一、wxml 模板语法1、数据绑定2、事件绑定3、事件传参与数据同步4、条件渲染 wx:if5、列表渲染 wx:for二、wxss1、rpx 尺寸单位2、样式导入3、全局、局部样式三、全局配置1、window2、tabBar四、页面配置五、网络数据请求总结一、wxml 模板语法1、数据绑定数据绑定的基本原则是：在页面的 js 文件中的 data 定义数据，在 wxml 中使用数据；动态绑定内容：<view>{{info}}</view>动态绑定属性：<ima
2022-03-18 17:44:18
3419
原创 微信小程序开发 - 起步
文章目录1、小程序和普通网页之间的区别2、注册小程序开发账号3、下载小程序开发者工具-微信开发者工具4、创建/导入小程序5、小程序目录结构6、小程序页面组成部分7、json 配置文件的作用8、认识小程序页面9、小程序的宿主环境10、项目成员管理11、小程序发布上线12、获取小程序码1、小程序和普通网页之间的区别运行环境：网页运行在浏览器环境，小程序运行在微信环境中；API：小程序无法调用 DOM、BOM 的API，但是可以调用微信环境中提供的各种 API：地理位置、扫码、支付等；开发模式：网页一般
2022-03-17 12:19:20
1508
原创 微信公众号开发
文章目录一、微信公众号简介二、注册/登录微信公众号三、功能介绍1、编辑模式（个人开发者，无需服务器）2、开发模式四、实战开发1、配置服务器2、模块化五、获取 access_token1、access_token 是什么？2、获取 access_token 功能实现六、自动回复功能1、准备工作2、代码实现七、自定义菜单八、微信中的网页开发1、简单实现2、JS-SDK一、微信公众号简介1、微信公众号是什么？微信公众号平台是给个人、企业和组织提供业务服务与用户管理能力的全新服务平台；2、微信公众号分类
2022-03-15 16:52:01
8452
原创 npm 发布 vue 日历组件包
之前写了一篇文章：NPM 包发包流程，大致介绍了如何通过 npm 发布一个自己的包；这一篇介绍一下如何发布一个自己的 vue 组件库到 npm 上；文章目录一、背景二、准备工作三、组件准备四、发包五、使用六、webpack-simple 构建项目发包最后一、背景为什么要在 npm 上发布自己的 vue 组件库呢？我们都知道在项目开发过程中，经常会遇到相似功能或者可以复用的模块；如果是在同一个项目中我们可以封装一个公用的组件来进行复用；如果公司里面多个项目都有可以复用的模块呢？最简单的当然是直接复制
2022-03-10 11:06:12
1365
原创 vue 项目上传视频到保利威
由于csdn平台审核机制你能携带平台名称，下面以视频平台代替；由于公司的项目跟视频平台代合作，公司的视频会上传到视频平台代云点播平台然后在从平台获取视频播放；这里是上传和播放的 vue 实现；只是简单的实现，具体的操作还需要根据自己的需求进行更改；1、注册账户：https://www.polyv.net/2、进入的后台管理 选择云点播功能3、进入api接口选项 并且会拿到你专属的 【userid】【writeToken】【secretkey】这里的 userid、writetoken、readt
2022-03-08 13:26:39
1817
原创 vue 项目中高德地图 API 使用流程
文章目录一、在高德地图开放平台注册账号并登录、认证二、申请Key三、项目使用最后一、在高德地图开放平台注册账号并登录、认证1、网址：https://lbs.amap.com/api/jsapi-v2/summary/；2、认证：认证方式分为个人认证和企业认证，这个需要根据自己的需要按照流程填写认证信息；二、申请Key在 控制台 -> 应用管理 -> 我的应用 点击 创建新应用 填写相关申请信息：创建应用之后点击添加按钮：这里可以选择 “Web端(JS API)” 或者 “Web
2022-03-04 13:55:23
2978
3
原创 vue 项目中百度地图 API 使用流程
文章目录一、在百度地图开放平台注册账号并登录二、认证一、在百度地图开放平台注册账号并登录网址：http://lbsyun.baidu.com/index.php?title=jspopularGL二、认证认证方式分为：个人认证、企业认证；这个需要根据自己的需要按照......
2022-03-03 17:07:08
2996
原创 Promise 实现原理
文章目录一、Promise 介绍二、promise 源码实现一、Promise 介绍定义Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象；Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。特点Pr
2022-02-21 17:59:06
14476
3
原创 NPM 包发包流程
项目中经常回使用到第三方的插件，那么我们如何自己来发一个 npm 包供自己使用呢？下面就从入门开始梳理一下 npm 包发布的流程；文章目录1、必备环境2、npm 源管理3、注册账号4、创建 npm 包5、自己的项目6、发包7、几个报错处理8、其他问题1、必备环境要使用 npm 需要先安装 node.js ，npm 是随同 node 一起安装的包管理工具，node下载地址：https://nodejs.org/zh-cn/download/2、npm 源管理npm 发包必须使用 npm 的源镜像，如
2022-01-24 17:11:41
2496
原创 Vue2.x 源码 - ref 和 $refs
上一篇：Vue2.x 源码 - v-modelref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。文章目录`$refs` 的注册解析获取元素上的 `ref` 值总结$refs 的注册在函数 initLifecycle 上会往 vm 上设置一个 key 为 $refs 值为一个对象，在src/core/instance/lifecycle.js 文件中：fu.
2022-01-18 16:26:40
1044
原创 Vue2.x 源码 - event
上一篇：Vue2.x 源码 - transition-groupVue 里可以绑定原生的 DOM 事件，也可以绑定自定义事件；这里看看他的源码实现；编译1、在 parse 阶段，会执⾏ processAttrs ⽅法，它的定义在 src/compiler/parser/index.js 中：export const onRE = /^@|^v-on:/export const dirRE = process.env.VBIND_PROP_SHORTHAND ? /^v-|^@|^:|^\.|^.
2022-01-12 17:29:49
476
原创 Vue2.x 源码 - transition-group
上一篇：Vue2.x 源码 - transition上一章我们看来一下<transiiton> 组件的实现原理，它只能针对单⼀元素实现过渡效果，Vue 还提供了 <transition-group> 组件来实现多个元素/组件的过渡效果；<transition-group> 渲染一个真实的 DOM 元素；默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染；注意：每个 <transition-group> .
2022-01-07 16:31:05
934
原创 Vue2.x 源码 - transition
上一篇：Vue2.x 源码 - keep-aliveVue 提供了一整套过渡的解决方案，<transition> 组件，我们可以利用它配合一些 CSS 样式很方便的实现过渡动画，也可以利用它配合 JavaScript 的钩子函数实现动画（v-if、v-show、动态组件、组件根节点）；文章目录1、源码实现2、props3、事件4、enter & leaveenterleave总结<transition> 组件作为单个元素/组件的过渡效果，只会把过渡效果应用到其包裹的.
2022-01-07 11:39:42
1169
原创 Vue2.x 源码 -slot
上一篇：Vue2.x 源码 - 异步组件Vue 的组件提供了⼀个⾮常有⽤的特性 —— slot 插槽，它让组件的实现变的更加灵活。我们平时在 开发组件库的时候，为了让组件更加灵活可定制，经常⽤插槽的⽅式让⽤户可以⾃定义内容。插槽分为：默认插槽、匿名插槽 、命名插槽 和 作⽤域插槽，它们可以解决不同的场景，但它是怎么实现的呢，下⾯我们就从源码的⾓ 度来分析插槽的实现原理。Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope文章目录默认插槽匿名插槽命名插槽作用域插槽.
2021-12-31 16:05:28
1014
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人