- 博客(63)
- 收藏
- 关注
原创 微信小程序上传图片及文件(上传、下载、删除及预览)
微信小程序上传附件上传文件及图片 下载,预览、删除自定义封装组件 哪儿用哪儿调用即可wxml代码<!-- <view>上传文件(我是子组件)</view> --><view class="fileImgAll"> <view class="imginfo" style="border-bottom:{{attachmentImgFile&&attachmentImgFile.length!==0?'1px
2021-11-22 14:15:48
3973
原创 计算时间,显示具体时间
// 计算时间 timeFn = () => { const { item } = this.props; // const dateBegin = new Date(ti.replace(/-/g, "/"));// 将-转化为/,使用new Date const dateEnd = new Date(item.c_endtime);// 获取当前时间 const dateBegin = new Date(item.c_starttime);// 获取当前时间.
2021-06-15 12:53:55
535
1
原创 react显示文件内存大小
显示文件内存大小直接拿去用 // 显示文件内存大小设置 conver = (limit) => { let size = ""; if (limit < 0.1 * 1024) { // 如果小于0.1KB转化成B size = `${limit.toFixed(2)}B`; } else if (limit < 0.1 * 1024 * 1024) {// 如果小于0.1MB转化成KB size = `${(limit /
2021-06-02 17:02:06
466
原创 企业微信群聊消息优化版---三层嵌套(数组加对象)
会话管理 - 群聊消息 优化版/** * @文件描述 会话管理界面右侧 ---- 群聊 二级页面 * @创建人和时间 闫宵娜 - 2021-04-21 * @更新人和时间 闫宵娜 - 2021-05-6 * @param {Array} modalBox - 包装modul的开关按钮和父页面获取的item数据 * @param {Array} visible - 控制modul的打开关闭 * @param {Array} data - 获取父页面传过来的item数据 * @para
2021-06-02 15:55:06
271
1
原创 文件消息类型请求MP3,MP4,docx,zip等文件流(包括添加loading,文件大小展示)
/** * @文件描述 会话管理界面右侧 ---- 文件消息 * @创建人和时间 * @param {object} maxed - 视频音频跳转modul使用 * */import React, { PureComponent } from 'react';import { Row, Col, Card, Spin } from 'antd';import { YoutubeOutlined, SoundOutlined, FolderOpenOutlined, FileUnknown
2021-05-11 17:46:36
215
原创 员工管理二级会话页面原版
/** * @文件描述 会话记录页面 - Tab会话记录 * @创建人和时间 闫宵娜 - 2021-03-19 * @更新人和时间 闫宵娜 - 2021-03-22 * @param {object} list - 列表字段 * @param {object} params - 获取id字段 * * */import React, { PureComponent } from 'react';// import { Map, Marker } from 'react-amap';im
2021-05-07 16:08:54
118
原创 如何获取文件流 - 优化版
// 文件流的多此一举请求 componentDidMount() { const that = this; fetch('http://172.16.20.202/api/v1/wechat/content/13/media', { method: 'GET', responseType: 'blob', }) .then(res => { console.log(res,89); return re..
2021-05-07 08:48:33
352
原创 react如何请求amr文件流接口-优化版
import React, { PureComponent } from 'react';import BenzAMRRecorder from 'benz-amr-recorder';import { Col, Row } from 'antd';import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';import amrCeshi from "../../../../assets/audio/amrC
2021-05-06 19:01:24
513
原创 企业微信 群聊消息react如何做
/** * @文件描述 会话管理界面右侧 ---- 群聊 二级页面 * @创建人和时间 闫宵娜 - 2021-04-21 * @更新人和时间 闫宵娜 - 2021-03-22 * @param {Array} list - 列表字段 * */import React, { PureComponent } from 'react';import { Row, Col, Card, Modal } from 'antd';import { renderConI } from './ren.
2021-05-06 18:58:35
271
原创 react如何实现子传父
我们都知道react是单向传递,所以我们碰到父传子之后还需子传父这种情况该怎么办嘞?这个时候我们其实可以先让父级页面传一个函数给子级页面,同时父组件的函数里面再携带一个参数,然后子级页面接收这个函数,并且在此函数内将想传给父级页面的参数放进去让我们来看看代码是如何操作的我这个是想把子级页面的formRef传给父页面父组件父组件先定义个对象,为了把子组件的formRef给父组件;可以是对象,也可以是值,视情况而定@ getRightForm ----这就是要传给子组件的函数import C
2021-04-28 18:57:10
4977
原创 Form表单的Select搜索框如何获取接口数据并渲染页面
我做的这个是企业微信上的(聊天消息)类型搜索想要实现搜索内容并渲染页面,必须得给后端返回一个类型的字段,(你可以问一下你们后端要的是什么字段)我这里是msg_type这个字段当然渲染接口是已经取好了的,这个搜索框不用再重复取这个是子页面,用来渲染聊天的页面,@ item - 是通过父页面传过来的@ conntentType - 也是从父页面传过来的,就是为了左侧的是个接口的,也是为了方便区分,如果你的接口就一个的话,你可以把这个函数直接换成接口函数就好,并且传值给后端@
2021-04-25 20:04:54
1020
原创 企业微信通过传给后端id来获取页码pagenation
// 获取--群-----客户群-- && -- 内部群 --右侧export async function groupsTest(id,params) { const response = request(`${v1}/wechat/groups/${id}/contents?${stringify(params)}`); return checkCode(response)}models/wechat.jsimport { message } from 'antd';
2021-04-22 20:06:42
157
原创 企业微信会话点击每一个item,渲染聊天内容
首先父组件要获取聊天接口,通过id获取(先在servers/api/wechat.js组件中获取接口)import request from 'utils/request';import { stringify } from 'qs';import { wechatV1 as v1, checkCode } from '../config';// -------------------会话页面----------------------------------------------------
2021-04-22 19:55:49
494
原创 React中使用class组件做antd中的排版操作--编辑
import React, { PureComponent} from 'react';import { Typography } from 'antd';import { HighlightOutlined } from '@ant-design/icons';const { Paragraph } = Typography;export default class Right extends PureComponent { constructor(props){ super(props)
2021-04-15 18:23:12
440
原创 React的antd新增vudio操作
首先终端下载 yarn add video-react//引入import { Player } from 'video-react';import "../../../../../node_modules/video-react/dist/video-react.css";接下来 constructor(props) { super(props); this.state = { inputVideoUrl: 'https://media.w3.org/2010/0
2021-04-08 18:09:10
571
原创 react使用dva对数据做GET或POST请求
react使用dva对数据做GET或POST请求首先在组件页面 index.js 中添加componentDidMount(){const { dispatch } =this.props;dispatch({ //type里的menu是models/menus.js里面的命名空间namespace的menu type:'menu/fetchMenus', payload:{}, callback:res=>{ console.log(res,111);},});
2021-03-25 18:39:29
1050
原创 修改webpack的配置 ,vue的组件及使用,模板语法,指令事件对象,事件修饰符
0021. 修改webpack 的配置 官网打开 Vue CLI目录结构 src : 开发时编写代码的位置 main.js 入口文件App.vue 首屏加载的页面 如果需要修改webpack的配置,需要在项目根目录下创建 vue.config.js 具体的配置参考:https://cli.vuejs.org/zh/config/2. vue的组件 1. 组件是以 .vue 结尾的 2. 组件的结构: <template><template>
2020-11-14 19:27:57
245
原创 Vue的环境搭建及安装过程
0011.Vue框架创建项目:1. 先搭建webpack环境或在老项目中进行2. 整个项目都是vue,使用脚手架搭建开发环境安装脚手架: npm install -g @vue/cli初始化项目命令:vue create project步骤:第一步, vue create 后会出现 至少3个选项,( 第一个选项是默认安装vue2,babel,eslint第二个选项是默认安装 vue3,babel,eslint第三个选项 (Manually select features) 自
2020-11-11 20:03:04
1671
13
原创 微信小程序 ---基础小项目
index.wxml界面<!-- <text>首页</text><view>容器</view> --><!-- <navigator url="../news/news" open-type="navigate">跳转新闻页面</navigator> --><!-- 滚动 --><view class="navBar"> <scroll-view class="nav"
2020-09-27 21:53:49
199
原创 018Day----获取网易云音乐的数据
一,创建文件样式如下:走一步创建一步二,先写html界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--
2020-09-22 21:59:29
403
原创 三阶段--017Day 模块 Requirejs
一,主要内容什么是模块化为什么使用模块化模块嵌套Requirejs使用1.1 模块化产生模板就是实现特定功能的一组方法只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。1.2为什么使用模块化模块的优点• 可维护性。 因为模块是独立的,一个设计良好的模块会让外面的代码对自己的依赖越少越好,这样自己就可以独立去更新和改进。• 命名空间。 在 JavaScript 里面,如果一个变量在最顶级的函数之外声明,它就直接变成全局可用。因此,常常不小心出现命名冲突的情况。使用
2020-09-21 22:00:52
299
原创 三阶段07Day----音乐--视频/音频--api--js
.音乐–视频/音频音频视频api–js.音乐音频视频api–js <audio src='' autoplay controls></audio> <video ></video> 常用属性: autoplay 自动播放 controls 显示控件 currentTime 返回当前音频/视频的播放时间 duration 返回当前音频/视频的总时长 ended 返回当前音频/视频是否播放结束 paused 暂停状态 暂停 true
2020-09-08 20:26:47
107
原创 三阶段PHP:02Day-数据库操作-sql语句(插入、修改、删除、查询),前后端连接操作数据-原生form表单登录操作、jquery-ajax登录
回顾:PHP:客户端与服务器端项目流程:需求文档 (项目经理-产品经理) --(技术总监 )-- 交互设计师ue – ui设计师 – 前端工程师 --后端工程师 —测试人员-- 发布(后端人员) – 运维人员前端岗位:1.技术总监 2.产品经理 3.测试 4.讲师通信协议 + 域名 +端口号 (网页请求的端口号:80 8080)Php文件创建 命名变量 $变量名=‘’字符串 “”‘’ .预定义变量 $_GET[‘’] $_POST[]输出方式:echo 只能简单数据
2020-09-01 21:01:37
410
原创 三阶段-PHP:001Day-客户端、服务器、通信过程,PHP语法-文件创建、数据类型、数组、form表单默认事件 控件,数据库、连接数据库
三阶段内容网络请求 (前后端交互)小程序三阶段内容:php语言+mysqlAjax(重点 一周)移动端 (2天)H5 (存储 canvas 音频视频 )图表工具 echartsNode.jsEs6模块化小程序(5-6)软件:记事 Hubilder submit nodepad++ webstorm vscode第一节 网络知识1.1 客户端 服务器客户端:就是用户使用的平台 (手机 电脑 )服务端:为客户端提供服务的平台静态网站:数据不更改的 (数据)动态
2020-08-31 20:33:12
285
原创 020Day-算法、JSON、面向对象、通过构造函数创建对象
一、算法-二分搜索法二分搜索法:折半查找法。binarysearch。作用:做内容查找。功能类似于数组的实例方法:indexOf 时间复杂度 O(n)通常binarysearch用于查找数组元素的索引。找到返回索引,否则返回-1.时间复杂度:O(lg(2n))使用该算法的前提:数列必须是有序的。<script> function random(min, max) { return ~~(Math.random () * (max - min) + min);
2020-08-30 22:11:09
275
原创 019Day-正则、算法
一、 正则的分组正则的分组:1: 可以将正则的一部分或者是整体使用小括号括起来,作为一组存在。组可以作为一个整体去进行匹配,可以加数量词。2:正则的分组中可以有多个备选方案,使用| 代表或者的意思。3:正则中的分组,每一组都有一个组号,组号从1开始。组和组之间是可以嵌套的。组号是根据向右的小括号的顺序号来确定的。可以根据 RegExp 的静态变量 $+组号的方法来获得对应组匹配到的内容。一定要先调用test,然后再获得组对应的匹配的内容。分组最大的意义:根据分组来获得不同组号匹配的子串的内
2020-08-30 22:01:15
184
原创 018Day-函数对象的方法、void在超链接中的应用、引入正则表达式、split方法、replace方法、match方法、search方法
一、函数对象的方法重点:this:关键字:代表了当前对象。a:在事件使用。代表了当前正在触发执行事件函数的元素对象。b:全局定义的函数中,或者全局作用域下的this代表了当前window对象。如下的的代码中,两个对象的属性和功能都是不共享的,属性不共享是我们希望的,如果功能一样其实可以共享,实现内存的节约。如何让一个对象的功能共享给其他对象。实现的思路:让某一个对象的功能借用给其他的对象,通过隐式修改功能内的this 来实现方法的借用。函数对象的三个方法的介绍:call、apply、bin
2020-08-30 21:49:22
195
原创 017Day-服务器收到请求信息之后的处理、window对象属性、三级联动练习、页面请求到最终加载显示的过程说明、js的默认加载顺序、js的异步加载、js的懒加载、页面性能优化
一、服务器收到请求信息之后的处理<form action="4.ok.html"> 用户名:<input type="text" name="uname"> <br> 密码:<input type="password" name="pwd"> <br> 手机号:<input type="number" name="phone"> <br> <button>
2020-08-30 21:34:56
281
原创 016Day-移动端事件、BOM、windows对象常用方法、定时器方法、计时牌练习
一、移动端事件介绍<style> div{ width: 300px; height: 300px; background-color: red; } </style></head><body><div></div><script> var div = document.querySelecto
2020-08-30 21:09:15
241
原创 015Day-表单事件、焦点获得失去练习、单选-复选-下拉列表change事件、表单事件、键盘事件、滚动事件、文档事件、文档加载练习、事件委托
一、表单事件-focus-blur重点:表单事件:onfocus:表单元素获得焦点事件。当表单元素获得焦点的时候被触发。onblur:表单元素失去焦点事件。当表单元素失去焦点的时候被触发。注意:当当前的焦点从一个元素移动到另外一个元素,那么上一个获得焦点的元素会先触发失去焦点事件,然后下一个元素才触发获得焦点事件。用户名:<input type="text" id="ipt1"><span></span><br><input type
2020-08-30 20:12:53
313
原创 014Day-事件对象的捕获、事件对象的各种属性、取消默认右键菜单行为、自定义菜单练习、四方向移动小球练习、鼠标拖动元素练习、鼠标各种事件介绍
一、事件对象的捕获事件对象:event object当文档中触发了一个事件,那么会产生一个针对该事件的事件对象。该事件对象由js引擎底层产生。事件对象是一个非常重要的对象。事件对象中包含了事件的所有的信息。比如:鼠标点击的事件对象中,就包含了鼠标点击的坐标。按键事件对象中就保存了按键的名称,按键的键值,可以获得用户按下的是哪个按键。事件对象的捕获:对于谷歌火狐等浏览器,该事件对象是通过事件处理函数的实参传入的。直接给事件处理函数添加一个形参即可以捕获事件对象。IE低版本(IE8及其以前
2020-08-30 19:04:43
231
原创 021Day--构造函数,函数的原型对象,this的总结,原型练习,js的继承,原型链继承,组合继承,类型的静态方法
一、构造函数的执行过程构造函数的执行过程:通过代码调试:debug过程。断点调试:breakpointbug:代表了程序中的错误。原意是臭虫的意思。调试按钮:step:逐步执行代码,执行下一行代码。遇到方法调用,会进入方法内执行。step out:跳出当前方法,执行方法后的代码。step into:进入下一个方法执行。step over:逐步执行代码,执行下一行代码。遇到方法调用,不会进入执行。构造方法的执行过程:1:实参给形参赋值,js底层创建好空对象,并赋值给this。2:通过t
2020-08-28 14:12:57
215
原创 025Day--jQuery添加事件方法、动画函数-显示、隐藏、滑动、淡入淡出、stop、each
一、jQuery添加事件的方式-1重点:jQuery事件处理方式-1语法:jQuery对象.事件函数名([数据对象],callback);[数据对象]:可选择参数,是一个对象数据。可以在事件处理函数中访问该数据。补充:jQuery添加事件不会产生覆盖。<div>hello</div><script> var $div = $("div"); //没有数据实参的写法。 $div.click(function (e) {
2020-08-27 22:07:17
339
原创 024Day-jQuery方法-删除、克隆、祖先元素、后代元素、兄弟元素、结构过滤等方法
一、常用方法-scrollLeft()-scrollTop()<style> div{ width: 100px; height: 100px; border: solid 1px; overflow: scroll; } body{ height: 3000px; } </style>
2020-08-27 21:13:42
509
原创 022day-instanceo操作符,in关键字,作用域链,闭包,三种设计模式
一、instanceof 操作符instanceof:js的关键字。作用:用来判断一个对象是否是某种类型的实例。用来判断对象的原型链中是否包含了类型的原型对象。类型的原型对象是否在对象的原型链中。如果在原型链中返回true,否则返回false。结论:子类型对象永远是父类型的实例。<script> //父类型的构造函数。可以作为多个子类型的父类型 //比如工人,农民,学生都是人的子类型。 //Person类型是所有的子类型中的公共的部分提取出来形成的。
2020-08-26 21:43:31
252
原创 023Day jQuery介绍-$的使用-选择器介绍-常用方法
一、jQuery介绍jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。学习 jQuery就是学习 jQuery中常用的方法的使用。如果想使用jQuery,需要引入
2020-08-25 20:56:21
284
原创 设计模式-观察者设计模式练习
观察者设计模式:observer面对解决的是 1对多 的问题。也称为订阅发布模式。解决的问题:1:实现多个对象之间的松耦合。2:当某一个对象执行了某个操作,其他的多个对象都可以接收到通知。3:被通知接收信息的对象的数量是开放的。实例:HR 通知 若干个面试者的。 <script> //隶属于某个公司的hr 。 // 属性:公司的名称,保存应聘者的信息的容器 // 功能:添加观察者、删除观察者、通知观察者。 function HR(name){
2020-08-24 21:17:40
214
原创 js算法-快速排序
快速排序<script>function random(min,max){return ~~(random()*(max-min)+min );}function randomArray(len,min,max){ var arr=[]; for(var i=0; i<len; i++){ arr[i]=random(min,max); } return arr;} /** * 对指定的数组进行快速排序。 * @param ar
2020-08-23 18:08:31
180
原创 js算法-二分搜索法:折半查找法。binarysearch。
二分搜索法:折半查找法。binarysearch。作用:做内容查找。功能类似于数组的实例方法:indexOf 时间复杂度 O(n)通常binarysearch用于查找数组元素的索引。找到返回索引,否则返回-1.时间复杂度:O(lg(2n))使用该算法的前提:数列必须是有序的。<script>function random(min,max){ return ~~(Math.random()*(max-min)+min);}function randomArray(len,mi
2020-08-23 17:01:51
323
原创 js算法-排序-插入排序
插入排序<script>/*核心思想:将无序区的第一个元素,插入到有序区的合适的位置。*/function random(min,max){ ~~(Math random()*(max-min)+min);}function randomArray(len,min,max){ var arr=[]; for(var i=0; i<len; i++){ arr[i]=random(min,max);} return arr;}//定义方法,做插入排序func
2020-08-22 21:10:58
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人