业余前端的职业经历

经常用本地缓存 可能cookie用的少了就不会用了,其实不然,有的时候还是要用到cookie的。这玩意很简单,不需要引入什么插件 自己编写两个方法即可。直接拿去使用不用谢 关注我 持续更新前端知识。

注意URL里面不能是纯变量，那样就会报错了 详细的报错 你可以去试试看。更好的就是直接在模板中调用一个函数 然后传入图片的名字就可以显示出来。不管是本地开发 还是打包之后都会找到具体的图片引入显示到页面中。一般来说项目中我们集中存放图片，然后希望在页面中直接引入！再src目录下 static 下创建一个images文件。然后在/src/utils/mixin.js文件。我们就可以在所有的组件模板中直接使用了。事实上确实可以办到，我们用到了一个。关注我持续更新 前端知识。然后在main.js中。

又是一周休息的时刻了 关注我 持续更新 前端知识 帮助刚入行的前端童鞋一点，能帮点就帮点，都是踩坑的经历。在本地渲染很简答 需要一个插件 就可以了。这个样式注意下 如果是在移动端使用的话。

有的时候我们h5支付成功之后 需要关闭整个窗口。关注我 持续更新 前端知识。这个时候可以有两种方式了。

如果背景是一个背景颜色的话 其实还是比较好搞的将 hmlt2canvas的背景图改成和背景色一样就好了。这个大概率就是因为定位最后拍照的那一刻偏移导致的。这样白色边线 就看不见了。关注我 持续更新 前端知识。

本来这个东西是为了优化用户体验,手机上点击输入框太小了 所以会在用户点击的时候放大屏幕中的内容。user-scalable=no 这个加到html中的head中。关注我 持续更新前端知识。我们其实是可以禁止的。

关注我 持续更新前端知识。

CSS 属性被用于按照 浏览器所在的操作系统所用主题，以平台本地的样式显示元素。如果经常做h5童鞋会碰见各种各样的问题。关注我 持续更新 前端知识。

其实大概率 携带过来的参数 实在onLoad中携带过来 但是官网中说可以通过useRouter 这个hook获取到 然后事实却不是这样。但是如果我把useRouter() 执行在onLoad后面的话 就可以正常获取到参数了。最后没办法 只能使用useLoad这个api在setup中使用了 获取地址栏参数了。突然客服提出了问题，大概就是用户使用客户端扫码的时候，页面数据没有出来！然后问题到我这里了， 我发现请求请求参数不存在。但问题是 onLoad 是可以获取到数据的。这样肯定不想我想要的了，

因为uni.chooseImage 也是异步任务并且里面也是promise封装的， 而我们在上面的执行都依赖于上面的异步任务执行， 应该就是异步执行导致，大概率是上次事件循环没有执行完。想让后面执行的话 需要添加到 下一个事件队列中执行了。这样就可以了 保证上一个任务执行完了。上面的这两种方法都没有 唤醒选择图片。但是更换成下面的这种方式就不会影响了。这个问题在pc上并没有复现！这样的事情 发生真的是很奇怪。关注我 持续更新前端知识。

比如一些依赖可能在node_modules 根目录下 让所有的 依赖于它的依赖可以访问， 再其次就是自动默认安装缺失的依赖，还有就是依赖丢失或者找不到的话 命令自动失败。然后项目就跑不起来，我很奇怪 然后重新使用 npm i走了遍发现可以正常运行。后面翻了翻pnpm的文档才发现 这玩意也需要配置一些东西 才生效。我只是知道 有一个pnpm的这个包管理工具 但是从来没用过！然后开始分析报错，报的都是依赖找不到的问题 就很奇怪。让我知道这肯定是 pnpm 的问题了，我看到下面报错中 更多的都是依赖缺失。

so 你只能安装比较低版本的 compression-webpack-plugin 这个插件 来对应webpack4。报出这个问题就是因为 你的这个版本过高 因为这个api 只能在webpack5中才能使用。compression-webpack-plugin 这个插件版本的问题。因为很多老项目可能并没有升级webpack5。我更换成了 4.0.0 就可以正常运行了。关注我持续更新前端知识。

先上效果图吧 其实还是比较简单的，就是监听上面滚动的距离 占 父元素可滚动距离的百分比进行 在手机上查看效果更好。啥都不说 先上例子 这个在移动端非常常见哈！我们web前端 什么小程序和h5其实也会碰见。关注 长期更新前端相关知识。

其实很多小伙伴都是从vue2过来的 我们之前想要注册一个全局属性，让所有的子组件 都可以使用到也许会这样书写 就是。

这个是我参考uview中有内置类名，当你想设置外边距为15px的时候 只需要给元素加上 u-margin-left-15。后来新项目用的是less 就去官网上找到类似的用法。然后就可以直接在元素中使用了。关注我 持续更新 前端知识。

