- 博客(155)
- 收藏
- 关注
RSS订阅原创 常用的babel作用
可以根据配置的目标浏览器或者运行环境将ES5+代码自动转换为ES5代码，也是babel的一个模块；主要用于高级语法转换成低级语法，它是webpack的一个loader，用来预处理文件；用来解析React中的JSX语法，同样也是babel的模块。是babel的核心模块，提供转换的API；
2024-12-21 14:14:03
132
原创 因为实例未销毁，MQ服务器CPU使用率过高
原因：公司后台用的是Spring架构，以为把createProducer()写入context上下文，实例会随着Spring容器关闭销毁。没想到Spring只销毁Bean实例，手动创建的不可以销毁。搬了阿里云文档示例，就是没有close导致的。解决方案：消费者消费后手动关闭，调用。问题：生产MQ的CPU使用率过高。
2024-12-12 16:11:56
268
原创 z-index不生效解决方案
z-index是一个层级属性，使用position属性使元素脱离页面成为新的一层，再分别赋值z-index: 0; z-index: 1等控制元素层级时，操作其父级z-index属性。因为子元素层级不能大过其父级元素。故同父级元素情况下，z-index不生效
2024-10-09 16:27:16
408
原创 await嵌套使用
虽然 fun_2 不是 Promise 方式的写法，await fun_2 会等待 fun_2 中的 await fun。await 的作用是可以传递？
2023-06-09 10:50:15
546
原创 独立分包中包含app.wxss的问题
最近升级了微信小程序开发者工具，因npm依赖（gm-crypto）版本过旧，一直使用Stable 210425版本。（gm-crypto报错）最近更新了外网依赖包，并更新了工具版本。独立分包中有一个app.wxss，且读取不到其中的全局样式。仔细阅读了文档后发现，一个工程只能存在一个app.wxss文件。故把独立分包中的app.wxss改名为common.wxss，在对应页面的xxx.wxss文件中使用@import引入。...
2022-06-22 16:02:06
458
转载 常用CSS布局（备以查用）
1. 水平居中6种.parent { text-align: center;}.child { display: inline-block;}.child { margin: 0 auto; width: 100px;}.child { width: 100px; position: relative; left: 50%; margin-left: -50px;}.parent { position: rela
2022-05-25 16:19:00
308
原创 用CSS画个退出按钮
.cancel { width: 40rpx; height: 40rpx; line-height: 38rpx; border: 2rpx solid #EDF2F5; background-color: #EDF2F5; border-radius: 50%; position: absolute; /* 父组件赋予属性relative生效 */ right: 20rpx; /* 使元素处于右上角-右 */ top: 20rpx; /* 使元素处于右上角-上 */}.cance
2022-05-10 16:39:41
768
原创 图片标签z-index设置不起作用
问题：在页面上有一张图片，需要点击图片放大查看该图片。因为在页面上有一个水印蒙层，导致图片点击不到，设置了z-index属性还是点不到。<image class="img" bindtap="bigger" /><view class="waterMarker">我是水印</view>.waterMarker { position: fixed; left: 0; top: 0; height: 100vh; width: 100%;}.img
2022-03-25 14:05:34
762
原创 透明遮罩层影响点击处理
问题：页面有一个透明的遮罩层，遮罩层上面一个按钮，下面一个按钮。上面的按钮可以点击，下面的点不到。解决方法：外层（被遮挡的层）{ pointer-events: none;} 内层（要发生事件的层）{ pointer-events: auto;}外层指的是遮罩层，内层指的是遮罩层中的按钮，利用点击冒泡即可解决。https://blog.youkuaiyun.com/guoshujie1/article/details/94750130...
2022-02-16 17:05:19
974
原创 前端搜索关键字突出展示
需求：关键字搜索，将关键字在搜索结果中突出显示.思路：将结果list的项用关键字分割为数组，把关键字arr[length -1]push到数组末尾。遍历新数组，依次展示每一项并把最后一项补在每一项后面。arr[0],arr[arr.length -1],arr[1],arr[arr.length - 1]...arr[length -2]倒数第二项不补arr[length -1]wxml<block wx:for="{{search_result.resultList}}">
2022-01-20 16:00:47
876
原创 对 switch case 和 else if 简写
本周做了一个对返回的数组进行遍历的需求，下面是第一时间写的res.arrayList.forEach(item => { switch (item.id) { case "1": { result1 = funA(item.value); break; } case "2": { result2 = funB(item.value); break; } ... case "24": { result24 = funZ(item.value);
2022-01-13 16:33:44
463
原创 对数组遍历forEach、map、reduce、filter
forEach（一排人，每个人都捐点）developers.forEach(function (developer) { developer.donate();});map（一排人，每个人脱鞋放正前方，得到一排鞋）developers.map(function (developer) { return developer.shoes;})reduce（一排鞋，把所有鞋子放进一个盒子，数数总价多少）var totalShoesPrice = shoeses.reduce(functi
2021-12-21 16:08:19
119
原创 微信小程序阅读文档如何自定义文件名
不使用wx.downloadFile的tempFilePath参数，使用filePath即可。文档见微信开放文档→wx.downloadFile→success回调wx.downloadFile({ url: encodeURI('https://example.com/audio/123'), filePath: wx.env.USER_DATA_PATH + '/' + '自定义文件名.pdf', success: function (res) { if (res.statusCode =
2021-12-01 14:37:03
1936
原创 微信小程序没有DOM与V8有啥区别
我一直有这个误区：小程序强大到没有DOM。小程序架构官方说明：Virtual Dom，即不是没有DOM，而是JS不能操作DOM，JS和DOM对象不再一个线程里面。下面是微信官方给的图片（图片都是微信那搬过来的）渲染层：WXML、WXSS逻辑层：JSJSBridge概念：链接APP和WEB的桥梁WXML编译器：WCC，它把WXML转为JSWXSS编译器：WCSC，它把WXSS转为JS逻辑层：JSCore，类似一个worker，集中处理JS文件中的JS——借用了APP的JS引擎。视图层：将
2021-11-26 10:18:16
1299
2
原创 Visual Studio Code简称vscode居然不是C++写的
Visual Studio Code 基于 Electron 开发。Electron 是一个基于 Chromium 的项目，可用于开发基于 Node.js 的本地应用程序。Visual Studio Code 使用 Blink 排版引擎渲染用户界面。路很长，不要盲目地迷信。开源一样创造奇迹！...
2021-10-28 13:59:25
791
原创 常用编译习惯导致bug
问题：使用CSS识别从后台查回文字中的换行符，发现文字区域上下多了行空白。原因：代码格式化（Ctrl+Shift+F）导致white-space: pre-line;识别错误，格式化后产生的空格计入代码。解决：使标签和文字贴在一起错误：<view style="white-space: pre-line;">这是文字</view>正确：<view style="white-space: pre-line;">这是文字</view>...
2021-10-08 15:12:15
193
原创 JavaScript深拷贝的方法
1.内存中借用buffer（缓冲寄存器）对数据序列化和反序列化JSON.stringify() & JSON.parse()2.采用插件lodashnpm install loadshimport _ from 'lodash';var objects = [{ 'a': 1 }, { 'b': 2 }]; var deep = _.cloneDeep(objects);console.log(deep[0] === objects[0]);// => false.
2021-09-13 10:09:30
73
原创 去掉微信小程序button组件原有样式
背景：需要做一个分享功能，需要使用<button>的属性open-type触发该功能。按钮内有图片和文字去掉padding和margin<button style="padding: 0; margin: 0;"> <image /> <view>分享</view></button>去掉图片和字体间的空隙（把两个元素变为block，块级元素）<button style="padding: 0; marg
2021-08-27 10:53:02
739
原创 微信小程序web-view实现分享
web-view通过一个放入H5工程的JSSDK来对外提供API，JSSDK可通过NPM下载。const wx = require('weixin-js-sdk');在内嵌H5页面上点击分享按钮，引导用户使用微信小程序的分享按钮对H5进行分享。微信小程序的分享API有获取webViewUrl的功能。将options.webViewUrl作为参数传入path，在H5的url带入页面的关键参数即可Page({ onShareAppMessage(options) { console.log(o
2021-08-20 10:58:57
3150
原创 修改antd组件的样式
1.打开谷歌调试面板2.找到该元素3.使用:global()修改4.使用父元素包裹起来，防止CSS污染。.father { :global(.am-tab-bar-bar) { position: fixed; }}
2021-08-20 10:48:47
778
原创 小程序的导航栏动态响应
效果要求：1.导航栏滑动至上方某固定位置时，固定在上方。2.当下拉屏幕至一定高度时，解锁导航栏，随页面一起滑动3.点击导航栏功能模块标题，页面滑动至具体功能模块位置思路：wxml写两个相同的导航栏，一个属性为fixed，一个static当导航模块滑动至锁定位置时，wx:if显示固定的模块（position: fixed）。并将static的导航栏用底色覆盖（防止同时显示两个导航栏）当static导航栏的父元素（第一锚点）锚点值减去头部高度（小程序有个头部算入页面）的差值小于当前页面滚动的值（o
2021-08-06 15:52:37
223
原创 umi笔记
接到一个新需求：把微信小程序页面复刻一版H5的看了看git上的框架，umi很多人用。（2021-07-14有10.8k个star）新建一个工程的官方指引因为组内其他不常用H5的同事需要使用，所以用dva。在这个文件中加入这个就可以用dva。dva文件识别规则因为开发模式的热更新（ctrl+s）时间过长，推荐我使用MFSU使用MFSU...
2021-07-28 14:47:42
307
原创 子元素填满剩余空间，父元素随子元素大小变化
1.子元素填满父元素剩余空间.father{ display: flex; }.son{ flex-grow: 1; }2.父元素随子元素大小变化子元素为行内元素.father{ white-space: nowrap; }子元素为块级元素.father{ display: inline-block; white-space: nowrap; }.son{ display:inline-block; }3.css嵌套使用，html会冒泡式寻找对应的style名（使用了css-modu
2021-07-28 14:40:32
943
原创 可选链操作符（小程序开发中真的很好用）
如果不对obj.first进行判断，改值有可能会是null或undefined故有以下的写法let nestedProp = obj.first && obj.first.second;可选链式操作符后let nestedProp = obj.first?.second;减少了很大一部分书写量等价于（并没有实际创建变量）let temp = obj.first;let nestedProp = ((temp === null || temp === undefined)
2021-07-02 16:34:10
772
原创 React类组件生命周期和函数组件模拟生命周期
React.Component组件被创建并插入DOM时，即挂载constructor()static getDerivedStateFromProps()不常用render()componentDidMount()组件的数据更新，props及statestatic getDerivedStateFromProps()不常用shouldComponentUpdate()不常用render()getSnapshotBeforeUpdate()不常用componentDidUpdate
2021-06-25 13:13:23
804
原创 验证setTimeout执行的时间
宏任务和微任务生成方式：microtask：Promise、process.nextTick等macrotask：代码块、setTimeout、setIntervalconsole.log('1'); // 宏任务1setTimeout(() => { console.log('2'); // 宏任务3}, 0);Promise.resolve().then(() => { console.log('3'); // 微任务1}).then(() => {
2021-06-24 13:35:21
158
原创 webpack工程化——缓存（用增量更新代替全量更新）
1.输出文件的文件名使用substitution（可替换模板字符串）的方式output: { filename: "[name].[contenthash].js", ...},2.提取引导模板如果要验证这一块的功能，现将./src/index.js文件中异步import的方法注释，换上第一章在的代码// async function getComponent() {// const element = document.createElement("div");// cons
2021-06-23 16:27:42
530
原创 webpack工程化——资源分类（转，待更新）
1.引入CSS文件安装css-loader和style-loadernpm install --save-dev style-loader css-loader修改webpack.config.js因为是链式调用loader，所以style-loader和css-loader顺序一定是图上所示2.引入image图像{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource",},...
2021-06-16 16:46:53
118
原创 node_modules出现依赖版本冲突问题
问题因为某些原因全局安装了webpack，发现版本为5.38.1webpack -vnpm install --global webpack全局路径：C:\Users\z.ziyu\node_modules再去执行npm start发现报错webpack版本不同无法生成执行文件。在工程中的node_modules版本为4.44.2。跨越了很大一个版本v4→v5为了跑起来只能删掉全局的新版本v5，命令：npm uninstall --g webpack命令不一定好用，直接将文件夹拖至回收站亦
2021-06-11 15:14:36
1409
原创 webpack工程化——在工程中引入webpack
1.webpack最好不要全局安装原因：会导致版本锁死，当工程的依赖（/node_module/webpack）升级时，版本不同会导致构建失败。2.需要安装lodashnpm install --save lodash结果如果只使用在测试环境下使用命令npm install --save-dev webpack-cli3.使用配置文件webpack.config.js它的只要作用是将命令行中输入的命令集中于配置文件中为了方便在package.json中配置脚本启动参数输入npm
2021-06-10 15:37:20
213
原创 React-classnames库怎么用？
为什么要用？我的react工程中使用了css-module，当对同一元素附加多个CSS样式时报错报错：<div className={style.font style.color}>报错</div>首先在package.json引入该组件（npm install classnames）然后在代码中写入import * as React from "react";import styles from "./index.css";import classNames f
2021-06-09 15:02:46
249
空空如也
HTML中组件被卸载后还可以调用到JS方法
2023-02-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人