前端
关注
分享
扫一扫
jared.wang
写写工作遇到的问题
展开
-
uniapp 之 解决uni.showToast和uni.showLoading、hideLoading的冲突问题
在调取接口时，我们通常会在调取接口前给用户一个正在加载的一个提示框，也就是uni.showLoading，当接口可以访问成功时隐藏加载提示框（uni.hideLoading），然后根据访问成功后端返回的状态（success、error）来判断数据是否成功，当状态为success时需要给用户提示获取成功，反之提示获取失败，这时使用的就是消息提示框（uni.showToast）原创 2022-08-25 12:07:21 · 6678 阅读 · 0 评论 -
解决 uni-app 中 onTimeUpdate 方法无法在自动播放的时候不生效问题
解决uni-app 使用audio自动播放 无法正确监听进度问题原创 2022-07-06 15:45:24 · 2217 阅读 · 0 评论 -
精确判断数组和对象数据类型方法
在工作过程中有时需要判断区分数组和对象形式的数据, 直接用 typeof 无疑会得到下面的结果:console.log(typeof {'name': 'zhangsan'}) // 输出: objectconsole.log(typeof [12,1]) // 输出: object这时候就需要更精确的判断方法了:var isType = function( type ) { return function( obj ) { return Object.pro.原创 2022-02-25 14:41:56 · 412 阅读 · 0 评论 -
使用autoprefixer的时候,忽略单个属性
使用autoprefixer可以将css, less sass等补全适用的css, 并且可以将px 值转化为 rem 值如图所示, 因为转化后小数位数太多, 所以样式发生一定变形这时候我就不想要了转化了上官网查看后 发现 只要将 px改为 Px 就可以使 autoprefixer 忽略这一条css不进行转化为rem...原创 2021-12-06 15:03:58 · 336 阅读 · 0 评论 -
javascript使用sort()方法排序,当数据缺失时排序处理方法
今天遇到了个排序问题,当需要排序的字段缺少数据时,如下图出现此问题的原因就是当数据 undefined 的时候,函数无法正确判断返回下面贴出完整的代码, 亲测可用哦!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sort排序处理</title></head><body> <div><原创 2021-11-01 15:45:18 · 441 阅读 · 1 评论 -
vue3.0 + vite 使用less报错解决方法
使用less报错:[vite] Dep optimization failed with error:Could not load os (imported by node_modules\less-loader\dist\formatLessError.js): ENOENT: no such file or directory, open 'G:\xt\vue3\os'[Error: Could not load os (imported by node_modules\less-loader\d原创 2021-02-23 15:29:23 · 14957 阅读 · 2 评论 -
vue项目打包出现`warnings` is not a supported option解决方法
最近公司需要重新启用旧vue项目, npm install和npm run dev 都没有问题只有npm run build的时候会报下面这个错误, 虽然打包成功了, 但是还是探究一下 问题所在吧报错原因:warnings is not a supported option 意思是：不支持“警告”选项。报错是因为使用插件: ParallelUglifyPlugin; 版本号为: 1....原创 2020-04-24 16:10:20 · 5409 阅读 · 1 评论 -
node后台使用WebScoket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。首先来看前端代码<!DOCTYPE html><ht...原创 2019-11-25 14:36:56 · 510 阅读 · 1 评论 -
js关闭浏览器页面方法
方法一:再打开页面的是时候, 用新标签打开并给页面命名, 然后通过命名控制关闭<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>打开关闭浏览器</title></head><body> <butto...原创 2019-11-19 17:09:08 · 11473 阅读 · 0 评论 -
处理iphone 微信中.play()方法不能播放的问题
今天开发遇到一个问题, 就是在一个页面中连续播放多个声音， 但是 audio 标签在iphone 上只能播放一次, 就没有声音了研究了一下, 问题就是iphone 的微信需要兼容一下audio 这个标签的方法一 、添加一个audio标签<audio id="Jaudio" src="xxx.mp3" preload loop="loop" controls="controls"&...原创 2019-10-28 09:33:52 · 2145 阅读 · 1 评论 -
axios添加jsonp跨域请求
import axios from 'axios'axios.jsonp = (url, params) => { // 1 根据 url 和params 拼接请求地址 url += '?' for (let k in params) { url += k + '=' + params[k] + '&' } // 2 拼接 callback con...原创 2019-10-24 15:58:11 · 1734 阅读 · 1 评论 -
vue做一个简单的动态轮播图
首先先看样式这个轮播图是根据数据库里 的图片数量进行动态变化的只有一张图不轮播大于1张图才会动起来html<div class="banner"> <ul class="con" :style="classobj"> <li v-for="(item, index ) in banList" :key="index"> ...原创 2019-10-15 16:41:18 · 1351 阅读 · 0 评论 -
前端配置vue项目jenkins自动化部署
一： general这部分不需要配置，输入个项目描述就可以二： 源代码管理这里我使用的是Git， 需要配置Git的仓库路径和自己的账号密码底下的Branch Specifier 选择仓库的分支， 在这里我选的是主分支 master三： 构建触发器vue项目不需要这个东西， 可以直接略过四： 构建环境这里是很重要的，需要在jenkins 安装机器上 安装nodejs...原创 2019-09-18 16:41:33 · 1943 阅读 · 0 评论 -
前端js简单的分页功能
首先看下效果只使用js编写一个简单分页, 话不多说直接上代码这里是html代码<div class="page"> <span onclick="previous()">上一页</span> <span id="totalPage">当前第i页/共n页</span> <span onclick="next...原创 2019-09-12 16:34:14 · 411 阅读 · 0 评论 -
template-web使用方法
template-web使用方法好久没有用template模板, 然后重新复习了一下,顺便也分享一下!其中在调用 template(id, data)方法的时候,要注意2个参数:1. 第一个参数是 模板 script标签的 id名2. 第二个参数是 要渲染的数据, 注意:这是一个对象下面的按例就是渲染一个数组的多条数据使用{{ each file v i }} … {{ /each...原创 2019-06-27 13:58:22 · 3454 阅读 · 3 评论 -
vue项目前端添加微信分享
vue中的微信分享微信分享功能需要在每个页面刚刚打开的时候就初始化,然后用户点击分享才可以调用微信自带的分享.微信中限制其他的分享插件, 只能使用微信自己的分享功能在index.html文件夹中引入微信的js文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...原创 2019-07-09 14:29:51 · 1071 阅读 · 0 评论 -
vue-微信付款
微信支付方法微信付款不需要初始化功能, 只需要在使用的时候调用就可以了一. 引包<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1...原创 2019-07-09 15:20:03 · 736 阅读 · 0 评论 -
使用css3的3D制作一个正方形
使用css3的3D制作一个正方形首先我们来看效果首先想要制作 3D的效果 最重要的是 css3 中的 transfom-style 属性, 它有2个属性flat : 正常的平铺效果,preserve-3d : 将子元素转化为三维立体元素接下来通过定位让所有的子元素都 重叠在一起,并且通过transform 属性向 Y轴正方向移动正方形一半的距离因为每个子元素都是立体...原创 2019-07-04 17:28:02 · 3906 阅读 · 1 评论 -
前端上传图片并初步压缩图片
上传图片和压缩前端处理用户图片, 控制上传图片的大小, 减轻服务器流量压力首先通过input获取图片<input type="file" accept="image/*" alt="图片" multiple @change="changeImage">获取所有图片数据并添加到一个数组中 let file = e.target.files let arr = ...原创 2019-07-04 18:09:27 · 1192 阅读 · 1 评论 -
react 项目中引入图片的几种方式
几种react中插入图片以及背景图片的方式img标签引入图片因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片需要用下面的方式引入<img src={require('../images/picture.png')} alt="标签"/>背景图片引入1 第一种就是常规的 新建一个css文件，然后就可以直接写css语...原创 2019-07-06 14:16:29 · 9546 阅读 · 1 评论 -
使用node搭建一个简单操作本地文件的服务器
使用node搭建一个简单服务器要使用node搭建一个服务器， 首先肯定是要去node官网 查看文档的，根据文档， 可以知道node有哪些功能。下面是一个简单的node服务器，包含2个文件，启动的方式就是在node环境下 运行 node app.js首先， 需要引入一些node模块组件http模块文件模块 ：fs路径模块： pathurl模块： url接下来...原创 2019-07-06 18:03:13 · 1908 阅读 · 0 评论 -
vue事件委托
vue事件委托在vue中完成事件委托是非常方便的例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>...原创 2019-07-12 10:48:35 · 2467 阅读 · 0 评论 -
解决vue单页面跳转页面刷新问题
在vue单页中, 使用a标签href跳转单页面的时候,页面会闪一下,体验很不好根据研究, 是因为a标签默认属性使页面刷新了一下方法一: 使用编程式导航所以可以给a的href属性值为javascript:;阻止跳转, 然后使用点击处理跳转goToPage() { this.$router.push('/home')}方法二: 使用声明式导航直接使用vue自带的导航组件就可...原创 2019-07-12 11:09:42 · 4149 阅读 · 0 评论 -
使用Hbuilder新建一个多平台app项目
一. 下载Hbuilderhttps://www.dcloud.io/hbuilderx.html 可以根据自己的需要下载版本二. 生成一个uni-app项目点击 文件>新建>项目 可以打开新建项目窗口选择项目类型, 项目名称, 项目文件位置, 项目基础架构(这里我直接选择只有登录和一个主页2个选项卡的app),最后点创建就会生成一个基础项目文件项目结构...原创 2019-07-17 17:23:43 · 1346 阅读 · 0 评论 -
chrome浏览器解决跨域
最近重装了电脑, 然后chrome浏览器需要解决跨域问题在网上搜了基本有2种方法首先将chrome浏览器在桌面创建一个 快捷方式，然后点属性，在目标栏最后 加一个空格然后输出下面方法中的字符方法一： 使用 --disable-web-security 或者 --disable-web-security --user-data-dir=C:\chrome这个方法确实可以解决 跨域, ...原创 2019-09-11 16:13:14 · 400 阅读 · 0 评论 -
使用react创建单页面项目
react创建单页面项目并且组件传值首先在app.js中配置路由,这里是通过react-router-dom这个自带的组件完成的定义一个class类在里面进行单页面的创建,并且此文件还可以创建其他的页面以及多个单页面项目import React, { Component } from 'react';import { BrowserRouter as Router , Rout...原创 2019-07-08 11:28:23 · 981 阅读 · 0 评论