我好像没有找到现成的，只好自己简单配置了下，有需要的童鞋直接拿去用。

好像是那个扩展程序开启之后，修改了我浏览器的样式，这个就很烦人，其实出现这个问题就是我起的样式类名，刚好和人家的一样，所以导致我的被重写了！我想着是不是最近我安装了什么东西，好像确实安装了一个扩展程序，我把那个扩展程序关掉之后，样式就恢复正常了！突然有一天哈，我的网页莫名其名样式乱了，我检查样式中发现，多了一个注入的样式表，我还找不到位置所在！我把网页放到火狐中，发现是正常的！这个时候猜测就是谷歌浏览器的问题了！后面我为了重新启用我的插件，只好把类名改了，这个太难受了！关注我 持续更新前端知识。

ios好像有的默认就不支持 长按下载图片1.

最后还有一个小问题就是 如果你的微信支付商家是 微信那边特约商家的话。支付完成后 会把你h5网页关闭 这个需要你参加那个“点金计划”// 有一个点需要记住 就是那个时间戳那块是字符串哈 如果接口给你返回的是 int类型的话 记得修改下。通过这个API进行微信支付,好的一点是不用在引入那个weixin-jssdk那个文件库了。但在新版本的微信中其实都不建议使用这个方式进行支付了 都推荐wx.chooseWXPay。但是吧微信到现在 也仍然支持这个方法。关注我 持续更新前端知识。具体公告详情 请查看。

我上面说的一切的前提就是 你们公众号后台那里 什么基础的域名都配置好的前提下。请先进行校验是否你的所有的信息能通过微信那边校验。这个就是很简单你没有 缺少了 appid。// 这里 这里的配置 不要写错哦!看文章千篇一律 没有一个说到点子上！

应该是你在模拟器上进行测试的吧！切到真机上就行了，可能模拟器不让模拟微信支付。

禁止遮罩层滚动这个其实比较好处理 我们有的时候 会自己封装一个遮罩层，但是在上面弹出东西的时候，下面的内容还在滚动 其实这个时候我们可以通过js进行控制的。将元素设置到视图中心(不论页面怎么滚动都在中心位置) 这个更简单了 就是css3的属性 我们不考虑元素的宽高哈。全屏的遮罩层 其实也好处理 就是讲一个元素基于body 进行 绝对定位 然后宽高设置 100% 100% 即可。google firfox safari 都可以哈。关注我 持续更新前端知识。

有些初学者可能比较恐惧插件，或者希望自己啥时候能写一个插件，其实这玩意搞明白没啥子，首先不要怕，看着那些大佬一个一个插件写的那个牛掰，自己好的插件写不出来，写个简单差的也行，最主要的是中间自己收获了什么！当然也有一些大哥可能会说到，我从来都没用过这个玩意，说实话一个真正考虑比较全面的项目，应该考虑出错后的问题处理，而不是一味相信程序一定会走正确的“线路”但是你要搞明白为什么要这么做，这个才是最主要的了！需要我们去写一个统一中间处理的逻辑方法，其实这个方法就是一个插件，本质也就是一个“函数”

但是吧 有的时候就需要通过html2canvas 生成一张图片，然后拿来上传给接口，这种在用户看来好像是一种“隐式上传” 因为用户感觉不到，我生成了一张图片然后进行上传！好了不扯了 直奔主题吧！因为正常来说 我们上传图片 一般都是通过input:file标签。用户进行选择一张图片，然后进行上传！这个样我们的问题就迎刃而解了。我们看到了 这个file构造函数。哇哦 看见了 上传的文件资源了。然后把这个 上传给接口 应该就是可以了。然后就是 我们能不能通过FIle 构造函数生成一个file类型。

相信广大网友可能碰见过这样的一些网站，就是设置密码的时候， 如果我们设置连续的字母或者数字，会提示我们的密码比较简单 不让设置，特别是一些支付密码，如果你设置六位连续的数字， 比如： 111111， 66666，888888等。是不是很容易破解呢对我们前端来说，在用户输入完成之后，就需要进行判断用户输入的是否满足条件，首先你可以不通过正则匹配判断用户输入是否满足条件 比如不过这样看起来 是不是太low。哈哈哈🤔相信很多童鞋肯定喜欢正则匹配了，那么联系的字符要怎么写呢？

我们应该用的是 uni.chooseFile 这个api 这个api 就支持h5端。因为我们从后段接口中 拿到 七牛的上传地址和token 然后就可以使用 uni.uploadFile 这个api进行上传即可。其实这个 本来不应该在移动端上传，比如上传什么视频啊，.doc,.zip等文件的时候，应该是在pc端上传，uni.chooseImage 这个api 但是上传附件呢 这个api明显不行的呢。我们选择上传的附件的时候 可以进行选择要支持的上传类型哈。但是吧奈何还是会有在移动端上传 这些文件的可能哈。

