- 博客(25)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端性能优化方案（gz,serviceWorker）
一、问题场景1、在网络不稳定的情况下，页面访问速度不稳定2、在网络稳定、前端资源较大的情况下，页面访问速度较慢二、调研思路1、在首次访问页面时，静态资源需要从服务器拉取；那如何做到除首次访问，不需要从服务器再去拉取静态资源；2、在架构项目中（vue，react），chunk-vendors.js体积的大小决定这首屏渲染的速度；如何能做到减少chunk-vendors.js的体积或者提升它的加载速度；三、解决方案1、在架构项目解决加载和文件体积；1、路由懒加载方式； 根据访问的路由去加载路由
2020-11-18 14:06:14
640
1
原创 APP 开发模式选型
一、混合式开发；二、原生端开发；三、跨端模式开发；市面上常见的 app 开发模式也是上面的三种；具体来看一下优缺点。app 开发的上架周期不同；Android App 上架各个商店的周期为 3 到 5 个工作日；ios 的上架周期为 1 到 2 周的工作日；混合式开发顾名思义，就是混入式开发。简单来说，一个 app 的开发涉及到Android开发和 ios 开发。混合式开发的目的就是在Android和ios端引入前端开发的页面（业务模块相同），本来 2 个人干的活；由第三个人（前端开发）开发相
2020-11-12 10:11:10
735
2
原创 项目页面加载慢的解决办法。ServiceWork的配置
1、减少 chunk-vendors.js 体积；项目实现 路由懒加载；（访问那个页面，加载那个页面的 js）￥#2、增加网络带宽3、实现缓存机制（ServiceWork）1.对于 public 文件的操作 在index.html 写入以下 js（1）：在public 文件夹下创建 service-worker.js 写入以下代码const CACHE_NAME = 'cache_version_2020-11-11'; //版本号 必须要有 不然无法更新 可以是毫秒时间戳// 需
2020-11-11 18:40:51
1104
1
原创 react项目创建（二 安装 antd 按需加载）
1、安装antdyarn add antd2、安装babel-plugin-importyarn add babel-plugin-import 3、修改根目录下的package.json （babel处）"babel": { "presets": [ "react-app" ], "plugins":[ [ "import", { "libraryName": "antd",
2020-11-06 10:23:23
178
原创 vue项目中监听手机物理返回键
需要监听手机的回退按钮。1、挂载完成后，判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.fun, false);//false阻止默认事件 }}2、页面销毁时，取消监听。否则其他vu
2020-09-11 11:05:30
1112
1
原创 基于vue element 的 子导航组件
效果图#面包屑安装yarn add xe-utilsyarn add rj-breadcrumbs说明 基于 element ui XEUtils工具类 只需要把菜单树形结构传入 就可以了##使用<template> <div> <RJbreadCrumbs :active="activeClass" :crumbs="crumbsClass" :menu="menuConfig" /> </div>
2020-09-03 14:48:20
328
原创 js 字符串转字节流，字节流转字符串，无编码问题
<script type="text/javascript"> function stringToByte(str) { var bytes = new Array(); var len, c; len = str.length; for (var i = 0; i < len; i++) { c = str.charCodeAt(i); if (c >= 0x010000 && c <= 0x1
2020-08-11 17:56:33
4934
原创 基于 vue element ui 封装的 X轴标题 Y轴标题 自定义插槽
子组件<template> <div id="tableXY1"> <table style="width: 100%" class="myTable"> <tr v-for="(item,index) in column" :key="index"> <td class="column" :style="{background: item.colorBJ ? item.colorBJ:'#ebeef5'}"&.
2020-07-23 14:46:47
827
原创 react（16.13.1）项目创建（一）
1.安装reactnpm install -g create-react-app2.创建项目create-react-app react-antd3.简化项目4.pubilc目录 index.html5.src目录下 index.js6.src目录下 App.js7.如果不想要语法检测，可以删除它 主目录下package.json；删除node_modules 重新执行 npm install...
2020-05-25 14:57:59
629
转载 前端项目时因chunk-vendors过大导致首屏加载太慢的优化 (转载)
因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。1.npm使用下面命令安装npm install --save-dev compres...
2020-05-09 13:11:17
5429
原创 在vue中使用speak-tts文字转语音播放
1、拉包npm install speak-tts2、在页面中引入import Speech from 'speak-tts' // es63、初始化以及实现data () { return { speech:null }},mounted(){ this.speechInit()},methods:{ speechInit(...
2020-03-11 17:25:45
5960
13
原创 mpvue创建项目
首先，使用mpvue框架可以在常用的开发工具中开发，也可以在微信开发者工具中开发；1、检查vue版本 vue -V2、创建项目 vue init mpvue/mpvue-quickstart wx-mpvue? Project name wx-mpvue 项目名称? wxmp appid touristappid appid? Project description ...
2020-03-09 15:41:37
401
原创 vue cli 4.1.1完整项目搭建 （第二步，搭建页面、路由）
整体项目 已经 上传到githup 上了 可以下载下来https://github.com/17600777607/vue-iview然后点击下载就可以了首先 比起第一步 多了太多的文件了先看目录 //第一步的目录 //第二步的目录 - node_modules //node依赖 - publ...
2020-01-09 15:50:40
3991
原创 vue 打包后 禁止在浏览器输出 console 等
1.打开 vue.config.js 把下面内容复制 pure_funcs种配置你要移除 的项module.exports = {// 打包后禁止在控制台输出console.log configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.plugin...
2020-01-02 18:01:07
3655
原创 iview table 表格实现 单列超出隐藏 鼠标悬浮出现详情
效果图直接复制粘贴下面代码 就可以{ title: '交易订单号', align: 'center', key: 'id', minWidth: 120, render: (h, params) => { let texts=params....
2019-12-27 13:47:56
2543
原创 echarts 在vue中配置渐变折线图
效果图直接上代码option = { title: { text: '平台收入统计', x: 'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） textAlign: "center",//水...
2019-12-20 13:47:19
1899
原创 echarts 在vue中配置渐变 圆环图
直接上代码// 绘制图表 let option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)', }, //在这里配置圆环中间的logo graphi...
2019-12-20 13:41:41
1316
原创 在echarts中圆环图中间 自定义图片引入
首先 打开echarts官网实例https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut其次复制代码app.title = '环形图';option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}...
2019-12-16 21:11:31
7885
2
原创 canvas绘制多边形并填充
<body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas></body><script> let canvas=document.getElementById("canvas");...
2019-11-21 18:30:39
3788
1
原创 在vue中 使用JsSIP
第一步 拉取jssipnpm i jssip-for-node第二步点击签入的时候，要判断当前浏览器是否支持麦克风打开谷歌 右击属性 更改目标--unsafely-treat-insecure-origin-as-secure=" http://电脑ip"关闭当其浏览器 再次打开粘贴以下代码<el-button @click="signinApi('signin')...
2019-11-08 18:45:28
5909
9
原创 在vue中使用音频wavesurfer.js
效果图首先引入wavesurfer.js其次 封装 wavesurfer.js`<template> <div class="waveformOuter"> <div id="waveform" ref="waveform" /> <div class="play" @click="playMusic"> ...
2019-11-08 10:03:09
3598
5
原创 vue项目常用的 处理函数
//接听状态export function answeringTheState(level, salary) { if (level != "" || level != undefined || level != null) { // 状态 let states = { 0: () => { return "未呼叫" }, ...
2019-11-08 09:16:32
334
原创 pfd.js使用方法
使用场景 项目需求 webview嵌入页 直接使用iframe 标签嵌入pdf文件链接 在webview中直接不显示 在谷歌浏览器正常 在安卓移动端浏览器 直接显示下载pdf文件 经测试 下面步骤完全可以使 安卓和ios webview嵌入页正常显示和操作下载包 http://mozilla.github.io/pdf.js/getting_started/#download第一步：第二步...
2019-08-02 16:59:28
249
原创 一些常用的 js 函数 ：时间处理， 一键复制剪贴板 ，一个元素 和数组比较 并返回相同的值的 下标 ，rgb颜色随机
//时间处理function getYYYYMMDD(str) {let nDate = new Date(str)let nYear = nDate.getFullYear()let nMonth = nDate.getMonth() + 1let nDay = nDate.getDate()let nHours = nDate.getHours()let nMinutes = n...
2019-08-02 12:01:21
176
react-antd.zip
2020-05-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人