selfsummer的博客

原创 Nodejs前后端数据加密传输二种方案

项目场景：在前后端分离，前端使用Axios 或者是Ajax 来发送数据和接收数据,对应非程序人来说就没有有，应为他们也不懂，对应懂程序地来说 直接F12 查看浏览器地请求（Network）来查看请求数据，和返回数据，对应我们本身开发者来说无疑是在当中众多同行种裸奔问题描述： 为了防止数据传输过程中裸奔 进行数据加密传输技术栈（ES6+语法）NodeJS后端 Typescript Express前端 uni-app加密方法 使用原生JS数据加密（前后端统一方法进行转码解码）TS兼容JS语法

原创 async/await错误捕获

在ES7还没有出来的时候通常使用Promise.then 方法来接收 返回的值,Promise.then 有二个回调，第一个是 获取参数的回调，第二个是错误的回调 来捕获Promise.reject的错误Promise.catch 同样能够捕获Promise.reject 抛出的错误Promisefunction func(data) { return new Promise((resolve, reject) => { data ? resolve(data) : rej.

原创 迭代器（Iterator）和生成器 (Generator)

什么是迭代器？迭代器是一种特殊的对象 (迭代器是一个对象)是一些专门为迭代过程设计的的专有接口 所有迭代器都next()方法每一次调用都返回一个结果对象有二个属性值 一般都猜得到有 value 表示返回下一个的对像，另一个是doen 是一个布尔值 当没有数据值返回true迭代器还会返回内部指针，会用来指向集合中的位置，每一次调用next()方法时 都会返回下一个可用的值，如果最后一个值返回在调用next()方法那么返回对象属性done的值为true 属性vauel则包含最终返回的值，这个返回值不

原创 js注释规范

@param @argument 指定参数名和说明来描述一个函数参数 @returns 描述函数的返回值 @author 指示代码的作者 @deprecated 指示一个函数已经废弃，而且在将来的代码版本中将彻底删除。要避免使用这段代码 @see 创建一个HTML链接，指向指定类的描述 @version 指定发布版本 @requires 创建一个HTML链接，指向这个类所需的指定类 @throws @exception 描述函数可能抛出的异常的类型 {@link} 创建一个HTML链接，指.

原创 移动端跨端框架对比

移动端跨端框架对比以及技术选型，React-Native和Flutter开发对比uni-app对比Taro滴滴开源新框架 Hummer腾讯hippy

原创 sessionStorage 或 localStorage 数据加密(转码)存储，获取时解码返回存储的明文

知识点，atob，btoa，encodeURIComponent，decodeURIComponent因为直接用atob会导致汉字乱码，btoa它来解码的时候数据不对encodeURIComponent 先把数据转换一次，把汉字转译decodeURIComponent 把转译的数据转回来，就解决了atob 方法汉字乱码问题~~下面是代码~~const Session = { /** * 加密数据 * @param {any} data 转为base64数据

原创 JavaScript 文件下载，二进制下载，文本下载的几种方式

js 文件下载，js 下载二进制数据，js j解析二进制内容，URL.createObjectURL()

原创 react 手写树形渲染组件

树形组件 Tree.js。

原创 前端自动检查更新，适用Vue任何版本项目，包服务端更后客户端更新

vue检查更新，复制代码即用

原创 微信原生小程序直传上传阿里云OSS完整代码

微信小程序直传阿里云OSS,uniapp直传阿里云OSS

原创 HBuilderX上传代微信小程序码到微信报错 Error: common/vendor.js: file: common/vendor.js

之前看到 HBuilderX 有上传代码到微信后台，一直没有尝试，到今天想尝试一把。下载后，在HBuilderX 中 上传时选择这个密钥就行，还需要注意设置IP白名单。在微信小程序后台找到 开发管理 =》开发设置 下滑找打 【小程序代码上传】解决办法为 取消 ES6转ES5。请选择微信代码上传密钥文件。设置IP 白名单即可。

原创 浏览器断点调试说明

上图代码为给一个元素绑定点击事件，因为事件只有浏览器中才执行，当代码执行到59行时，由于DOM是浏览器支持的所有这里会跳到其他JS文件中执行，这里的执行代码过多，我看可以点击。作用：打断点了的地方（比如有是三个断点地方）就会 第一个断点处执行了，点击这个图标或者快捷键 就会到底二个断点处，以此类推。这里的执行顺序为 65到68再到95行，在执行 执行 image.onload 函数中的代码进行逐行执行。快捷键 （F10）或者是（Ctrl+'）快捷键 （F8）或者是（Ctrl+\）快捷键 （Ctrl+F8）

原创 JavaScript 队列 实现

在计算机科学中, 一个 队列(queue) 是一种特殊类型的抽象数据类型或集合。集合中的实体按顺序保存。队列基本操作有两种：入队和出队。从队列的后端位置添加实体，称为入队；从队列的前端位置移除实体，称为出队。队列中元素先进先出 FIFO (first in, first out)的示意。

原创 JavaScript 栈 的实现

以上两种操作可以简单概括为“后进先出(LIFO = last in, first out)”。"栈"这个名称,可类比于一组物体的堆叠(一摞书,一摞盘子之类的)。此外,应有一个 peek 操作用于访问栈当前顶端(末尾)的元素。栈的 push 和 pop 操作的示意。

原创 支付宝生活号开发

支付宝生活号开发支付宝H5授权登录H5支付宝支付uni-app支付宝支付

原创 uni-app vue3-cli vite代理跨域问题

uni-app vuecli 跨域，uni.request 跨域 uni-app cli 解决代理跨域uni-app vue3 cli vite 解决代理跨域

原创 给浏览器穿上衣服，防止裸奔

浏览器反调试，禁止打开控制台，js组合键

原创 uni-app App端优化

uni-app 启动优化uni-app 修改启动图

原创 uni-app Android studio 本地打包 【图文讲解】

需要修改文件列表app\src\main\res\values\strings.xml 修改app名称app\src\main\res\values\AndroidManifest.xml 修改以及 uni-app 开发者后台生成的simpleDemo 目录下的准备安卓开发环境 （这里忽略，之前有文章讲解）

原创 字节小程序填坑说明

微信小程序转字节小程序抖音小程序挂载小程序抖音小程序获取手机号码抖音小程序授权登录

原创 前端技术选型

前端技术选型要怎么选择?如何通过项目进行技术选型？如何通过运行时进行选型前端项目到底怎么选择框架

原创 Typescript本地浏览器调试

浏览器运行TS

原创 H5语音合成播放

speechSynthesis，SpeechSynthesis.paused，SpeechSynthesis.pending，SpeechSynthesis.speaking， speechSynthesis.getVoicesSpeechSynthesisUtterance，SpeechSynthesisUtterance.lang，SpeechSynthesisUtterance.rate，SpeechSynthesisUtterance.pitch，SpeechSynthesisUtterance

原创 npm ERR! 400 Bad Request - PUT xxx - “devDependencies“ dep “xx“ is not a valid dependency name

npm publish 出现错误 npm 400

原创 uni-app vue3+ts+vite开发小程序采坑说明

Vue3 + script setup + TS 编译小程序无JS源码BUG 正式环境无法访问接口 uni-app导入组件无效 uni-app cli 区分开发环境和生产环境

原创 setInterval 定时任务注意事项

使用场景 **在 大量setInterval使用或者大量页面轮询或者指定定时任务时，把握不了 setInterval 里面的细微时差就很容易导致 setInterval 导出跳，根本使用 clearInterval 停止不完当前时间setInterva **在前端做定时任务时，有二种方案可以选择第一种是使用原生JS 提供的 setInterval 或者 setTimeout第二种是使用第三方库 cron本文章主要讲的使用 setInterval 来做定时任务封装setInterval函数

原创 vue3自定义input组件注意事项

使用uniapp 封装input输入框注意事项使用 input 标签时数据双向绑定 一定要使用 :value=“modelValue” 不要使用 v-model=“modelValue”否者会出现，浏览器能够正常 但是手机都正常[JS Framework] Failed to execute the callback function: ReferenceError: Can’t find variable: modelValue __ERROR 自定义组件页面 m-input<inpu

原创 微信小程序map自定义cover-view气泡点击事件

原创 使用uniapp微信公众号和小程序踩坑全过程

uniapp公众号开发授权登录，分享，公众号使用地图导航安卓调用微信sdk正常，ios报invalid signature的错误uniapp 启动本地域名开发使用微信JSSDK 明明配置了权限 却不是能使用改权限 或者SDK初始化错误

原创 Android Studio 单独启动安卓模拟器教程

在新本的Android Studio安装后默认创建得文件夹只有 Android Studio的快捷方式注意老本版的Android Studio （2020版本之前 在开始菜单中找到 Android Studio 文件夹，里面有单独启动模拟器的快捷方式）每一次想打开 Android Studio 中的模拟器都要打开 Android Studio 把模拟器打开在关闭，非常麻烦在开发App时，无论是使用 Flutter 还是 React native，还是使用uni-app 开发跨端App时，总是需要真机运

原创 vue3笔记

vue3 中的reactive对比ref从定义的数据角度​ ref 定义的是基本数据类型（string,nunbmer）​ reactive 定义的为引用数据类型 （Araay,Object）从原理的角度​ ref 定义的数据是通过 Object.defineProperty的get 和set来实现响应数据​ reactive 是通过 Proxy 来实现数据响应，通过Reflect操作数据源对象内部使用角度​ ref定义数据操作需要使用 .value 读取数据时直接读取 不需要 .vual

原创 Object.defineProperty 以及 Proxy对比和基本语法 实干vue3数据响应

学习目标：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象symbol 是一种基本数据类型,Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法,每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符 系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文

原创 原生JS批量创建DOM性能对比，以及事件代理绑定绑定事件

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> 事件代理 </title> </head> <script type="text/html" id="enment"> <li> {{num}} <button>按钮</button> </li> </script&

原创 手把手使用 Egg+TypeScript+mongoDB快速实现增删改查

创建一个Egg的TS项目（Egg.js官方教程）安装MogoDB Egg 依赖npm install egg-mongoose -g也可以在某个文件中测试mongoDB链接import mongoose = require('mongoose');mongoose.connect('mongodb://127.0.0.1:27017/test');const con = mongoose.connection;con.on('error', console.error.bind(conso

原创 TS 装饰器

在typescript 中装饰器定义装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式装饰器 是一种特殊的生命 它能够附加类声明，方法，可以修改类的行为通俗的讲装饰器是一个方法 ，可以注入到类中，方法，属性参数上来扩展，方法，属性的功能常见的装饰器有 类装饰器 ， 方法装饰器，参数装饰器装饰器的写法 ： 普通装饰器 （无法传参） ， 装饰器工厂 （ 可以传参）一个普通装饰器（无法传递参数）// 定义一个logclass装饰器function .

原创 CSS 导航栏

<html> <style> ul, li { padding: 0; margin: 0; list-style: none; } .newnav { width: 100%; height: 63px; align-items: center; align-content: center; display: flex; border-bottom: 1px solid #ccc; } .navbo

原创 es6中的静态属性和方法

es6 中 class 带static 关键字是静态方法静态方法和对象无关，外部对象变量不能调用静态方法和属性外部可以通过类名来调用对象原型(就是类下面的方法)方法没有办法调用对象上面的静态方法对象属性都是不带关键字的 比如说static 关键字，带了的话就是静态方法 不带就是今天属性静态属性和对象属性不能互调，只能 静态属性调用静态数据，动态属性调用动态属性静态方法不能够访问类中的原型或对象的属性方法对象变量能够方法对象中得属性和原型 对象变量能够方法类的属性和方法 但对象变量不能.

原创 TS中的方法重载,函数重载,构造器重载

什么叫重载名字相同 ，参数类型不同方法重载方法重载在类中定义多个同名的方法，但是每一个同名的方法要求不同数据类型和不同参数下面来实现一个方法重载 以ArrayList 为例可以查看数据可以删除数据 删除可以通过id 或者对象删除可以获取数据class ArrayList{ // 此处为简写 constructor(public element: Array<object>){}/**不使用简写为 public element:Array<Object&g

原创 NodeJS开启多线程和集群

我们都知道 Node.js 是以单线程的模式运行的，但它使用的是事件驱动来处理并发，基于事件驱动、非阻塞I/O模型，充分利用操作系统提供的异步 I/O 进行多任务的执行，适合于 I/O 密集型的应用场景，因为异步，程序无需阻塞等待结果返回NodeJS多线程的出现不为了提高并发，而是为了充分提高CPU的利用率开多线程的几种方式使用Node自带的 child_process 模块child_process.fork(modulePath[, args][, options]) 衍生新的 Node.js

原创 从0到1发布npm包增删改

创建npm包npm包更新版本,npm ERR! code 129