就是如果是图片的话 baseline 默认元素放置在父元素的基线上 然后再仔细去看下上面的那张图片 你就会发现。但是细心的同学会看见那个 g字母底部会超出一部分（这个也是图片的那个白色节点的问题）其实这个问题 如果你觉得难写的话，只能说你想的复杂了，在文字排版中，如果元素的宽度不够的话那么文字会自动换行的，所以只要父亲元素的宽度不够两个汉字 那么它就会换行了，就这么简单。附带一个小东西 就是 我们在处理行内块级元素 如果元素中添加了文字话 就可能出现对不齐的问题。这个就是因为文字对齐的基准 不同导致。

其实在uniapp中我们编译h5平台的时候，会发生我们使用input标签都会被二次封装，我们想给这个input原生标签加的类名和id都会加到最外层的包括的uni-input自定义标签上。我看有人问过 为啥不加个什么属性，放置进行编译，好像人家说那样做的话 表现的和文档就有所不同了 所以才不那样做。有没有什么方法 能防止它被转义呢，目前好像没有有点难受，呢。总体上来说 uniapp 还是很不错的。但是我们可以通过其他的方式。关注我 持续更新前端知识。

其实这个玩意很多的ui组件都会对应封装的，如果我们的网站使用较大的图片的话，那么用户在客户端下载的时候就需要时间，特别是一些网速慢的用户的手机上，那么我们也不能留个空白给用户看，然后我们使用的时候 引入这个组件就好，其实这个是很简单而且很简易的 不能直接拿来做生产环境使用的，但是我们还是做下了解比较好。所以就需要再图片加载完成之前 先给一个loadding的图 这个让用户有一个期待性。其实你可以在这个基础再封装下，包括可以修改图片的大小和自定义加载内容等。以后要慢慢恢复更新速度 天天学习。

然后就是 在哪个 .npm-global 里面 我这个可能是通过yarn安装的全局依赖 但是npm 安装应该和这个区别不大。删除那个全局依赖之后 你就可以使用 npx create-react-app（首先你本地的这个版本不要过低哈）现在安装 react项目其实都不建议你全局安装这个 create-react-app 了。这个时候建议你去找到那个 create-react-app的全局安装包。就是我的npm安装create-react-app一直抱着个问题。把它删除掉 （我这个是mac本）...

因为正常来说 公司的项目 可能分为开发测试和生产三个环境但是taro生成的项目中默认是没有 测试这个环境的直接下面的这种方式添加的话 你会发现已至都是生产环境的代码也并不是 你没有设置成功,是他内部又发生了更改需要你在config下面创建一个 test.js的文件然后 在启动 npm run build:test:weapp 就发现是测试环境的变量了关注我 持续更新前端知识。...

因为我的项目中用到了这个 pre-commit但是最近突然 commit的时候 一直报这个: command not found后面才发现 原来是因为我使用了 nvm 管理node 导致node 路径发生了变化找到了 node_modules/pre-commit/hooks 中配置node命令的那行然后我本地查找下node地址which node更换下。就恢复正常了。网上找的一些方法都不能直接用。害 还是要根据自己的项目情况进行使用关注我 持续更新前端知识...

其实这样在开发小程序的时候 还是比较常见的,就是我们页面底部有一个需要滚动加载滚动的 展示容器这个时候选择scroll-view 就是很合理了 但是 我们这个时候 需要让scroll-view 填满剩下的空间, 那样就需要计算了公式: 设备的高度 - scroll-view 距离顶部的距离 = scroll-view的高度计算scroll-view距离顶部的距离然后就是设置高度:style=“{ height: scrollHeight }”但是设置完成后 会发现 页面有回跳的情况存在 我们页面

最近使用Taro 开发小程序的时候 发现react版本对应的taro-ui竟然好久都没有更新了 奇怪了。 要是后期碰见什么坑 都没人来管了 .我看见有个网友留言。taro开发的人员把人力都投入到了 Nutui里面了.后来我就去瞅了瞅这个nutui ui框架 感觉 很不错,也有人在不停的维护,这个才是我最想要的情况说句实话呢。如果是跨平台的开发的话 taro 的普及率 并没有uniapp大.毕竟uniapp是背靠vue这座大山,国内前端开发 vue开发也占据了四分之三的情况我想这个也是为啥 在Taro3.

taro 中使用dva

taro小程序

taro小程序

taro 小程序 按需加载

css实现渐变色字体

nginx 入门配置