- 博客(141)
- 收藏
- 关注
RSS订阅原创 实现弧形切角两种方式
给长方形的边指定长度区域然后设置成圆角；唯一的缺点弧度的位置无法加阴影，以及弧的弧度不太好控制；目前我还没有找到更好的方式能快速精准的画出这个图形，有更好方法的麻烦留下你的建议；
2023-08-03 17:46:24
452
原创 微信小程序实现过滤器功能
wxs 与 js 是不同的语言，有自己的语法。所以在写方法的时候需要注意有些 js 的 api 是无法使用的；比如：new Date() 在 wxs 是不支持的，但是小程序提供了一个全局函数 getDate(）代替。如果是 js 里面对数据进行过滤处理直接写一个方法然后调用就可以了，如果想在 wxml 里面使用过滤的话则需要借助 wxs 来实现；使用 wxs 标签来引入，src 文件的路径，module 则是声明一下这个过滤器的调用名称；1、新增一个 wxs 为后缀的文件 filter.wxs。
2023-08-01 10:11:16
1799
原创 微信小程序打开地图的方法
在地图上显示指定位置的标记点，并且支持调用内置地图进行导航；打开地图后点击右下角导航图标会弹出选项弹窗，让用户选择使用哪一个地图应用程序进行导航；这个方式在真机上有效，可以直接弹出一个弹窗，选择app之后如果手机下载了则可以打开并跳转到对应app里面去；没有下载则直接跳转到下载页；
2023-07-27 16:11:02
2888
原创 微信小程序生成二维码（weapp-qrcode）可添加logo
1、image 的路径如果是网络图片的话会显示不出来，需要使用 wx.getImageInfo（需要在小程序后台配置 download 域名）去获取图片信息；3、在回调函数 callback 中处理 canvas 的时候需要设置定时器以兼容安卓部分机型出现的问题；1、根据 GitHub 指引将 weapp-qrcode 放到本地 uitl 文件夹下；2、image 图片格式是 svg 的时候不显示，需要替换成 png 的；3、在 js 文件中引入 weapp-qrcode 以及使用；
2023-07-26 16:24:29
2615
原创 微信小程序前端根据路径生成访问二维码
1、使用 getwxacode 这个接口，我们需要传递参数是 path，2、使用 getwxacodeunlimit 这个接口，我们需要使用传递 scene 传递参数，路径是 page 不可以拼接任何参数；并且这个接口的 page 必须是发布过的代码里存在的路径；个人觉得还是由后端来处理二维码，前端直接展示比较好；原因是在获取 access_token 的时候请求的参数会暴露你的 appid 和 appSecret；
2023-06-05 17:28:13
1100
原创 微信小程序相关问题整理（一）
组件json中添加 “component”: true在配置里面设置 navigationStyle:custom ,原生和uni-app 有区别；获取设备头部信息：uni.getSystemInfo({})，获取状态栏高度，导航栏高度；
2023-06-02 15:07:44
950
原创 js小数计算精度丢失问题解决（加、减、乘、除）
其原因就是十进制和二进制之间互相转化的时候小数点后的转换可能会出现无限循环的情况，由于存储结构中的尾数最多只能表示 53 位，这时候会做类似四舍五入的操作，于是精度也就丢失了；由于 toFixed 转化后是字符串类型，想要去掉后面无用的 0 ，需要转化为 数字类型（Number、parseFloat）；在 javascript 语言中，我们经常会遇到金额、比例的计算，所以需要在计算的时候进行特殊处理；由于整数计算不会出现精度丢失的问题，所以可以先将小数转化为整数，计算完之后在转化为小数；
2023-05-05 17:44:12
2643
原创 微信小程序接入客服功能
3、在代码中：需要将 button 组件 open-type 的值设置为 contact，当用户点击后就会进入客服会话；如果用户在会话中点击了小程序消息，则会返回到小程序，开发者可以通过 bindcontact 事件回调获取到用户所点消息的页面路径 path 和对应的参数 query，此外，开发者可以通过设置 session-from 将会话来源透传到客服。2、在功能 - 客服 - 小程序客服：新增一个客服；可以在网页、移动端上配置客服的接入信息；当多个客服处于在线的情况下，谁先点开客服小程序，就接入谁；
2023-05-04 11:37:42
2332
原创 前端面试题 - 基础（HTML、HTTP、WEB）
1、在线的情况下：浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。alt：是 img 的特有属性，是图片内容的等价描述；
2023-04-14 20:56:10
427
原创 面试题总结-JS
JavaScript 在早期的设计中就没有模块、包、类的概念，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化；可视区域渲染：假设总数据为1000条，可视区域高度为500px，每个列表item高度为50px，那么在可视区域内只需要渲染10个就可以了，而不是1000条，根据用户滚动在对可视区域的节点位置和下标进行计算，在总数据中进行截取替换，每次只是渲染可视区域的数据节点；ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
2023-04-14 20:55:22
1870
原创 前端面试题总结-VUE
vue 除了内置指令之外，还允许用户自定义指令来进行扩展，指令的目的在于将操作 dom 的逻辑进行复用；1、指令的生命周期bind：只调用一次，指令第一次绑定到元素上调用；执行一些初始化操作；inserted：绑定指令的节点插入到页面中（仅保证父节点存在，但不一定已被插入文档中）；update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前；指令的值可能发生了改变，也可能没有；componentUpdate：指令所在的节点及其子节点的Vnode 全部更新后调用。
2023-04-08 13:12:36
459
原创 前端面试题-CSS
是CSS3新增的标准属性，它的作用很单纯，就是"增强页面渲染性能"，当我们在通过某些行为触发页面进行大面积绘制的时候，浏览器往往是没有准备，只能被动的使用CUP去计算和重绘，由于事先没有准备，对于一些复杂的渲染可能会出现掉帧、卡顿等情况。不存在在DOM文档中，是新创建的虚拟元素，代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于DOM树中；重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。
2023-04-04 23:26:16
369
原创 vue 项目 SEO 解决方案 - 预渲染
读取配置，获取预渲染页面 —— 模拟浏览器打开页面 —— 页面触发渲染 —— 渲染出当前页面内容 —— 获取当前所有 DOM 结构 —— 生成 HTML 文件。我们都知道 VUE、React 这种框架写的项目都是 js 动态渲染的页面，这样就无法用爬虫拿到页面上的静态资源；也就是不利于 SEO;针对 VUE 我们有两种主流的方案：预渲染、服务端渲染；这样打包的时候就能看到 dist 中打包出了多个页面的静态资源；2、预渲染的页面都需要配置路由。main.js 触发预渲染。1、这种方法无法配置动态路由。
2023-03-23 23:09:27
766
原创 微前端-qiankun
同时，子应用需要单独维护一份 shared 实例，在独立运行时使用自身的 shared 实例，在嵌入主应用时使用主应用的 shared 实例，这样就可以保证在使用和表现上的一致性；因为在 qiankun 中，主应用是通过 fetch 来拉取子应用的模板，然后渲染在主应用的 dom 上的，所以还是运行在同一个域名上，也就是主应用的域名；微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题；
2023-03-13 22:25:11
1233
1
原创 网页录屏 - rrweb
录制的时候，通过浏览器的 MutationObserver API 来对 DOM 操作进行监听和收集；，该 API 会在一系列 DOM 变化后，通过批量异步的方式去触发回调，并将 DOM 变化通过 MutationRecord 数组传给回调方法；record 方法内部会根据事件类型去初始化事件的监听，例如 DOM 元素变化、鼠标移动、鼠标交互、滚动等都有各自专属的事件监听方法。也可以使用 rrweb 提供的 replay 来实现回放，如果需要功能更强的回放播放器 UI，可以使用 rrweb-player；
2023-03-13 00:15:40
1135
原创 页面置灰（PC后台、微信小程序）
由于接入的有政府的项目，在这段时间需要把公司官网，小程序首页置灰；接到需求真的是一脸懵，不过百度之后恍然大悟，感叹 CSS3 是个好东西，也让我学会一个新熟悉 filter 滤镜；
2022-12-01 16:04:04
1091
原创 微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了，刚好遇到微信小程序和内嵌 H5 之间来回跳转，来回交互；这里记录一下微信小程序和 H5 之间交互的实现；（我的小程序是通过 un-app 框架来写的，内部代码基本都是 vue）
2022-11-21 14:34:44
9218
原创 vue+vant实现文本超出一行显示展开和收起
随手记录一个小的组件：再写 H5 的时候遇到这样一个小的效果，文本超出一行右侧显示展开按钮，点击可以展开和收起超出的文本；效果很简单，这里记录一下，方便以后之间用；后面需要的时候还可以动态传入字体颜色、字号等属性；我这里是在 H5 项目中使用的，引用了插件会自动将 px 单位转化为 rem；
2022-11-14 17:28:27
2353
原创 vue2 封装的一个抽奖组件
年底了，公司开始各种优惠券抽取活动，在 H5 页面实现一个点击抽奖活动，中奖是后端控制，根据接口返回最终抽中接口返回的奖项；
2022-11-10 11:37:13
789
2
原创 webpack5学习进阶：多页面应用、Tree Shaking、PWA、Shimming
在线服务在服务停止后，浏览器是无法正常访问到网页的，同时在线服务会把启动编译的代码放在内存里，也就是说当我们修改代码之后重新启动服务，这个时候并不会把修改同步打包到dist文件夹下面，因为它放在内存里面了；在实际的项目开发中，一个完整的系统不会将所有的功能都放在一个网页里，这是因为会导致网页的性能不佳；打包过后，app1.js和app2.js都会被打包进dist/main.js文件中，按照数组里面的前后顺序，webpack会将前面的文件先打包，并且放在main.js的上面；......
2022-07-29 16:05:14
687
原创 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
1139
原创 webpack5 学习进阶：开发效率和代码规范
historyApiFallback在单页面应用中，使用history路由时，当页面找不到资源时会返回404，可以通过这个参数让所有的404响应都被替换为index.html；开发环境下，我们往往需要开启一个web服务，方便我们模拟一个用户从服务器访问我们的web服务的场景，用来观察我们的代码在客户端的表现；ESLint是用来扫描代码是否符合规范的工具，严格来说eslint和webpack是无关的，但是在工程化的开发环境中，它又是不可或缺的；可以实现页面的部分刷新；..................
2022-07-22 16:40:29
597
原创 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
429
原创 Vue 高阶组件和 mixins
对于习惯使用 Vue 框架的人来说，高阶组件（HOC）这个概念是相对比较陌生的；高阶组件在 React 框架中是比较常见的一个概念，但是 Vue 中也是可以使用到高阶组件的；高阶函数是为一个函数接受一个函数作为参数并返回一个新函数，使得新函数具有这个函数原先的功能又能够自定义的添加新的功能；高阶组件是一个将组件作为参数并返回一个新组件的函数‘；从这里来看，高阶组件其实是一个函数；因此高阶组件也具有高阶函数的一些特性；返回的新组件具有原组件的功能，同时也有了新自定义的功能；具体点高阶组件其实就是装饰者模式的应
2022-07-14 15:25:48
1036
原创 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
1468
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
2188
7
原创 微信小程序实现OCR扫描识别
在小程序还发过程中，经常会遇到对证件（身份证、驾驶证、营业执照）的扫描识别认证功能；这里我根据自己的经历借鉴总结一下相关的方法；第一步需要在微信小程序后台添加第三方插件，设置-第三方设置-插件管理，输入**ocr支持**搜索添加就可以了；OCR支持插件添加成功之后需要到开放社区购买识别次数，可以根据自己公司的业务需求量购买；（个人觉得有点贵）在 app.json 中声明引入插件，version 使用最新版本，provider 是OCR支持的 AppID；在使用OCR支持的页面 json 中引入组件页面
2022-06-07 17:16:02
12340
1
原创 前端代码 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
3280
1
原创 uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时，有些功能会需要统计用户点击次数、登录人数、访问时长等数据，用来分析用户的一些行为；这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程；1、注册友盟账号友盟官网：https://www.umeng.com/；按照指引注册友盟账号，如果是企业使用，建议使用企业邮箱；2、申请 AppKey登录之后产品-统计分析-小程序统计-进入控制台，这里需要绑定邮箱，绑定成功之后就可以创建自己的应用；点击 添加应用 来添加自己的小程序；按照指引填写小程序相关
2022-05-20 10:55:38
2115
原创 微信小程序嵌入 H5 页面（web-view）
在开发微信小程序的时候，我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况；微信小程序自带的 web-view 组件相当于 HTML页面中的 iframe ，方便我们在微信小程序中打开一个 H5 页面；官网描述：承载网页的容器；会自动铺满整个小程序页面，个人类型的小程序暂不支持使用；所以使用这个组件，必须是在企业号小程序里面；使用：1、配置业务域名在微信小程序后台，开发-开发管理-开发设置-业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；2、使用组件每个页面
2022-05-13 17:28:23
23917
3
原创 电脑二次激活
这篇文章是我二次激活自己的笔记本电脑的操作步骤，在这里记录一下，希望能够帮助到需要的人。1、什么时候需要二次激活电脑呢？当你的电脑屏幕上一直显示 “您的 Windows 许可证即将过期” 这种类型的字样，这就表明你的电脑需要二次激活了；建议不要网上直接找什么激活码，那些基本上都是已经无法使用的；当然如果你的运气比较好，找到一个还可以使用的激活码那就直接激活就好了；2、二次激活步骤在电脑桌面上，鼠标右键新建一个文本文档，将文档重命名为：二次激活，文档后缀名改为 .bat ；然后右键编辑文件，输入如
2022-04-12 12:58:40
1341
原创 微信小程序 - 使用 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
23970
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
2025
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人