- 博客(152)
- 收藏
- 关注
RSS订阅原创 await嵌套使用
虽然 fun_2 不是 Promise 方式的写法，await fun_2 会等待 fun_2 中的 await fun。await 的作用是可以传递？
2023-06-09 10:50:15
372
原创 独立分包中包含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
388
转载 常用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
256
原创 用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
619
原创 图片标签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
639
原创 透明遮罩层影响点击处理
问题：页面有一个透明的遮罩层，遮罩层上面一个按钮，下面一个按钮。上面的按钮可以点击，下面的点不到。解决方法：外层（被遮挡的层）{ pointer-events: none;} 内层（要发生事件的层）{ pointer-events: auto;}外层指的是遮罩层，内层指的是遮罩层中的按钮，利用点击冒泡即可解决。https://blog.csdn.net/guoshujie1/article/details/94750130...
2022-02-16 17:05:19
852
原创 前端搜索关键字突出展示
需求：关键字搜索，将关键字在搜索结果中突出显示.思路：将结果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
828
原创 对 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
376
原创 对数组遍历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
84
原创 微信小程序阅读文档如何自定义文件名
不使用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
1692
原创 微信小程序没有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
1200
2
原创 Visual Studio Code简称vscode居然不是C++写的
Visual Studio Code 基于 Electron 开发。Electron 是一个基于 Chromium 的项目，可用于开发基于 Node.js 的本地应用程序。Visual Studio Code 使用 Blink 排版引擎渲染用户界面。路很长，不要盲目地迷信。开源一样创造奇迹！...
2021-10-28 13:59:25
680
原创 常用编译习惯导致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
90
原创 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
44
原创 去掉微信小程序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
623
原创 微信小程序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
2967
原创 修改antd组件的样式
1.打开谷歌调试面板2.找到该元素3.使用:global()修改4.使用父元素包裹起来，防止CSS污染。.father { :global(.am-tab-bar-bar) { position: fixed; }}
2021-08-20 10:48:47
707
原创 小程序的导航栏动态响应
效果要求：1.导航栏滑动至上方某固定位置时，固定在上方。2.当下拉屏幕至一定高度时，解锁导航栏，随页面一起滑动3.点击导航栏功能模块标题，页面滑动至具体功能模块位置思路：wxml写两个相同的导航栏，一个属性为fixed，一个static当导航模块滑动至锁定位置时，wx:if显示固定的模块（position: fixed）。并将static的导航栏用底色覆盖（防止同时显示两个导航栏）当static导航栏的父元素（第一锚点）锚点值减去头部高度（小程序有个头部算入页面）的差值小于当前页面滚动的值（o
2021-08-06 15:52:37
168
原创 umi笔记
接到一个新需求：把微信小程序页面复刻一版H5的看了看git上的框架，umi很多人用。（2021-07-14有10.8k个star）新建一个工程的官方指引因为组内其他不常用H5的同事需要使用，所以用dva。在这个文件中加入这个就可以用dva。dva文件识别规则因为开发模式的热更新（ctrl+s）时间过长，推荐我使用MFSU使用MFSU...
2021-07-28 14:47:42
199
原创 子元素填满剩余空间，父元素随子元素大小变化
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
864
原创 可选链操作符（小程序开发中真的很好用）
如果不对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
649
原创 React类组件生命周期和函数组件模拟生命周期
React.Component组件被创建并插入DOM时，即挂载constructor()static getDerivedStateFromProps()不常用render()componentDidMount()组件的数据更新，props及statestatic getDerivedStateFromProps()不常用shouldComponentUpdate()不常用render()getSnapshotBeforeUpdate()不常用componentDidUpdate
2021-06-25 13:13:23
747
原创 验证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
117
原创 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
455
原创 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
96
原创 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
1268
原创 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
169
原创 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
214
原创 Safari浏览器对正则零宽断言使用出现白屏（H5内嵌小程序）
问题是如何发现：微信小程序内嵌H5的页面白屏（仅苹果手机），但是无法看到报错。故使用Safari浏览器打开，发现报错。// 正确但是不兼容的写法str = str.replace(/(?<=[1-9]\d{5}[1-9]\d{3} ((0[1-9])|(1[0-2])) ((0[1-9])|([1-2]\d)|(3[0-1]))\d{3})x/g, 'X');// 兼容的写法str = str.replace(/([1-9]\d{5}[1-9]\d{3} ((0[1-9])|(1[0-2]))
2021-05-12 18:04:12
1174
原创 form表单如何监听子组件的状态变化
问题：在嵌入自定义组件<Form><MyComponent></Form>时，需要将onChange方法暴露出去。原因：form会监听<input>的onChange方法和value变量（form是<input>的一个属性）其它基于<input>封装的组件如：<select>，自定义的方法名必须叫onChange，变量名必须叫value，否则自定义组件的状态变化不能被form表单的onChange捕获...
2021-04-21 16:28:27
909
原创 前端公共配置处理、增量发布和版本回退（回滚）的设想
感谢网络文章及朋友们对我的帮助公共配置代码量较小且变动频繁的代码，写入html文件之中。（目前我遇到的是异步加载JS文件）增量发布使用webpack-md5-hash插件对静态资源进行处理第一次发布全量包，标注1.0版本第二次打全量包和1.0版本比对（文件名，文件大小，内容？），生成增量包，标注1.0.1版本后续的全量包和1.0+1.0.1（每次迭代的增量包的合并）比对生成新的增量包，标注1.0.2版本以后都比对之前所有包的合并版本和本次打包（打包是全量打包）生成新增量包，也
2021-04-02 14:05:16
982
空空如也
HTML中组件被卸载后还可以调用到JS方法
2023-02-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人