前端通用
关注
分享
扫一扫
总结的前端遇到的一些问题以及实战开发的一些便捷工具
菜鸟老五
证明自己，用结果说话。
展开
-
前端工具批量生成NFT图片头像并下载
代码】前端工具批量生成NFT图片头像并下载。原创 2022-08-19 09:12:21 · 1075 阅读 · 0 评论 -
解决uniapp列表快速滑动页面数据空白问题
解决上滑加载页面空白异常原创 2022-06-22 10:26:36 · 5648 阅读 · 0 评论 -
前端通用问卷题型源码
<template> <view> <!-- 消息 --> <view class=""> <u-top-tips ref="uTips"></u-top-tips> </view> <!-- --> <!-- 标签列表 --> <u-gap bgColo...原创 2022-04-15 10:09:57 · 1230 阅读 · 0 评论 -
Excel表格数据转为json格式数据
/****有时候因为部分业务需求，需要前端或者其他岗位同事来把Excel数据转换为json数据格式插入表或者转为静态json数据，网络上很多案例都是层次不齐，要吗就是转换乱码，要吗就是缺结尾符号啥的还得各种改，近期整理了一个demo，大家可以看看效果，有其他好的方式也可以一起分享一下*/vue项目中安装插件Excel转json插件#安装转化json文件插件npm install vue-xlsx-table --save# main.js 文件引入/注入插件import v.原创 2022-04-02 11:41:03 · 8192 阅读 · 0 评论 -
前端VUE图片预加载
前景：先来说一下图片预加载跟图片懒加载有什么区别：1.图片懒加载：相对于项目中的图片因为网络原因加载太慢，那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来，这个时候自定义化包括图片组件化会在加载的过程中先给出一个默认图进行显示，当我们项目中要显示的图片加载完成之后在替换掉默认显示的懒加载图片，这是一种情况，第二种情况呢就是图片加载异常显示一个默认图，处理逻辑一样，区分一下图片加载中还是图片加载完成异常的情况插入默认图就好了。2.图片预加载：相对于这种情况呢，就...原创 2021-09-10 14:29:01 · 4723 阅读 · 14 评论 -
面试总结
1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放.原创 2021-04-20 17:40:10 · 166 阅读 · 0 评论 -
支付宝小程序测试唤起支付
//index.axml<!-- 最外层视图 无意义 --><!-- --><view class="content"> <view class="conent"> <!-- 支付宝唤起支付 --><button type="default" onTap="pa原创 2019-02-16 16:19:20 · 5332 阅读 · 4 评论 -
js常用递归无下限查找子集childer遍历（笔记）
/***统一封装一个公共方法* @param{val} 数组**/ ChilderTree(val) { //声明一个数组准备接收匹配好的数据 let arr = []; //判断传过来的数组长度 if (val.length !== 0) { //遍历匹配，把满足条件的数据追加到arr数组中，最后返回一个结果 val.forEach((item) = >{ let obj = {}; ...原创 2021-03-30 09:41:11 · 1730 阅读 · 0 评论 -
VUE项目中引入135编辑器
**【前言】前人栽树,后人乘凉 **由于之前做过这个功能，但是没有记录，这次再一次开发的时候忘了几步操作,花了半天时间又一次实现，充分知道了好记性不如烂笔头，记录一下分享给大家==|具体效果如图|==百度编辑器嵌套135编辑器/秀米编辑器===|【上手第一步】1.百度编辑器官网下载ueditor的文件压缩包 {这里吐槽一下,这玩意百度都不怎么维护了}【上手第二步】2.项目目录文件public文件夹存放以下文件：文件结构如下 ...原创 2021-02-07 16:14:38 · 2079 阅读 · 19 评论 -
H5完整版问卷模板
//如图，根据简要需求拟写一个简单的问卷模板1.顶部提示文案{根据需求跟换}2.百分比进度条跟随当前作答进度而改变3.当前题数/总题数4.根据索引显示上一题下一题/提交资料<html data-dpr="1" style="font-size: 37.52px;"> <head> <title>问卷调查</title> <meta charset="utf-8"> <.原创 2021-02-04 13:18:11 · 3621 阅读 · 11 评论 -
vue+elementUI实现添加多层级元素控件
<template> <div class="app-container"> <!-- 医生信息 --> <div> <div class="container"> <!-- 医生填写信息 --> <div class="handle-box"> <div class="handTOP"> <...原创 2021-01-07 11:30:26 · 1556 阅读 · 0 评论 -
使用hbuilder前端工具直接连接服务器FTP/SFTP连接传输上传文件
hbuilder前端工具直接连接FTP/SFTP连接传输上传文件#优点#1>不需要冗余的下载ftp工具*第一步*1>hbuilder插件市场安装SFTP/FTP Sync 2>直接访问链接地址下载插件*第二步*1>安装成功之后新建一个目录文件demo{文件名}2>鼠标右键目录选择FTP创建链接配置3>目录中会多出一个.ftp文件夹>ftp-sync.json4>修改ftp-sync.json配置{ "name": "My .原创 2020-11-18 17:59:08 · 3015 阅读 · 0 评论 -
优化代码==＞常见问卷调查模板，多端通用版本
<html data-dpr="1" style="font-size: 37.52px;"> <head> <title>问卷调查</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxim...原创 2020-10-26 15:45:00 · 449 阅读 · 2 评论 -
前端动态追加元素input
//如图效果<template> <view> <!-- 消息 --> <view class=""> <u-top-tips ref="uTips"></u-top-tips> </view> <!-- --> <!-- 标签列表 --> <u-gap..原创 2020-10-10 15:17:13 · 480 阅读 · 0 评论 -
h5关注公众号
H5在微信中引导用户关注微信公众号: 1>事件跟外链指定跳转地址就可以 ***这里注意修改该链接中的 __biz=参数*** 1这个参数从哪里来呢，登录自己个人或者企业的公众号，检察元素，搜索关键字uin_base64：复制内容替换 2>window.location.href="https://mp.weixin.qq.com/mp/profile_ext?action=home&_.原创 2020-09-21 11:46:06 · 1809 阅读 · 2 评论 -
移动端瀑布流/信息流布局以及交互
//瀑布流/信息流简易布局{布局分为左右两列排版}1-优点：粘贴复制代码，小程序，H5通用，绝对满足80%需求2-缺点：代码逻辑复杂用臃肿3-分析实现思路： ---1.布局为左右两列布局样式 ===left{状态显示两种： --1长图形态显示 --2短图形态显示} ===right {1长图形态显示 -2短图形态显示} ---2.数据源JSON数据List.原创 2020-07-14 16:13:01 · 2877 阅读 · 0 评论 -
多端通用完整版购物车【H5/微信小程序/支付宝小程序/字节跳动小程序/百度小程序/抖音小程序/】
近期有一些同行提到我写的一篇文章【完整版购物车】反响还不错，然后私信问我能不能有字节互动跟支付宝小程序的购物车功能，于是我。。。。。题外话：1.uniapp这款框架，通用多端应用【H5,支付宝小程序,微信小程序，字节互动小程序，百度小程序，QQ小程序】【安卓/ios】2.注意：【安卓/ios】安卓可以生成apk本地包以及远程包下载测试查看，上线之前ios跟安卓都需要配置证书3.uniapp生成【字节互动小程序】源码后，字节互动小程序又可以延伸出【抖音小程序，今日头条小程序，皮皮.原创 2020-06-29 17:26:30 · 1865 阅读 · 0 评论 -
百度智能小程序展开/收起功能
##如图所示//swan:<view class="rowlike {{!showMore? 'hiddenmore' : 'showmore'}}"><!-- 标签选择 --><view s-for="item,index in softwareLabel" data-item="{{index}}" class="label {{index>5 ? 'more-item' : ''}}"style="{{index == sid?'backg.原创 2020-05-27 15:42:16 · 478 阅读 · 0 评论 -
百度API身份证识别用户信息功能OCR
百度api地址:https://login.bce.baidu.com/?account=&redirect=http%3A%2F%2Fconsole.bce.baidu.com%2F%3Ffromai%3D1#/aip/overview//如图所示，上传图片请求百度api，获取识别到的图片信息 //核心代码 wx.getFileSystemManager().readFile({ filePath: res.tempFil...原创 2020-05-22 14:05:52 · 1363 阅读 · 4 评论 -
微信云函数开发小程序第二章【纯前台+云存储+云开发构建+ivewApp组件】（增删改查）
前情介绍：公司技术开发者在做项目中，简单规划分为(前端开发工程师)、(后端开发工程师)一起去开发项目，前端主要搭建（展示给用户看到的渲染层架构），搭建页面渲染框架跟结构，后端搭建服务层架构，前端需要请求后台接口去操作数据的增删改查页面逻辑渲染，云函数开发其实就是把整体体系都连贯在一起，包括云存储，数据库，直接忽略掉X后端开发工程师，前端开发工程师可以直接从头到尾开发项目到部署发布...原创 2020-05-08 15:51:25 · 654 阅读 · 0 评论 -
微信云函数开发小程序第一章（搭建环境，前端页面架构搭建/创建数据库表结构/链接数据库查询数据）
1==>下面直接介绍创建一个云开发函数/微信小程序1>第一步打开微信开发者工具创建项目 选择云开发(如下图)第二步==》进入项目中，点击获取OpenID，很多同学都会遇到控制台报错(如下图)↓↓↓↓↓↓↓↓↓↓answer:解决方法：（三个步骤）第一步：选中项目目录中login文件夹，鼠标右键选择在终端中打开：第二步：安装依赖：npm ...原创 2020-04-28 17:10:14 · 637 阅读 · 0 评论 -
通用多端共用css加载动效
/** 多端通用css初始化动效加载 **/<!-- 加载动效组件 --><template> <!-- 最外层包裹视图容器 --> <div class="loading"> <!-- 圆形圈圈 1 2 3 4 --> <div class="radio-block" v-for=...原创 2020-03-16 11:17:06 · 236 阅读 · 0 评论 -
前端通用免费api/站长工具记录
站长工具通用（JSON API免费接口/加密解密/格式化/前端后端工具）：http://www.bejson.com/knownjson/webInterface/部分简易api免费网站：https://www.juhe.cnmock虚拟设计接口网站：http://yapi.demo.qunar.com/project/30566/wiki解决js在url中传参丢失参数异常...原创 2020-03-09 12:13:35 · 1377 阅读 · 0 评论 -
vue+elementUI实现导出excel功能+批量导入功能
首先：npm安装一些插件1>导入插件 npm install xlsx2>导出插件elementui默认自带<!-- 1对1管理 / 套餐管理 --><template> <div class="table"> <div class="crumbs"> <el-breadcrumb sep...原创 2020-02-20 17:25:34 · 6111 阅读 · 2 评论 -
vue构建出现部分问题解决方法
vue构建出现You may use special comments to disable some warnings.异常问题？解决方式：1>>>找到build/webpack.base.conf.js文件，注释或者删除掉：module->rules中有关eslint的规则module: { rules: [ // ...(config.dev.us...原创 2020-02-20 17:11:05 · 190 阅读 · 0 评论 -
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额]
代码注释很容易理解 <!-- 最外层视图pages --><view class="pages"> <view wx:if="{{hasList}}"> <!-- 编辑 --> <view class='edit'> <label class='edit_btn' bindtap...原创 2018-07-20 13:59:13 · 22653 阅读 · 28 评论 -
cdn使用axios请求数据
1引入cdn环境使用axios第一步引入cdn地址1>指定版本{下载地址---https://www.bootcdn.cn/axios/}<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script><script type=...原创 2020-01-07 12:01:05 · 9813 阅读 · 1 评论 -
css实现箭头抖动效果
//index.css@-webkit-keyframes dou1 {0% {// -webkit-transform:translate(0, 0px) rotate(45deg);-webkit-transform:translate(0, 0px)}50% {-webkit-transform:translate(0, -5px)}100% {-webkit-tran...原创 2019-10-24 12:31:27 · 1297 阅读 · 0 评论 -
红包动画弹窗
红包动画效果https://6465-dev-m4zlr-1300328850.tcb.qcloud.la/payMoney/bk.mp4//red_page.js文件/** * > 组件名:mask-alert * > 调用方式第一步:JSON引入"red-page":"../components/red-page/red-page" * > 调用方式第二步:页...原创 2019-10-18 11:29:27 · 1063 阅读 · 0 评论 -
JS自动打字输入
//HTML<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title> transition</title><link href="https://fonts.googleapis.co原创 2018-09-18 10:48:48 · 4913 阅读 · 0 评论 -
前端h5网页共用------AJAX结合VUE实现购物车
//html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,u原创 2018-09-25 14:40:46 · 792 阅读 · 0 评论 -
前端js调用js
//Afunction show_A () { console.log("show_A");}//B //程序代码 new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src"...原创 2018-09-25 13:22:42 · 2242 阅读 · 0 评论 -
vue.js实现购物车加减数量，计算金额数量,选中/未选中
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>老五购物车</title> <meta name="viewport" content="w原创 2018-08-20 10:41:10 · 19980 阅读 · 9 评论 -
vue.js实现h5机器人聊天测试版
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sca原创 2018-08-24 11:03:16 · 2597 阅读 · 0 评论 -
h5/web遮罩弹窗
前提下载一个js文件引入哦！<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum原创 2018-08-20 11:32:35 · 9438 阅读 · 0 评论 -
介绍一款强大的框架-------一套代码生成两端应用【h5应用】--【小程序】
Touch WX 是什么？Touch WX是一套完全免费的微信小程序开发框架，包含丰富的UI控件用于官方组件的补充。与WeTouch和Touch UI开发模式保持了很大的一致性。与其他小程序框架最主要的区别在于：Touch WX完全是基于小程序官方的自定义组件机制实现，输出的是小程序原始代码，而不是输出开发者完全无法阅读的编译代码。这样当遇到问题时，开发者可以很方便的定位问题所在，还可以基于...原创 2018-08-07 15:46:48 · 3094 阅读 · 0 评论 -
html页面点击生成图片并可以下载图片
-----最近一位朋友的项目有个需求，是用户可以在项目中点击，让html页面生成图片，并且可以导出下载。我就做了一个简单的例子，有同样需求或者感兴趣的同行可以看看 //HtML<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name=原创 2018-09-03 09:57:51 · 13512 阅读 · 21 评论 -
JQeury优缺点
优点:jQuery实现脚本与页面的分离，是操作DOM的首选js库。最少的代码做最多的事情最少的代码做最多的事情，这是jQuery的口号，而且名副其实。使用它的高级selector，开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异，它除了还完全支持Ajax，而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更...转载 2018-06-22 10:50:42 · 252 阅读 · 0 评论 -
h5前端车辆信息三级选择首字母检索-----------------[原理其实都一样]
.city { display: block;}.city .city-wrapper { position: fixed; top: 0; bottom: 0; width: 100%;}.city .city-wrapper .cities .title { height: 28px; padding-left: 16px; ...原创 2018-05-25 10:15:03 · 2142 阅读 · 21 评论 -
JavaScript框架js脚本
jQuery(一个快速、简洁的JavaScript框架)<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><sc转载 2018-05-03 18:28:21 · 600 阅读 · 0 评论