- 博客(246)
- 收藏
- 关注
RSS订阅
原创 《选中圆角样式之微信小程序》
背景公司使用微信小程序来开发公司的一个产品，有幸参与到其中。在最近的一次迭代中，体验优化有这样一个点，现在总结下，属于打技术的地基：技术方案方案一：切图可以将整体选中的样式作为背景图存在，不过这需要UI去切图，然后当做背景来设计。本身在做的时候，让UI进行切图，最终实现的效果不是很理想方案二：使用伪类一、wxml - 核心代码<template> <view wx:for="{{categorys}}" wx:key="categoryCityI
2021-04-28 21:10:07
629
原创 《理解JS: 事件循环机制》
从面试题了解事件循环机制：第一道：//请写出输出内容async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}con...
2020-03-09 21:14:05
485
2
原创 Rollup-plugin-bundle-analyzer VS Rollup-plugin-visualizer
总的来说，Rollup-plugin-bundle-analyzer和Rollup-plugin-visualizer都是用于分析和可视化Rollup打包后文件的插件，但Rollup-plugin-visualizer提供了更多的可视化选项和观察模式，而Rollup-plugin-bundle-analyzer则更注重分析包中各个模块的占比。Rollup-plugin-bundle-analyzer是一个用于分析Rollup包中各个模块占比的插件。分析和可视化Rollup打包后的文件的插件。
2024-01-09 21:01:11
563
原创 h5如何使用navigateBack回退到微信小程序页面并携带参数
在h5中使用navigateBack回退到微信小程序页面很常见，但是有一种交互需要在回退之后的页面可以得到通知，拿到标识之后，进行某些操作，这样的话，由于微信官方并没有直接提供这样的api，就需要我们开动脑筋曲线救国一下：navigateBack + postMessage。
2023-11-23 12:20:09
1164
原创 代码规范之-理解ESLint、Prettier、EditorConfig
1、在代码格式化时采用Perttier规则，在代码校验时使用ESLint2、遇到项目内有多个层叠配置时，采用就近原则作为高优先级3、ESLint等解决的是团队开发规范的问题，并不能解决其他诸如编码能力、代码合理性等问题， 还属于工程化中比较弱的一环。EditorConfig 是用来抹平编辑器差异的，比如文件编码，锁进格式等ESLint 关注于代码质量校验 和 代码格式校验，配合插件支持autoFix和错误提示，完全可插拔。
2023-11-22 20:19:54
689
原创 真机和开发者工具如何模拟虚拟定位
1、打开微信开发者工具2、打开调试器3、切换到Sensor4、勾选Enable6、重新编译，便是第5步填写的经纬度对应的定位。
2023-08-24 12:45:20
7446
原创 如何在测试和预发环境下调试支付宝&微信小程序的h5
2、点击四个小正方形的小图标，再点击web-view，就会出现调试页面。1、打测试包：npm run build:ali-test。2、点击蜘蛛形状的小图标，就会出现调试页面。2、使用支付宝开发者工具打开。1、使用开发者工具打开。2、git项目工程下载。1、使用开发者工具打开。4、单击预览扫码即可。
2023-08-24 12:37:43
990
原创 前端如何实现面向对象
前端如何实现面向对象：构造函数和原型链：使用构造函数创建对象，并通过原型链来共享方法和属性。可以使用new关键字实例化对象，并使用this关键字在构造函数中定义属性和方法。然后，通过将方法和属性添加到构造函数的原型上，可以实现方法和属性的共享。类和继承：使用ES6引入的类和继承语法来实现面向对象编程。可以使用class关键字定义类，并使用extends关键字实现继承。类中可以定义属性和方法，并使用方法初始化对象。原型对象：使用原型对象创建对象，并通过原型链来共享方法和属性。可以使用。
2023-07-09 23:51:55
273
原创 flex弹性布局中justify-content:space-between 不起作用
flex弹性布局中justify-content:space-between 不起作用
2022-09-16 17:53:24
557
1
原创 《Charles配置教程之Mac》
背景开发toc应用，开发调试和线上问题解决避免不了需要使用代理工具，进行抓包查看具体的url来确定接口、页面地址等一些内容。代理工具有Charles、W配置教程一、简介Charles是一款代理工具，通过拦截客户端（PC或者手机等终端设备）向后台服务器发送的请求，通过它向服务器发送请求，然后再将服务器返回的响应返回给客户端。通过这个工具可以实现截取请求和请求结果达到分析抓包的目的。二、下载安装安装链接：https://www.charlesproxy.com/或者其他的链接下.
2022-04-14 18:50:20
3984
原创 《H5的庐山真面目》
从 2014 年起，一个叫做 H5 的词出现了，稀里糊涂的火成了辣子鸡!背景不知何时，h5这个名词频繁出现在日常的工作交流中，虽然一直接触，期间也思考过什么是h5，也被人问起什么是h5，但没有系统地去搜索和思考过这个问题。今天小编站在巨人的肩膀上同时也结合自己开发的经验来谈一谈h5whatH5的定义众说纷纭，业界内也没有一个标准的定义，目前我比较认同的一种说法是：H5在狭义和广义上有两层含义，狭义上的H5只是一种编程语言，是HTML5的简略写法，而广义上的H5则涵盖了HTML5、CSS
2022-04-13 20:50:12
271
原创 《微信小程序跳转页面安卓闪现两次》
背景为适应需求变化，跳转新的页面，增添逻辑后发现跳转页面闪现两次，核心代码如下：export const onViewGoods = (obj, opts, ckType) => { if (jumpLink === '/xx/xx/xx') { wxRouter.navigateTo({ url: jumpLink, query: { categoryId } }) } wx
2022-04-12 20:56:50
1750
原创 《Vue如何渲染文本》
背景为适应业务需求，规则说明的固定内容转换为由接口动态获取，这就要求前端对规则说明的渲染改变技术方案~其中使用v-html渲染文本，需要注意的是顺序标签的渲染~技术点Vue渲染文本的方式 style属性scoped相关技术点解析Vue渲染文本的方式v-text {{}} v-htmlv-text将元素当成纯文本输出 相对比较安全 可简写为{{}}，支持逻辑运算 且不会出现{{}}一闪而过之后消失，重新渲染元素的体验，但是使用起来不如{{}}方便 <p v-t
2022-04-10 20:12:45
3159
原创 《图片懒加载之react-lazyload》
背景懒加载是一种对网页性能优化的方式，而图片懒加载当一个网站加载图片过多时就需要懒加载的协助，从而提高页面的加载速度，减轻服务器的压力，节省流量。那么在react框架下，PC端的电商项目如何对商品feed流的图片做懒加载处理呢？下面跟随小编一起来看看……技术方案站在巨人的肩膀上通过百度等搜索引擎，react框架下有npm包专门针对图片懒加载：react-lazyload查看相关用法1、npm网站：react-lazyload - npm2、props属性 数据类型
2022-03-29 20:56:25
4269
1
原创 《小程序wx:for在更改数据后无法渲染页面》
背景为扩展业务，提高搜索效率，增加tab筛选：[综合，销量，价格]问题发现点击tab，重新发送接口请求，列表数据更改之后，但是页面并没有重新渲染问题分析<block wx:for="{{ searchData }}" wx:key="index"> <card-item messageChannelKey="{{ messageChannelKey }}" messageValPickKey="{{ index }}" cardType="normal"
2022-03-23 16:20:55
3533
原创 《翻转组件库之搭建文档站点》
背景至此，组件库框架搭建、组件设计、打包、发布等都告一段落，本篇内容介绍搭建该组件库的文档站点，降低使用和维护成本资料1、VuePress官方文档：VuePress2、github网站：GitHub: Where the world builds software · GitHub流程具体实现文档结构初始化1、安装依赖包npm i -D vuepress2、创建第一篇文档mkdir docs && echo '# Hello VuePre.
2022-03-20 18:38:37
263
原创 《翻转组件库之打包》
背景继博客之后，业务内容基本完毕，接下来涉及到的内容便是打包，构建，发布，使用文档等内容，本篇博客主要内容为使用Webpack打包资料相关1、Webpack：概念 | webpack 中文文档2、Gulp：gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网具体流程Webpack打包js1、在跟目录下新建webpack.component.js/* * @Descripttion: * @version: v1.0 * @Autho
2022-03-18 16:01:30
905
原创 《翻转组件库之卡片设计》
背景本次组件库的实现以封装一个卡片组件为例，本篇博客主要展现基本流程和大致思路设计思路设计原则注重通用性，提高开发效率具体方案组件设计UIAttributes编写html和样式html目录结构1、components → lib2、components/lib/card/src/main.vue<!-- * @Descripttion: * @version: v1.0 * @Author: linda * @Date:.
2022-03-17 15:28:18
666
原创 《翻转组件库之init项目》
前言背景：几乎所有大厂都会使用组件库，有的会开发自己的组件库价值：提升开发效率，节省时间成本和人力成本example：阿里巴巴-Antd Design；饿了么-Element全流程
2022-03-16 21:46:53
1057
1
原创 Intersection Observer
背景网页的开发，经常需要了解某个元素是否进入了“视口”，即用户能不能看到它技术实现方案：监听scroll事件 Intersection Observer API第一种，传统的实现方案计算量很大，容易造成性能问题；第二种名为“交叉观察器”，可以自动“观察元素”是否可见。接下来，将深入看看此APIAPIConstructor IntersectionObserver() 监听目标元素的可见部分穿过一个或多个阈时，会执行指定的回调函数 属性 root 监
2022-02-22 15:32:45
2758
原创 《animation、transition之微信小程序》
实现方式1、官网地址：Animation | 微信开放文档创建一个动画实例animation 调用实例的方法来描述动画 最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性2、原生方式：css3 - transition直接使用css样式来实现动画效果示例1、Animation动画API2、css3-transition<view class="g-flex animation-demo-container"><h1
2021-10-20 17:46:22
1029
1
原创 微信小程序-slot插槽
slot是什么slot标签即为一个占位符插槽，当父组件调用子组件时，具体的标签会被传递过来，这些传递过来的标签就会被替换为slot的位置为什么要使用slot组件封装具有扩展性slot的类别单slot 多slotslot的具体用法一、单slot<slot></slot>二、多slot1、启用多插槽2、给插槽起名字// 启用插槽options: { multipleSlots: true}// 给插槽起名字<
2021-09-13 20:35:46
1288
原创 jQuery实现table模糊搜索
背景 某天，突然被后端朋友call到说，用html实现table模糊搜索，前端mock数据自行实现，不用后端交互。其项目用的是
2021-06-19 16:41:55
682
1
原创 《safe-area-inset-bottom之兼容问题》
背景 身为技术开发，每天惊喜不断。收到业务方反馈，定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置，zhuo's
2021-06-01 21:53:51
3764
原创 《scrollTop VS scrollLeft 之微信小程序》
背景公司使用微信小程序来开发公司的一个产品，有幸参与到其中。在最近的一次迭代中，体验优化有这样一个点，点击类目时，分别实现横向滚动和纵向滚动的中间定位：技术方案横向滚动一、wxml-核心代码 <scroll-view class="{{showFold ? 'subC-top-nav-fold' : 'subC-top-nav'}}" enhanced="{{true}}" bounces="{{true}}" scroll-
2021-04-28 21:30:47
572
原创 ios底部安全距离
背景： 目前公司开发商城小程序，对于iOS要设置底部安全距离，否则底部会被黑条遮挡技术方案：1、苹果官方推荐：使用env()，constant()来适配，env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area...
2021-03-05 23:26:06
6970
2
原创 picker：限制时间范围之mpx
背景： 公司采用mpx框架开发商城小程序，业务需求：时间组件禁止选择大于当前时间技术方案： 微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 查看组件picker提供的能力：设计思路：1、使用end属性 <picker mode="date" fields="month" value="...
2021-03-05 20:06:17
607
2
原创 《webpack的打包开发》
一张图来表示小编对于webpack的认知：同时也在实战中对于webpack进行了验证：/* * @Descripttion: * @version: v1.0 * @Author: linda * @Date: 2020-03-10 17:31:43 * @LastEditors: linda * @LastEditTime: 2020-03-10 22:05:29 ...
2020-03-10 22:17:47
167
2
原创 《事件冒泡和事件捕获》
为了解决页面中事件流（事件发生顺序）的问题，微软和网景公司分别提出事件冒泡和事件捕获的解决方式。一、事件捕获捕获型事件（event capturing）：事件从最不精确目标对象开始触发，然后到最精确 二、事件冒泡冒泡型事件（event bubbling）：事件从最特定的事件目标对象到最不特定的事件目标对象（document对象）触发三、事件捕获和冒泡过程图...
2020-02-13 23:31:56
440
2
原创 《vue中对象数组动态添加属性》
前言： 在软件开发中，前端为了实现某些效果，需要给后端返回的数据中动态添加属性，本文中就来具体阐释下如何给对象数组动态添加属性的问题正文： 需求： 布局如上图所示，基本需求为：每张银行卡有自己的名字、logo、银行卡号、背景色，前后端的交互数据结构为：bankCardList: [ { key:...
2019-10-28 11:13:28
6388
原创 《移动端H5图片上传》
前言： 故事的开始要从接受的项目中说起，在用户的使用过程中，发现一个问题：使用安卓手机的用户无法再上传图片时进行拍照的选择，并且一次性无法上传多张照片，经过查阅资料发现：H5在实现图片上传是有兼容性问题正文： 首先，在上传图片时不能进行拍照的选择，这个问题很容易解决，在代码中添加：accept=“image/*”,问题就解决了。<input type...
2019-10-25 20:34:45
307
2
原创 《wx.navigateTo不起作用？怎么跳转呢？》
前言： 项目中，根据公司业务的需求，原来的小程序功能有所变动，由原来的静态页面修改为不再是单纯的页面，还需要有相应的业务逻辑处理，此时问题出现了，如果我没有登录小程序，直接请求就会报服务器内部错误，继而应该去判断是否登录，然后跳转到授权登录页面，登录后再允许用户深入访问，此问题在于怎么判断后自动跳转到中间的tab页呢？其实很简单正文： 最一开始采用的方案是：...
2019-10-25 20:16:21
677
原创 《vue：mockjs之旅》
前提： 官方地址：http://mockjs.com/ Getting Started：https://github.com/nuysoft/Mock/wiki/Getting-Started Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主...
2019-08-30 11:49:46
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人