兵荒码乱-优快云博客

原创 IM即时通讯H5端，MQTT

做IM即时通讯的成果：成功实现了H5和APP之间的通信，将H5嵌入到微信小程序，并且开发了SDK使得小程序也能实时得到消息的数量和消息内容。遇到的难点（1）消息的状态、数量、内容，需要实时获取，展示在小程序端和H5端（2）尽可能实施缓存来缓解请求压力，mqtt在小程序联调时会产生些问题（3）聊天详情中的所有消息会经常用到循环来改变消息的状态，要解开耦合，并且要优化算法进行循环。（4）储存问题，H5不同于后端语言，不同于原生安卓和IOS，他们有自己的储存空间并可操作。（5）假如每个消息都有自己的

2022-01-14 10:26:23 3211

原创 uniapp中v-mode 的渲染问题

以下是提现金额时的正则v-mode在 uniapp中的赋值导致渲染问题，具体发生在保留2位小数时发生这边直接用setTimeout延时赋值解决。这边也能用自定义事件的方式解决就不给出代码了changeIn(event) { let mn = event.detail.value mn = mn.replace(/[^\d\.]/g, ''); //清除“数字”和“.”以外的字符 mn = mn.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的 mn = mn.r

2021-11-17 17:43:44 697

翻译浮点数和点运算符（对象方法）

1toString() //报错，语法错误1.toString() //报错，JS引擎无法确定这里的`.`是什么意思，是点运算符（对象方法）还是浮点数？1..toString() //成功，运算结果"1" 解析: 第二个点被视为点运算符，前面的是浮点数。1.0.toString() //成功，运算结果"1" 解析: 第二个点被视为点运算符，前面的是浮点数。1 .toString() //成功，运算结果"1" 解析: 用空格和后面的.toString()隔开, 把前面的当成运

2021-10-26 09:59:14 230

原创 npm install 实现成功安装node_modules

一、不管如何先清除cache清除方式：npm cache verify 或者 npm cache -f clean二、清除node_modules中的安装包清除方式：可以直接删除文件夹或者 linux下执行命令行：rm -rf node_modules，window下执行：先装rimraf，再删除npm install rimraf -grimraf node_modules三、以上2个步骤执行后，还没装成功的话。本人的命令行是提示：是因为node-sass没有成功安装，所以执行

2021-04-16 10:45:30 2030

原创 react-transition-group

**1、 CSSTransition实现单一组件动画**CSSTransition单独使用时，有两个比较重要的属性。in和classNames。classNames属性： CSSTransition子组件动态类选择器名前缀。in属性：当in为true时，CSSTransition的子组件会先添加classNames−enter类，下一个tick会添加{classNames}-enter类，下一个tick会添加classNames−enter类，下一个tick会添加{classNames}-en

2021-01-11 15:20:09 227

原创 router.beforeEach()

router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。1、在route配置中：meta:{requireAuth:true//true为这个页面需要登录权限 }2、然后在main.js中：router.beforeEach((to,from,next)=>{<br>　　//从cookie中取值并给vux中的token赋值 store.commit('setToken',

2021-01-08 17:23:16 1777

原创 vim的退出保存等命令

在 Linux 中使用 vim 时，输入 vim xxx.file 输入好文件内容之后，怎么保存呢？:w 保存但不退出:wq 保存并退出:q 退出:q! 强制退出，不保存:e! 放弃所有修改，从上次保存文件开始再编辑命令历史按 ESC，左下角就可以进行输入以上命令...

2021-01-08 11:47:14 132

原创服务器报错502，pm2 无法重启node进程的原因

查了很多资料，有配置pm2的config文件的，也有猜测是内存溢出用命令行的。内存上限重启命令：pm2 start app.js --max-memory-restart 200M另外猜测原因可能是mySql断连了，而却没有在node中抛出错误；我就在执行sql语句的统一函数中抛出错误：目前解决了pm2无法自动重启node进程的问题...

2020-12-24 10:31:47 1385 1

原创 Sass和Less的比较

Sass和Less的比较不同之处1、Less环境较Sass简单Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。2、Less使用较Sass简单LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。只要你了解 C

2020-11-27 17:12:25 915

原创 sublime text3编译LESS文件

1、安装Sublime 插件（1）安装LESS插件：因为Sublime不支持Less语法高亮，所以，先安装这个插件，方法： ctrl+shift+p>install Package>输入less按Enter（2）安装LESS2CSS插件：这个插件的作用是当保存less文件的时候自动生成同名的css文件；当保存less文件的时候提示编译错误信息；批量编译项目目录下的所有less文件为css文件。安装方法：ctrl+shift+p>install Package>输入les

2020-11-27 14:51:35 219

原创微信小程序瀑布流自定义组件，2种写法

第一种：递归方式，每次添加一个内容，就进行比较计算；第二种：计算图片高度方式，一次性先计算完，然后在显示注意滚动触底每次加载一页数据不用合并原先的数据。直接传递新加载数据就好图示：组件代码wxml：<scroll-view scroll-y="{{true}}" lower-threshold="{{200}}"> <div class="activity_recommend"> <div class="recommend_content cl

2020-09-29 15:36:55 1330 1

原创最简单的下雪效果

就用下面2张图合成动态下雪效果执行下面代码<!doctype html><html><head> <meta charset="UTF-8"> <title>沐光之辰</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <style> .con { overflow: hidden;

2020-09-09 18:24:00 202

原创小程序半自定义时间选择组件

用了小程序picker-view示例改成的组件component文件：wxml：<view>  <view class="mask" bindtap='formatHide' wx:if="{{showModalTime}}"></view>

2020-09-03 16:53:21 218

转载 js数组篇2——待续

一张图看懂JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some原文地址：一张图看懂JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some在《JavaScript高级程序设计》中，分门别类介绍了非常多数组方法，其中迭代方法里面有6种，这6种方法在实际项目有着非常广泛的作用。其中本人最爱用forEach和map，好用又高效，不用什么都是for循环大法。但是初学的时候往往觉得头大，这些方法都很像，

2020-08-26 11:00:02 150

原创微信小程序倒计时

格式为：天、小时、分、秒data{ timer: 86400,// 模拟时间(秒)},// 24小时倒计时加载页面时时间戳由从服务器获取 timefilter(time) { return time = (time / 10) < 1 ? "0" + time : time }, timestampToTime() { let s = this.data.timer - 1 if (timers) clearInterval(timers); l

2020-07-29 14:11:38 163

原创微信小程序分享海报

wxml文件<view class="mask" bindtap='formatHide' wx:if="{{showPostersStatus}}"></view><view class="share_con" animation="{{animationData}}" wx:.

2020-06-24 16:14:52 274

原创 js编写深度优先遍历和广度优先遍历

1.深度优先就是自上而下的遍历搜索2.广度优先是逐层遍历两者的区别对于算法来说无非就是时间换空间空间换时间深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点深度优先采用的是堆栈的形式, 即先进后出广度优先则采用的是队列的形式, 即先进先出具体代码const data = [ { name: 'a', children: [

2020-05-29 15:26:14 336

原创小程序canvas绘制文字换行加省略号（简单版和复杂版）

小程序canvas的文字换行、加省略（简易版本） /** * 文字截取换行、加省略号 * ctx：canvasContext * text：要输入的文字 * y：绘制的y坐标 * lw：最大限制长度 * lh：文本行高 * lineNum：第几行 * ellipsis：是否加省略号 */ fillTextLineBreak(ctx, text, y, lw, lh, lineNum, ellipsis) { let i = 0;

2020-05-21 16:01:53 782

原创 js方法封装记录

一、图片预加载封装方法var obj = { files : [], progress : function(precent, currentImg) { // 具体代码 - HTML5学堂 }, complete : function() { // 具体代码 - HTML5学堂 }}unction filePreLoa...

2019-11-19 11:26:22 194

原创 redux中 props更新没有执行render的问题

前些天写了个效果，点击“展开”的，内容展开的效果。结果props值在action文件中执行确实已经改变，Reducer文件中的数据也发生改变，然而render生命周期并没有执行。这个问题在以前写React-Native中也出现过，也解决了。这边重新记录一下。这是效果图和数据：一开始我觉得应该是因为，redux的数据在虚拟前后比较的时候默认觉得没有改变数据状态。后来想到深复制和浅复制问题，...

2019-09-17 18:29:33 1157

原创 react history

GitHub上history库的翻译：安装npm install --save history类型import { createBrowserHistory, createHashHistory, createMemoryHistory } from ‘history’存在三类history，分别时browser，hash，与 memory。history包提供每种history...

2019-09-05 18:13:15 2506

原创 react-router-redux 和 connected-react-router 绑定路由

react-router-reduximport React from "react";import ReactDOM from "react-dom";import { createStore, combineReducers, applyMiddleware } from "redux";import { Provider } from "react-redux";import ...

2019-08-26 17:21:33 4017

原创 JavaScript之AST抽象语法树

在github上看到一个相关题目：a.b.c.d和a[‘b’][‘c’][‘d’]，哪个性能更高别看这题，题目上每个字都能看懂，但是里面涉及到的知识，暗藏杀鸡这题要往深处走，会涉及ast抽象语法树、编译原理、v8内核对原生js实现问题然后用ast的方式来解构代码：对应于a.b.c.d： { "type": "Program", "start": 0,...

2019-07-25 16:28:34 978

原创 js数组篇——待续

有以下 3 个判断数组的方法，分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()1：Object.prototype.toString.call() 常用于判断浏览器内置对象时。封装：function getClass (a) { const str = Object.protot...

2019-07-19 14:19:29 413 1

原创 js使用遇到过的几个小技巧

1、过滤唯一值Set类型是在ES6中新增的，它类似于数组，但是成员的值都是唯一的，没有重复的值。结合扩展运算符（…）我们可以创建一个新的数组，达到过滤原数组重复值的功能。这个技巧的适用范围是数组中的数值的类型为：undefined， null， boolean， string， numberconst array = [1, 2, 3, 3, 5, 5, 1];const uniqueArr...

2019-07-15 11:00:18 177

原创 js常见的几种简单算法

// javaScript 的二分查找算法 var Arr = [3, 5, 6, 7, 9, 12, 15]; function binary(find, arr, low, high) { if (low <= high) { if (arr[low] == find) { return low; ...

2019-06-20 17:55:55 1826 1

原创 webpack.config

webpack一些配置，要说的大部分在代码注释里了// options: {// presets: [['@babel/preset-env',{// // targets: {// // chrome: "67",// // },// useBuiltIns: 'usage' // 可以按需打包编译Es6的代码，使得打包出来...

2019-06-12 16:18:08 394

原创 react在移动端的自适应布局

1、移动端基本可以无阻碍的进行flex的弹性布局，这边对flex就不进行深究2、可以进行依据窗口进行vw、vh、vmin、vmax单位的布局（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。具体描述如下：vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh...

2019-05-30 16:45:13 8291

原创 reactjs开发使用sublime时需要的插件

讲个笑话先：某男是程序员，每天半夜三更才回家。某女抱怨：“你就不能提早点回家么？”某男：“好，一定。”于是下次某男一直写代码到天亮提着油条豆浆才回家。好吧，不好笑。正文开始：开发reactjs开发使用sublime时，想要代码高亮显示，需要安装babel-sublime插件，在Preferences中的Package Control菜单搜索Install Package安装插件。1、babe...

2019-05-25 10:23:31 186

原创入门理解redux-thunk和redux-saga

**如标题所示，接下来要说的就是redux的中间件**那么中间件是什么？首先先说明redux中的 action 和 store 之间是通过 dispatch 这个方法来建立桥梁的，那么中间件要做的就在这个桥梁上搞事情。为什么要在这儿呢？因为所有的用户操作发起的action都是要通过 dispatch 才能到达 store ，相当于千军万马过独木桥，那么我只要在这桥上搞个监控器（如redux-...

2019-05-17 18:28:44 1447

原创 js原型和原型链理解

补充原型知识点：以这个代码为例延伸知识点：function Person() {}Person.prototype.name = ‘Zaxlct’;Person.prototype.age = 28;Person.prototype.job = ‘Software Engineer’;Person.prototype.sayName = function() {alert(thi...

2019-05-10 09:58:43 188

原创 git基础命令（分布式版本控制系统）

打开、提交文件1、$ mkdir 文件夹名。代码说明：mkdir表示的创建一个文件夹。如果我们希望，在当前的路径“/u/Git_test h5course”下，创建一个名为“h5”的文件夹，那么输入如下命令：“$ mkdir h5”2、cd 路径。代码说明：cd表示的是路径，通过cd 路径，进行当前路径的变化。比如当我创建git文件夹之后，希望能够进入这个文件夹进行操作，就输入“$ cd gi...

2019-05-10 09:48:21 250 1

翻译 JQ的异步——deferred

一、什么是deferred对象简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是&quot;延迟&quot;，所以deferred对象的含义就是&quot;延迟&quot;到未来某个点再执行。deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作----不管是ajax操作还是本地操作，也不管是异步操作还是同步操作----都可以使用d...

2018-12-14 11:19:29 1080

转载 Redux入门理解

Redux基本概念和API1、StoreStore就是保存数据的地方，你可以把它看成一个容器。整个应用智能有一个Store。Redux提供createStore这个函数，用来生成Storeimport { createStore } from 'redux';const store = createStore(fn);上面代码中，createStore函数接受另一个函数作为参数，返...

2018-12-04 14:12:57 163

原创原生AJAX写法

距离写原生ajax——one year那就写一下打个卡var request = new XMLHttpRequest();request.open('POST', '/my/url', true);request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');r...

2018-10-09 17:25:32 1508 4

转载 JavaScript内存泄漏如何避

简介内存泄漏是每个开发者最终都要面对的问题，它是许多问题的根源：反应迟缓，崩溃，高延迟，以及其他应用问题。什么是内存泄漏？本质上，内存泄漏可以定义为：应用程序不再需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。编程语言管理内存的方式各不相同。只有开发者最清楚哪些内存不需要了，操作系统可以回收。一些编程语言提供了语言特性，可以帮助开发者做此类事情。另一些则寄希望于开发者...

2018-10-09 17:03:32 133

沐光之辰