- 博客(27)
- 收藏
- 关注
RSS订阅原创 微信小程序input层级穿透解决
微信小程序里面，由于input是原生组件，所以会存在层级穿透的问题，view标签无法覆盖在上面，点击的时候，下面的input组件会被聚焦，下面记录一下解决方法解决方法1.使用cover-view代替view（不太推荐）该方法适合覆盖在上的input标签上的东西样式不太复杂，因为cover-view标签支持的css有缺失，而且cover-view标签在动画切换的时候会最先出现在屏幕中，最迟消失在屏幕中，体验不太好2.使用view代替input（推荐）在input同级创建一个view标签，然后在css
2021-10-09 09:51:46
4073
原创 eslint记录
eslint使用记录官网属性root：该属性为true，既告诉编辑器，不用继续去上级目录寻找eslint文件env：环境配置，表示启用eslint的环境extends：继承，表示继承这个字段里面那些文件的eslint配置parser：模块解析器，如vue就需要配置vue-eslint-parserparserOptions：模块解析器配置plugins：插件，表示eslint中要使用的插件globals：额外的全局变量rules：配置规则的地方，可以对继承的eslint配置进行修改，也可
2021-03-05 11:10:39
167
1
原创 手写Promise
promise为es6新增加的用于处理异步的方法先上代码class MyPromise { PENDING = "PENDING"; // 等待状态 SUCCESS = "SUCCESS"; // 成功状态 FAIL = "FAIL"; // 失败状态 constructor(fn) { // 此处的fn为构建promise时的方法 this.state = MyPromise.PENDING; // promise的状态 this.value = undefined;
2021-02-22 18:02:42
156
原创 electron打包速度优化记录
背景electron打包特别慢，需要20多分钟，非常影响开发和测试，所有便想对这部分进行优化观察打包过程与整理思路1.项目基于electron-vue，经过观察，打包分为3部分：主进程打包、渲染进程打包、将上述2者打包到一起，2.观察结果：第一步观察中打包非常的快，第二步耗时非常的久，第三步主要是卡在了下载最新的electron包上3.那么主要便是优化第二步，vue部分的打包（第三步在后面会讲）结论：主要问题出在了webpack配置部分开始vue部分优化vue部分优化是老生常谈的，这里我说一
2021-02-21 12:37:28
1728
1
原创 electron热更新
该文章仅记录热更新实现，全量更新请参考官网：传送门1.原理分析1.1 热更新需要替换内容electron-builder打包时，会按照package.json中build字段的配置进行打包，其中打包的目录为files字段，所以其实我们每次更新只需要将该部分的内容替换，不需要将整个包更新，可以减少150m左右的更新大小，同时node_modules中的文件一般情况下也是不需要更新的，整个根据项目大小，又可以减少一波大小1.2 包内容解析我们files字段中的文件最后会被electron-builde
2021-02-07 10:25:00
1308
3
原创 rollup+typescript+vue构建组件库
创建项目mkdir rollup-vue-tscd rollup-vue-tsnpm init -ytsc -inittsc -init命令：初始化并创建tsconfig.json文件安装依赖第一步rollup相关npm i rollup rollup-plugin-buble rollup-plugin-commonjs rollup-plugin-json rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-fi
2020-12-24 15:33:31
2797
原创 不发包调试npm（npm link）
有时候我们封装好的npm包在实际项目中的表现与我们的设想有出入，每次都发包调试很麻烦，同时也让版本管理不方便，这个时候可以使用npm link进行调试第一步：打包先讲我们的npm包打包出来:npm run build第二步：npm link进入我们打包出来的文件存放目录，比如lib，执行命令:npm link第三步：进入我们的实际项目上一步已经将我们的npm包挂在了全局，这个时候就可以在项目中引入了，然后就可以正常使用了：npm link npm包的名字第四步：解除linknpm
2020-07-13 14:38:02
1398
原创 vue封装npm包
有时候存在一个模块的功能，多个项目中被用到，这样的话每次都需要复制过去，修改配置，很麻烦，还存在改错，漏改的情况，这时就可以考虑将这个模块封装成npm包，在需要的项目中安装，非常方便，不想看的可以直接下载我修改好的模版，上教程：创建好的模版1.首先创建一个新的vue项目建议选择typescript，这个是未来的趋势，也方便vue3.0后的重构vue create my-npm2.创建packages文件夹，里面放我们开发的组件2.1在packages下创建我们自己的组件需要给组件设置name
2020-07-10 11:51:59
694
原创 electron获取媒体流（实现屏幕分享）
背景最近项目需要接入直播系统，在调研了多家平台后，发现部分公司的针对electron的sdk存在一些问题，如适配的electron版本较低或sdk本身存在问题，所以使用了web的sdk，然而web的sdk在进行屏幕分享时存在一个权限问题，直接上教程：在electron中使用屏幕分享1.使用electron提供的接口获取桌面窗口信息import { desktopCapturer } from 'electron'desktopCapturer.getSources({ types: ['wind
2020-07-02 10:11:49
8501
1
原创 vuex分析，记录
最近项目中vuex用的比较多，特此记录一下：vuex：vue中的状态管理，可用于保存一些全局的变量，方法，如购物车，token等vuex中有state，getter，mutations，actions，modules这5个state：元数据，类似于vuex中的data属性中的值，原则上是不应该直接修改,但是如果你一定要改也是可以的 getter：计算属性，和组件中的computed一...
2020-04-18 14:14:59
126
原创 vue watch深入了解
vue动态监听一个属性，可以使用watch，1.基本类型的监听，使用方法如下：export default { data(){ return { name:'' } }, watch:{ name(val,oldval){ // 逻辑代码 } }...
2020-03-26 18:32:25
130
原创 electron起一个http服务
项目需要在electron中起一个http服务用于访问本地的音频文件，经过研究，其实和普通的http服务一样audioServer.js文件：const path = require('path')const http = require('http')const fs = require('fs')const os = require('os')function audioServ...
2020-01-09 18:32:18
5813
原创 electron(node) http(s)下载文件
最近用了electron，内部需要实现一个下载，后来查询资料等发现实现方式和node是一样的（electron可以使用node的api）import os from 'os'import fs from 'fs'import pathfrom 'path'import http from 'http'import https from 'https'//此处promise是因为...
2019-12-13 15:13:13
1304
1
原创 小程序底部导航栏动态生成
1.在app.json中增加关于底部导航栏的设置"tabBar": { "custom": true,//这个要有,设置启用自定义tabbar "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "select...
2019-09-23 14:43:12
3948
原创 vue路由懒加载和组件懒加载
懒加载：又叫延迟加载，首页优化需要用到路由懒加载的2种方式第一种：前面不需要import这个组件const router=new Router({ routes:[ { path:'', name:'lazy', component:resolve=>(require(["@/co...
2019-03-20 15:20:11
553
原创 vue使用tradingview切换商品和周期
关于tradingview切换商品和周期：this.widget.setSymbol("商品名","商品周期",callback);回调函数可以不填，不影响，前面2项需填写，商品周期需是resolveSymbol函数，返回的intraday_multipliers这个字段数组中存在的...
2018-12-27 11:36:35
3290
原创 vue使用tradingview第二步数据接入（别的框架可以借鉴）
本篇教程写的是tradingview图表的数据接入，关于初始化在第一篇教程第一篇：传送门根据官方文档，datafeed这个文件中便是一些数据处理，根据api，我对这个文件进行了一些处理，将一些一般用不到的网络请求都修改或删除了（没删干净，有冗余，哈哈哈），保留了关于数据的一部分（不影响使用，切换商品，切换周期都正常）根据我的研究，其实关于数据和显示的基本都集中在getBars和reso...
2018-12-27 11:19:41
2849
1
原创 vue使用tradingview第一步图表初始化（别的框架可以借鉴）
本教程比较长，分为2篇发，第一篇为完成图表初始化，第二篇为完成数据接入第二篇：传送门先附上tradingview的文档：查看文档 图表本身的文件请向官方发邮件申请（贼麻烦，感觉一部分公司审核通过不了）官方git仓库 推荐一个大神的作品，一开始我也是这样使用的不过后来因为一些原因使用了api的接入方式：https://github.com/webdatavisualdev/vue-tra...
2018-12-27 11:19:32
4037
原创 js保留小数位数，四舍五入和非四舍五入
四舍五入的方式：这种方式可以使用js自带的函数：value.toFixed(x)，x为需要保留的小数位数，不足位数时会补0,value须为Number类型；例：let data=12.135;console.log(data.toFixed(2));//12.14非四舍五入的方式：这种方式为直接舍去，但是js没有自带的函数，所以可以使用substring这个函数进行切割；...
2018-12-25 18:03:32
4754
1
原创 js手写轮播图
逻辑：在warp中放入5张图片，并排排列，每次向右移动一个图片的距离body：<div class="container"> <div class="wrap" style="left: 0;"> <img id="img1" src="" alt="">
2018-12-25 11:08:52
3000
原创 js-cookie使用详情
npm install js-cookie -Simport Cookies from 'js-cookie'写入Cookies.set('键名','键值')Cookies.set('键名','键值',{expires:1}) //0.01约为25分钟获取Cookies.get('键名')删除Cookies.remove('键名')...
2018-09-11 11:26:45
1626
原创 git多人开发步骤
第一步，先提交自己的修改到自己的分支git add . git commit -m '备注'第二步，下载master分支的内容git checkout master git pull第三步，合并master到自己的分支git checkout 分支名称 git merge master第四步，验证以及解决冲突第五步，把自己的分支合并到mastergit...
2018-09-10 15:11:24
336
原创 vue组件父子组件，子子组件传值
第一种：父组件传值给子组件父组件：<template> <child :value='info'></child></template><script>import child from '自组件路径'export default { name:'parent', data(){ ...
2018-09-05 11:01:47
190
原创 移动端使用手淘的flexible+px2rem使用
纯flexible（原生，别的框架，都可以使用）第一步：引入flexible相关文件第一种：使用cdn： <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>第二种：1.去下载相关文件自己引入：https://github...
2018-09-05 10:42:18
1371
原创 vue项目中使用tinymce编辑器
第一步：npm install tinymce -S第二步：创建组件//增加模版<template> <div> <textarea :value="value"></textarea> </div></template>//在script中引入import tinymce from &q
2018-09-03 14:23:14
3561
1
原创 纯css实现jquery slideup效果
style：.row { background: red; width: 400px; height: 400px; overflow: hidden; position: relative; } .slide { width: 100%; background:...
2018-08-31 09:51:26
757
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人