Jone's Area

原创 Vue3+ NodeJS + Socket.io搭建聊天室

聊天室

原创 安卓跳转页面携带参数，返回页面携带参数

1

原创 Uniapp离线打包/ 自定义原生插件(Android)

Uniapp集成安卓离线打包，以及uni封装使用原生组件

原创 node服务端express-session使用以及无效问题

cookie和sessioncookie是服务端（服务器）发给客户端（网页）的会员卡，存在客户端，由客户端访问时携带给后端，可以储存信息，由于cookie在前端是完全暴露的，所以安全性特别低。于是乎就有了sessionsession是存在服务器内存中的数据，通过客服端携带的cookie对应可以找到session中存储的数据信息。如果客户端伪造了cookie则无法对应已存在的信息，安全性相对较高使用express-sessionnpm install express-session

原创 安卓启动第三方程序，及接收第三方程序参数

一、启动其他程序代码Intent intent = new Intent();intent.setClassName(packageName, activityName); // 指定应用包名和activity名intent.putExtra("stringData", "我传送的内容");intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);startActivity(intent); // 正常还要检测是否安装这个程序二、接收参数代码In.

转载 console的一些用法

大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢，下面我就介绍一些调试的入门技巧，让你爱上co...

原创 （ Hot）原生js实现拖拽交换位置

成品效果如下，demo地址 很简单，一个属性：draggable="true"，两个关键方法：dragend、dragenterdraggable：开启元素允许拖拽dragend：监听元素结束拖拽，此时可以做一些交换数据的逻辑(还有dragstart有需要自己上)dragenter：监听有元素拖拽进入到当前元素，此时更新要拖拽到的目标信息2、代码html:<div draggable="true" @dragend="dragend(num,index)" @drage

原创 zorro/antd select多选下拉框选中强制一行

