![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
前端相关
aiee
这个作者很懒,什么都没留下…
展开
-
react 不用插件,渲染json数据成markdown
renderMarkDown = str => {let object = {};try {object = JSON.parse(str);} catch (err) {console.log(err)}return this.renderObject(object)}renderObject = (object) => {switch (typeof (object)) {case "string":return <span style=原创 2021-03-03 18:16:22 · 358 阅读 · 1 评论 -
小程序编译&发布
1、编译在微信开发者工具中直接编辑就可以,立马就能在左侧看到效果,还可以真机调试,扫描二维码,或者登录微信号,即可在手机上打开微信查看2、发布微信开发者工具编译后点击上传,输入版本号和项目备注即可官方还提供了命名上传和http上传,具体可查看官方文档。上传成功之后,登录小程序管理后台- 开发管理 - 开发版本 就可以找到刚提交上传的版本了。3、提交审核首先确保小程序基本信息已经配置好,如何点击提交版本,输入项目信息。提交成功后可能会看不到审核版本,...原创 2021-03-02 17:42:48 · 1227 阅读 · 0 评论 -
小程序调用API服务
1、配置API服务地址登录微信公众平台:https://mp.weixin.qq.com/开发管理->开发设置->服务器域名,设置request合法域名,就是你的API服务地址的域名,目前只支持https2、封装API调用方法export function fetch(data, callback){console.log(data)wx.request({url: "https://***", //这里填写你的接口路径,需在微信公众平台配置过heade.原创 2021-03-02 17:25:45 · 2477 阅读 · 0 评论 -
微信开发者工具使用npm安装第三方包
1、项目下打开终端2、初始化npm终端输入npm init,回车,根据提示输入项目信息(其实一直回车就可以了,会自动输入默认信息),成功后会在项目下生成package.json文件。接下来生成package-lock.json,记录使用的第三方插件:npm install --production使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。3、安装第三方包npm i moment -S --pr...原创 2021-03-01 15:16:13 · 3357 阅读 · 3 评论 -
微信小程序开发环境
1、注册小程序开发小程序首先需要在微信公众平台注册一个小程序账号,注册地址:https://mp.weixin.qq.com/注册完成后生成一个AppID,记住这个ID,开发时需要用到,同时可以在这里配置服务器地址2、下载微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html下载安装成功后,打开工具新建项目,输入项目信息和上一步生成的ID即可初始化一个项目3、..原创 2021-03-01 15:03:26 · 2041 阅读 · 1 评论 -
axios封装多个baseUrl
import axios from 'axios';import { message } from 'antd';const createService = baseURL => {// 创建axios实例const service = axios.create({baseURL, // api的base_urltimeout: 50000 // 请求超时时间});// request拦截器service.interceptors.request.use..原创 2021-02-24 14:59:31 · 1465 阅读 · 0 评论 -
js 读取附件eml
1、eml后缀的文件是邮件导出的特有格式,前端往往有需求展示邮件内容,方法如下2、安装eml-format:yarn addeml-format 或npm installeml-format3、读取方法import emlformat from 'eml-format';const [emailContent, setEmailContent] = useState("");function readerEml(file) {let reader = new F...原创 2020-07-07 10:50:42 · 2308 阅读 · 2 评论 -
react dnd 拖拽antd table
1、封装拖拽Tableimport React, { useState, useCallback, useRef, useEffect } from 'react'import { DndProvider, useDrag, useDrop } from 'react-dnd'import HTML5Backend from 'react-dnd-html5-backend'import { Table } from "antd"import update from 'immutabil原创 2020-07-03 18:49:38 · 1457 阅读 · 2 评论 -
react dnd 实现拖拽功能,一个列表拖到另一个列表
1、拖拽组件封装import React, { useState, useEffect } from 'react'import { DndProvider, useDrop, useDrag } from 'react-dnd'import HTML5Backend from 'react-dnd-html5-backend'import { Row, Col, Card } from 'antd'function DragPanel(props) {...原创 2020-07-03 16:55:29 · 3448 阅读 · 2 评论 -
用变量巧妙替换switch写法
你是不是经常写这样的代码fun(value){name=""switch(value){ case "A": name="AA"; case "B": name= BB}return name}其实这段代码可以这样写fun(value){option={ A:"AA", B:"BB"}returnoption[value]}这么写有什么好处呢?1、逻辑清晰2、方便把option提出了作...原创 2020-06-12 10:59:59 · 853 阅读 · 0 评论 -
react前端框架环境搭建
1、创建react应用程序Create React App可在macOS,Windows和Linux上运行。npx create-react-app mytestcd mytestnpm start 或 yarn start 启动项目如果您以前create-react-app通过进行了全局安装npm install -g create-react-app,建议您使用卸载软件包,npm uninstall -g create-react-app以确保npx始终使用最新版本。...原创 2020-06-02 13:02:36 · 1360 阅读 · 0 评论 -
react+ant 自定义表单
import React, { useState, useEffect } from "react";import { Row, Col, Input, Select, DatePicker, Button, Tooltip } from "antd";import { Const } from "src/utils/const";const { Option } = Select;const { RangePicker } = DatePicker;interface IF..原创 2020-06-01 18:20:19 · 1188 阅读 · 0 评论 -
js excel导入数据
1、导入方法:function onImportExcel(file) {if (file.target.files[0]) {let reader = new FileReader();reader.onload = function (e) {try {let data = [];let workbook = XLSX.read(e.target.result, { type: 'binary' });const sheetData = workbook.Sheets.S原创 2020-05-26 11:04:45 · 568 阅读 · 0 评论 -
typescript dom对象转换成字符串
const emailHtml: HTMLElement = document.getElementById("email-view") as HTMLElement;const emailStr: string = emailHtml.innerHTML;原创 2020-03-24 10:41:14 · 2124 阅读 · 0 评论 -
重置密码 andt表单验证
import React from "react";import {Form, Icon, Input} from "antd";function PasswordForm(props) {const { getFieldDecorator,getFieldValue } = props.form;// 密码验证const passwordValidator = (...原创 2020-01-02 17:57:49 · 507 阅读 · 0 评论 -
css hover图片放大显示
.enlarge img{width: 100%;}.enlarge:focus img{position:fixed;width: auto;height: auto;left:0;top:0;right:0;bottom:0;z-index:20;margin:auto;}原创 2019-12-26 17:52:23 · 2076 阅读 · 0 评论 -
js moment 相对于当前时间的表现形式(5分钟前,1小时前)
/** * 获取相对于当前时间的表现形式 */function timeFromNow(time) { const format="YYYY-MM-DD HH:mm:ss"; const formatDate="YYYY-MM-DD"; const formatTime="HH:mm:ss"; let timeStr=moment(time).format(...原创 2019-12-20 13:29:08 · 6660 阅读 · 2 评论 -
braft-editor 图片(媒体库)上传至服务器并通过服务器返回链接展示
const myUploadFn = (param) => { const serverURL = 'http://upload-server' const xhr = new XMLHttpRequest const fd = new FormData() const successFn = (response) => { // 假设服务端直接返回文件上...原创 2019-12-20 12:28:23 · 4322 阅读 · 1 评论 -
js 表格导出Excel
依赖包yarn add js-export-excelyarn add xlsximport ExportJsonExcel from 'js-export-excel'import moment from 'moment';/*导出到Excel* columns与表格定义到columns可通用,* 如导出数据与api返回数据不一致,增加字段renderExcel修改原数...原创 2019-12-12 16:20:24 · 101 阅读 · 0 评论 -
vue 使用v-model绑定自定义子组件
v-model大部分解释是语法糖,其实就是在父组件中定义一个变量,通过v-model绑定变量传入子组件中,并在子组件改变这个值时,父组件能拿到最新到数据下面具体说说如何通过v-model绑定自定义组件,算了,也没什么说的,也不知道咋说,直接看代码吧!首先我们有一个父组件<template> <div> <el-button @c...原创 2019-11-15 14:37:09 · 1827 阅读 · 1 评论 -
js异步处理,指定时间内循环timeout
10秒内每秒执行一次方法,如果得到想要结果,停止循环for(let i=0;i<10;i++){ setTimeout(function () { ... if(...){ break; } }, i*1000);}原创 2019-11-08 14:14:52 · 519 阅读 · 0 评论 -
css 最常用样式
1、超出框架可滚动{overflow-y:scroll;}2、超出宽度显示省略号{ overflow: hidden; text-overflow: ellipsis; width:100px; }3、div同一行显示{display:inline-block}4、悬浮靠右{float: right}...原创 2019-11-08 14:03:05 · 412 阅读 · 0 评论 -
js获取浏览器信息
获取浏览器信息window.navigator.appNamewindow.navigator.appVersion获取浏览器版本,低版本做getAppVersion(){if(window.navigator.appName==="Microsoft Internet Explorer"){const appVersion = window.navigator...原创 2019-11-08 13:56:09 · 392 阅读 · 0 评论 -
JavaScript 对象或数组赋值不改变原对象或数组
JavaScript 中对象或数组的赋值是默认引用赋值的,使得改变对象时,原对象跟着改变,如果你想要复制赋值,则必须要重新分配对象,使用如下代码即可避免此问题:1、对象 Object.assign({}, object)let a = {'name': 'lily'};var b = Object.assign({}, a);b.name = 'lisa';conso...原创 2019-11-08 13:54:58 · 6066 阅读 · 1 评论 -
小程序开发-环境搭建
1、注册小程序:https://mp.weixin.qq.com2、获取开发者ID点击左边导航栏 开发-开发设置,可以查看AppID,开发时需要用到3、下载开发工具链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html打开后选择合适你电脑的工具下载,我的是Windows64...原创 2019-08-12 18:46:50 · 197 阅读 · 0 评论 -
小程序开发-导航栏
大部分小程序都是有底部导航栏的,具体怎么实现呢,需要在app.json中配置,下面上代码{"pages": ["pages/index/index","pages/yonge/index","pages/mine/mine"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "ligh...原创 2019-08-12 18:51:59 · 631 阅读 · 0 评论