- 博客(371)
- 收藏
- 关注
RSS订阅
原创 前端知识点集锦
1，vue之nextTick有什么用2，逻辑像素与物理像素3，重绘与重排/回流4，节流与防抖5，for与forEach6，js事件event对象7，vue父子组件生命周期加载顺序8，浏览器缓存9，XSS攻击与防范10，从输入URL到页面展示的详细过程11，vue之v-for的key属性和作用12，webpack如何生成hash码13，http常用状态码14，数组去重15，vue的scope样式对子组件不生效问题16，vu...
2021-11-26 23:47:10
658
原创 win10创建docker
参考：https://blog.csdn.net/zzq060143/article/details/91050272进入docker容器目录sudo docker exec -it 容器name sh或者sudo docker exec -it 容器name bash1，安装docker windowswin专业版，企业版，教育版win cpu虚拟化win启用windows功能hyper-v，重启电脑2，下载docker-for-windos安装https://docs.docker.com
2022-05-26 23:52:56
1016
1
原创 react项目配置环境变量
1，暴露配置npm run eject2，安装cross-envnpm i cross-env -D3，创建配置文件在项目目录下分别创建.env写入公共配置，.env.development开发环境下配置，.env.production生成环境下配置文件名视情况而定，必须要以.env开头内容写入变量，例如.env.development：REACT_APP_NODE_ENV='development'REACT_APP_ENV='development'
2022-01-28 15:50:23
3439
原创 react项目中使用less
1，创建react项目npx create-react-app my-app2，暴露配置文件npm run eject3，安装less和less-loadernpm i less less-loader -D4，配置编辑webpack.config.js，找到const sassRegex，在下面参照着写正则：也参照着sass写getStyleLoaders：重新运行项目即可...
2022-01-28 15:36:35
1349
原创 create-react-app脚手架配置代理跨域请求接口
React配置代理跨域访问React版本：17.0.2例如后端接口地址为：http://localhost:4000/manager/register那么前端react配置如下：1，配置setupProxy.js在src目录下新建setupProxy.js文件，注意不能用其他文件名字，如果需要配置多个服务器接口地址，多写几个createProxyMiddleware即可const { createProxyMiddleware } = require("http-proxy-mid
2022-01-28 15:18:47
1731
原创 从前端谈二维码的解析与生成过程
Technology ArchitectureHow to parse the QR code by RNQR handles are independent and non-conflicting matching and parsing logic. EMVCo is just a format, specific services may include QRIS, Duitnow, NETS, etc. If matched, it will be parsed into a .
2021-12-15 22:55:07
540
原创 【React Native】深入理解Native与RN通信原理
在使用 React Native 开发应用程序的时候，有时候需要使用JavaScript 中默认不可用的 IOS 或 Android 的原生 API。 也许你想复用一些现有的 OC、Swift、Java 或 C++ 库，而不必在 JavaScript 中重新实现它，或者为图像处理之类的事情编写一些高性能、多线程的代码。那么此时就不得不与Native打交道了。 幸运的是，React Native已经提供了这样的能力来供你使用，在JS Core的强大支持下，我们RN侧可以使用...
2021-11-27 22:14:30
3913
原创 nuxt项目部署后的nginx代理配置
关于nuxt部署参阅https://blog.csdn.net/weixin_36185028/article/details/1063356811，安装nginx2，配置nginx在nginx中配置能在不同的设备自动定向到h5或pc页面假设网站域名为xxx.com，nuxt启动后pm2的list中的pc端进程为xxxpc，package.json中端口运行端口为3011；h5端进程为xxxh5，package.json中端口运行端口为3012；网站访问端口为80cd /etc/ngi
2020-11-26 23:33:35
2286
原创 uniapp之h5公众号分享和授权
一，微信分享1，安装jweixin-modulenpm i jweixin-module2，在需要分享的页面引入<script> // #ifdef H5 let jweixin = require('jweixin-module') // #endif .....</script>3，设置分享内容（或者点击触发分享）distributrShare() { this.$http({ apiName: "wx.
2020-11-03 15:07:24
3518
原创 小程序视图更新数组某一项
在做购物车的时候会遇到选中和非选中某一项，以前的做法是拿到数据后先循环数据数组添加一个值为false的bull值，当点击选中（非选中）执行函数时以前的做法是拿到当前的下标，然后改变数组此下标对象里对应的bull值，最后this.setData({ list:list});相当于 把整个数组 渲染了一遍（虽然他有缓存机制，只会改变你改动的部分视图），但是还是感觉消耗性能，最后投机取巧 换了一种思路：let string = "riderCommentList[" + e.tar
2020-07-10 15:01:45
716
转载 uniapp swiper高度自适应的100%完美解决方案
onReady() {//swiper高度自适应this.getElementHeight('.swiper-item2')},methods:{ getElementHeight(element) { setTimeout(()=>{ let query = uni.createSelectorQuery().in(this); query.select(element).boundingClientRect(); query.e...
2020-07-10 14:58:14
4403
原创 企业微信应用开发总结
前端注意事项先安装插件复制到企业微信根目录下，重启。然后在企业微信里面按ctrl + alt + shift + D等出来[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ATD45qbX-1594115590571)(/tfl/captures/2020-05/tapd_69062344_base64_1590746475_56.png)]这个窗口，就可以在企业微信webapp上右键点击showDevTools打开谷歌控制台调试窗口了其他跟微信公众号应用基本相同，都是
2020-07-07 17:54:03
789
原创 centos最最常用的一些操作命令
更改当前登录用户密码：passwd更改其他用户密码：passwd 用户名创建用户并在home创建相关文件夹：useradd worker -d /home/worker -m查看防火墙：systemctl status firewallddead表示未开启，running表示开启开启防火墙：systemctl start firewalld关闭防火墙：systemctl stop firewalld查看某个端口是否通过防火墙：firewall-cmd--zone=public..
2020-07-02 17:42:18
263
原创 钉钉小程序企业内部应用开发总结
1，小程序对应的管理后台开发调试文档链接：https://ding-doc.dingtalk.com/doc#/kn6zg7/qg4y64需要微应用前端调试工具，直接在钉钉桌面版是没法调试，并且还需要在稳定性管理中进行人员配置2，文件上传文档链接：https://ding-doc.dingtalk.com/doc#/dev/frd69q/l4Xv3示例代码：utils/request.jsexport function upload(opt) { return new Pr
2020-07-01 15:48:17
2921
1
原创 普通html文件引入es6解析（非webpack）
1，https://www.cnblogs.com/kiancyc/p/12922564.html2，https://blog.csdn.net/u013803262/article/details/781923493，更新中...
2020-05-25 16:45:11
1040
原创 nuxt项目部署
1，安装node,npm,pm2进入node官网获取最新的安装文件链接下载安装文件：wgethttps://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz解压：tar -xvf node-v6.10.0-linux-x64.tar.xz 建立软连接(需要root权限)：mv node-v6.10.0-linux-x64 nodejs sudo ln -s /root/nodejs/bin/npm /.
2020-05-25 16:34:37
1287
原创 vue使用axios请求等待所有请求完成loading消失的4个方法
方法1，以事件总线方式创建拦截器，待所有事件请求结束消失loading创建事件总线：import Vue from 'vue'var _bus = new Vue() // 创建一个事件总线var num = 0axios.interceptors.request.use(function (config) { //在请求发出之前进行一些操作 num++ _bus.$emit('showloading') return config }axios.inte
2020-05-25 16:07:58
7354
原创 element-ui弹出多个message的问题处理
重写element-ui的message方法一：弹出之前判断是否有多个，有则不弹出，没有则弹出一个resetMessage.js：/**重置message，防止重复点击重复弹出message弹框 */import { Message} from 'element-ui';const showMessage = Symbol('showMessage')class DoneMessage { [showMessage](type, options, single) {
2020-05-25 15:55:28
1820
原创 git常用操作
两分支部分合并banch A 分支上有a、b 、c、… 文件需要合并到 branch B 分支，文件少且是多次提交的最终版本：操作如下：切换到B分支：git checkout B合并文件列表:git checkout A a b c …到此合并成功！！！额外补充（小聪明）工作中可能一套代码库里有多个分支，然后每个分支都给不同的人使用,此时可能需要切换分支来支不同的人，其实可以 把这些分支的代码 合并到一个本地新的分支，开发也可以在这个分支，然后使用上边的 ”两分支部分合并“ 合..
2020-05-25 15:35:54
314
原创 uniapp之APP/微信小程序/公众号支付
涉及到微信支付的都需要从后端接口获取支付配置信息：await this.$http({ apiName:"wxPayConfig", type:"POST", data:{ orderId:this.orderId }}).then(res => {}).catch(_ => {})支付宝支付获取的配置信息参数跟微信不一样，需要单独从接口获取，得到是一长串字符串：await this.$http({ apiName:"aliPay", type:"POST",
2020-05-25 12:08:35
2387
1
原创 Windows系统下将ionic项目打包成apk文件的方法
本文分享了如何在无任何相关环境的Windows系统下将ionic项目打包成apk文件的方法需要的工具有：node.js；cordova；ionic；jdk；安卓sdk；1. 安装nodeJs 进入nodeJs官网http://nodejs.org/download/下载电脑系统对应的最新的windowsInstaller(.msi)文件，下载完成
2020-04-17 09:45:12
4173
1
转载 JavaScript事件循环机制
先来明白些概念性内容。进程、线程 进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。 线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。 浏览器内核 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核...
2020-04-03 20:25:58
120
原创 JavaScript运行机制
一，JavaScript几个概念JS是单线程：主要用途是与用户互动，以及操作DOM，避免了同时操作同一个DOM的矛盾问题；Web Worker多线程：实现的“多线程”实际上指的是“多子线程”，完全受控于主线程，且不允许操作DOM；事件循环：js引擎存在monitoring process（监控）进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue（事件队列...
2020-04-01 17:54:24
212
原创 Nuxt.js使用百度地图vue-baidu-map
vue-baidu-map文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage在plugins新建map.js:import BaiduMap from 'vue-baidu-map'import Vue from 'vue'Vue.use(BaiduMap, { ak: '申请的百度地图密匙'})在nuxt....
2020-03-27 18:15:10
3026
4
原创 Nuxt.js使用postcss-px2rem和flexible
1，下载flexible.js下载地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js下载后放到/static目录下2，安装postcss-px2remnpm install --save postcss-px2rem3，配置打开nuxt.config.js3.1，在head...
2020-03-27 17:17:46
2285
2
原创 JS获取当前时区的时间戳
var getCurrentZoneTime = function(zone){ var timezone = zone; //目标时区时间，东八区 var offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟 var nowDate = new Date().getTime(); // 本...
2020-03-27 17:06:35
3015
原创 小程序或uniapp开发image存在边距或者富文本中img宽度超出问题
1，image图片存在边距将imgae设置成display:block或者在其父级添加font-size:0;2，富文本中img宽度超出的问题富文本标签的父级设置font-szie:0;将富文本的img标签添加class:data.replace(/\<img/gi, '<img class="rich_text_img" ')设置样式：.rich_te...
2020-03-27 14:37:45
2450
原创 微信扫码进入小程序传参
1，后台直接拼接参数在小程序的首页onLoad方法里面获取参数： async onLoad(opt) { if(opt.q){ //参数为：调用小程序链接?query=xxxx let q = decodeURIComponent(opt.q); let _i1 = q.split('?')[1]; let _i2 = _i...
2020-03-27 14:28:10
1608
原创 Js模块化
Js模块化规范：一：CommonJS1，只有node环境下支持；2，导出：2.1，使用exports或module.exports，等号导出2.2，导出原理：因为js的对象复制仅仅是改变指针位置，所以exports与module.exports写法一样；exports写法上exports.a=xxx,exports.b=xxx，逐个给exports对象设置值，可以写多个...
2020-03-26 00:02:38
117
原创 uniapp开发小程序之上传图片（拍照或从相册中取）
<view @tap="ChooseImage"> 上传图片</view>methods:{ ChooseImage() { uni.chooseImage({ count: 1, //可选择数量，默认9 sizeType: ['compressed'], //只能上传压缩图 sourceType: ['album','camera'],...
2020-03-17 14:03:53
4925
3
原创 uniapp开发小程序之授权推送通知
<view @tap="getTmplID"> 授权通知</view>methods:{ getTmplID() { uni.requestSubscribeMessage({ tmplIds: ['321e21e21'], //需要授权的消息模板类型 success(res) { console.log(res) },...
2020-03-17 13:58:59
3750
原创 uniapp开发小程序之获取当前位置经纬度
onLoad() { var _self = this; uni.getLocation({ type: 'wgs84', success: function (res) { _self.lng = res.longitude || ""; _self.lat = res.latitude || ""; } });}
2020-03-17 13:54:56
1284
原创 uniapp开发小程序之获取手机号
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>methods:{ async getPhoneNumber (e) { let _self = this; //请求后端接口换取手机号 if(e.detail.encryptedDa...
2020-03-17 13:49:33
2000
1
原创 uniapp开发小程序之分享转发
<button open-type="share" @ShareAppMessage="onShareAppMessage "> 分享</button>methods:{ onShareAppMessage (){ return { title: "标题", path: "/pages/index?productI...
2020-03-17 13:45:54
2957
转载 相邻的div层margin 负值被覆盖引起的层级(z-index)问题
相邻的div层margin 负值被覆盖引起的层级(z-index)问题：描述：需求：A和B层，B层margin-top:-50px;目的：B层隐藏50px与A层下<div class="A"></div><div class="B"></div>出现问题：B层覆盖A层上50px，而不是隐藏在A层下；解决办法：第一...
2020-02-10 15:29:32
1022
转载 利用Chrome在PC电脑上模拟微信内置浏览器
1、先了解安卓微信和Ios微信的UA（User agent：用户代理）安卓微信UA：mozilla/5.0(linux;u;android4.1.2;zh-cn;mi-oneplusbuild/jzo54k)applewebkit/534.30(khtml,likegecko)version/4.0mobilesafari/534.30micromesseng...
2020-02-10 15:26:08
1886
原创 vue使用jsonp插件
1.安装npm install jsonp --save-dev2.引入jsonpimport jsonp from 'jsonp';3.请求数据export default { created(){ //jsonp请求数据 var keyword = "李白"; var baseUrl = "https://sp0...
2020-02-10 15:21:50
733
原创 uniapp app 端调微信支付接口
uni-app 官方文档支付接口如下：uni.requestPayment({ provider: provider, // wxpay、alipay orderInfo: 'orderInfo', //微信、支付宝订单数据 success: function (res) { console.log('success:' + JSON.stringif...
2020-02-10 15:18:55
1829
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人