效果：1、multiple类型的select官方提供了最大显示属性，超出部分显示+nzorro：[nzMaxTagCount]="1"antd：:maxTagCount="1"2、样式中强制一行显示选项zorro：nz-select{ ::ng-deep{ ul{ display: flex; flex-wrap: nowrap; overflow: hidden; float: left;

原创 Vue3项目创建

一、创建项目1）（荐）使用了官方推荐的构建工具Vite来构建项目#使用vite创建JoneWithVue3的项目npm init vite@latest JoneWithVue3 --template vue # npm 7+ ，要多加--npm init vite@latest JoneWithVue3 -- --template vue创建好了就直接运行cd JoneWithVue3 #转到刚刚新建的项目下npm install #安装基本配置npm run dev #开

原创 css渐变

1、linear-gradient 线性渐变background-image: linear-gradient(direction, colorOne, colorTwo, ...);direction：角度或者方向，90deg或to left这种，如下例子/* 从上到下，蓝色渐变到红色 */linear-gradient(blue, red); /* 渐变轴为45度，从蓝色渐变到红色 */linear-gradient(45deg, blue, red); /* 从右下到左上、

原创 （2022上新）安卓串口，一篇就够了

下载Google官方demo注意目录里的文件，主要分为图中三块android_serialport_api、libs、jni

原创 安卓Camera一代基于虹软人脸识别程序开发

如果不是CameraX不能使用，建议使用CameraX《基于CameraX实现人脸》不推荐Camera2，适配难！还巨麻烦，要写的代码配置太多了！一代我是直接新建的Class继承了Texture.SurfaceTextureListener，非Activity一、初始化public class FaceAnalyzeByOne implements TextureView.SurfaceTextureListener { private static final String TA

原创 安卓CameraX基于虹软人脸识别程序开发

安卓人脸识别，虹软人脸识别，CameraX人脸识别

原创 安卓使用虹软人脸（Camera\Camera2\CameraX）过程中的坑

Camera的坑mCamera.setDisplayOrientation(result)这个方法，直接闪退大概率因为result的值不是规范的90倍数人脸识别坑1、免费版SDK只需要Appid和SDK_Key付费版SDK激活才需要ActiveKey2、faceObj.detectFaces( nv21, preview.getWidth(), preview.getHeight(), faceObj.CP_PAF_NV21, faceInfoList);

原创 (Android)安卓form-data形式上传二进制(binary)文件Volley

本文使用的是Volley网络通讯框架背景：之前一直是做Web前端开发，现要写一个android程序，web端有现成的上传文件接口，是常用的new FormData()形式，新写的android也要一样使用，可是我用camer2拍照，最终得到的是nv21，束手无策中...网页multipart/form-data形式上传的二进制文件流，安卓咋整一、了解form-data的格式要求Content-Type:multipart/form-data; boundary=yourselfDefi

原创 angular 使用ngx-quill

Basenpm install [email protected] install [email protected]两个得一起装然后下载他的样式到本地， 到angular.json中引入一下1、Module not found: Error: Can't resolve 'quill' in...是因为没装quill2、quill-editor' is not a known element是因为没在module中引入@NgModule({ imports: [..

原创 事件冒泡和默认行为

事件冒泡，推荐示例好文总结：冒泡：子集和父级都有事件(比如click)，会依次由内到外冒泡响应，但是如果在子集写了①则会阻止所有父级事件的响应。默认行为：a标签的href，虽然给a写了click事件，但是在点击a标签的时候，会依次响应click事件，然后再响应默认行为，既跳转href的地址，另外还有touchmove事件，他的默认行为是触发滑动滚动，如果使用②则能阻止a标签默认跳转和touchmove的滚动行为①event.stopPropagation(); 仅阻止事件冒泡，...

原创 上传自定义使用npm组件包

cd 到组件目录npm init，会要求输入一些package.json的内容Press ^C at any time to quit.package name: (education) educationversion: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)将npm 源修改到ali仓库（好像是因为公司私库是云效（

原创 JSON.stringify后date类型字段差8小时

日常中有用到JSON.parse(JSON.stringify(Object))来深拷贝，但是如果该对象中包含Date类型的字段，那就要出乱子了，如下图，你可以在控制台敲个看看解决，网上解决方案大致都是这个其实对于现在三大框架类项目都有处理时间的库，所以关键点就是改写Date.prototype.toJSON方法，如我用了date-fns的format方法，如下Date.prototype.toJSON = function () { return format(this, 'YYYY..

原创 Mac Angular项目 Cordova 编译安卓包

cordova打包安卓app各种坑！

原创 JS快速构建1-100数组

寻常思路会写个for循环，一个个push进去，通俗易懂const arr=[];for (let i = 0; i < 100; i++) { arr.push(i + 1);}但...我不，我就是想玩儿，哎，就是玩儿一const arr= new Array(100).fill(0).map((item, index) => index + 1);二const arr=[...Array(100)].map((a,index)=>index+1)

原创 浅谈JS原生Sort实现业务中的排序

原生的sort，小白和老油条都可以来瞅瞅

原创 canvas 截取视频首帧作为封面

主要模拟上传视频的同时截取视频首帧作为视频的封面正常有如下控件上传文件 <input type="file" accept=".mp4,.3gp" onchange="fileChangeEvent(this)" />function fileChange(e){ const fileOrg=e.files[0]; // 获取到了数据源对象}/* vue或angular等可以直接获取一个event， * 行内是写的@change="fileChange($eve

原创 Git找回被删的分支

就算删了远程的也能找回只要你在本地有提交记录，那就都可以找回首先进入git bash命令行查看我们的git的操作日志git reflog效果如下，可以看到每次的操作记录因为图中的JoneDev分支被我删除了，所以我需要找回一下我想恢复到图中'HEAD@{4}'的commit事件中，所以执行如下命令git branch JoneDev HEAD@{4}完美恢复~...

原创 文字转语音，免费！！

主要利用百度的朗读，戳我l找到功能演示，在这里输入你要读的文字F12打开开发者调试工具，注意看控制台，切换到network，然后点击上面演示的‘播放’注意查看控制台的接口，有个aidemo的接口，点击一下，再切换到preview复制里面的值，很明显是base64字符串，复制后用工具把他转成文件，戳我大功告成！...

原创 angular父子组件的双向绑定参数

父组件中标签引用子组件html:<app-child [(childValue)]="parentValue"></app-child>注意：双向，传参写法就必须是‘[(xxxx)]’，“[]”表示是单向输入，子组件仅能接收，不可改变，“()”是单向输出，一般在里面监听子组件output的event。子组件js:export class Child { @Input() childValue: string; @Output() childVal

原创 vs code 设置快捷代码段、指令

选择针对哪种类型格式的文件我这里假设是tsTM_FILENAME 当前文件名TM_FILENAME_BASE 当前文件名，不带扩展名CURRENT_YEAR 当前年份CURRENT_YEAR_SHORT 当前年份，最后两位数字CURRENT_MONTH 当前月份数字形式，两位表示CURRENT_MONTH_NAME 当前月份英文形式，如 JulyCURRENT_MONTH_NAME_SHORT 当前月份英文缩写形式，如 JulCURRENT_DATE 当前日CURREN...

原创 @angular-devkit/build-angular/package.json问题

今天电脑重装手动下载安装了所有最新的开发环境，其中node.js是16.0.0+然后装angular也是最新最后到项目上，执行npm install，完了之后执行ng serve报错！没找到是吧？那我安装！npm install @angular-devkit/build-angular会安装失败！因为这玩意是属于angular/cli中的一个包解决方案：1、先把当前windows登录账户（C:\Users\Administrator）目录下删掉.npmrc文件.

原创 默认以管理员方式启动软件

原创 angular使用zorro图标错误

the icon xx does not exist or is not registered问题出在，我们使用了zorro的图标，但是运行时却找不到该图标的svg文件细看，运行时，默认会去项目的assets目录中寻找咨询，那肯定找不到，走到“/node_modules/@ant-design/icons-angular/src/inline-svg/”会发现都存在这儿，所以，运行时将这些资源导出到项目assets目录下在项目目录angular.json中找到“project——ap

原创 angular使用cropper裁剪图片

资源文件Github：Cropper.js官方主要只用到官方项目中的dist目录下的两个cropper.min.css和cropper.min.js文件效果：html: <input #imageInput accept=".jpg,.png,.jpeg" type="file" (change)="imageChangeEvent($event)" /> <div class="copperArea"> <div

原创 微信小程序canvas不跟随scrollView滚动

需求类似淘宝商品详情的长列表滚动，点击顶部需要滚动到指定位置So使用了ScrollView的属性“scroll-into-view”实现但是，会发现scrollView中使用的uchart（主要是canvas）不会跟随滚动，canvas就像使用了fixed布局一样微信很直接的说了canvas是原生组件，层级是最高的，无法嵌套在scroll-view、swiper、picker-view、movable-view解决方案：网上常说的:disable-scroll="true"、:.

原创 （有用）小程序开发工具当前系统代理不是安全代理，是否信任

三条路，注意以下所有的操作后都可以重启一下电脑和开发工具再试。1、spoolsv.exe程序占用（荐）到任务管理器选择“详细信息”中找到并结束“spoolsv.exe”进程，重启开发工具，立马就好！2、注册表按下windos+R建，输入“regedit”，然后找到“HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings”（这个地址可复制直达）中把里面所有的“Proxy”开头的项，如..

原创 vue进军angular留坑

v-if指令。else指向ng-template中的同id，else的内容必须是用ng-template标签包裹<div ngIf="Boolean; else idEle">true显示</div><ng-template #idEle> false显示</ng-template>@click方法<span (click)="removeIt()">移除</span>v-bind属性值<.

原创 angular使用zorro的图标

一、按需引入在app.module.ts中引入import { IconDefinition } from '@ant-design/icons-angular'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { InboxOutline, DeleteOutline, DeleteFill} from '@ant-design/icons-angular/icons';const icons: IconDefini

原创 反编译安卓aar包

下载工具下载最新的符合自己系统的解压之后包含jad.exe 和 Readme.txt文件cmd 当前目录，直接输入执行jadok安装完成将要反编译的aar包改成zip然后解压一下，得到如下，再将解压后里面的classes.jar改成图中一样的zip，再解压会得到一个新的com目录到这里再从cmd执行如下命令，就可以获得编译前的java文件了D:\路径xxx>jad -o -r -s java -d src com/**/*.class其中“com/**/*.c

原创 params传参在history情况下报错

主要改了两个文件build目录下的“webpack.prod.conf.js”中“output”节点增加一个“publicPath: '/',”output: { publicPath: '/',//在原来的基础上增加这个，下面的是你项目的默认配置 path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.as

原创 js随机6位字母

莽代码！function getRangeCode(len=6) { var orgStr='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let returnStr=""; for (var i = 0; i < len; i++) { returnStr+=orgStr.charAt(Math.floor((Math.random()*62))); } return returnStr}.

原创 原生JS列表自动滚动，带过渡效果

效果：两种方式，1）利用css的margin值来实现滚动，2）利用dom元素身上的scrollTop来实现html<div class="JTableBody noScrollBar" id="scrollContent"> <div class="oneBodyRow" id="firstLine">第1行</div> <div class="oneBodyRow">第2行</div> <div class="one

原创 echarts业务常用合集

echart问题合集1、饼图大小，线长 series: [{ type: 'pie', radius: [5, '60%'],//第一位是圆心大小，第二个是图大小 center: ['50%', '40%'],1是x轴距离，2是y轴，[50%，50%]则是正中心 labelLine:{ length:3,//第1段折线长 length2:5//第2段折线长