- 博客(55)
- 收藏
- 关注
RSS订阅原创 VR视图插件Pannellum的简单使用总结
Pannellum是一个可以利用全景图片来生成VR场景展示的插件。可以在VR看房等场景中进行使用
2022-09-22 19:10:10
2655
1
原创 umijs中实现keep-alive功能
利用umi-plugin-keep-alive实现keep-alive效果，在h5页面中实现返回的时候不刷新返回页面的效果。
2022-08-30 10:41:03
3133
原创 currentColor的使用场景记录
效果常规<div class="test-box"> box-content <div class="test-item">item-1</div></div>.test-box { width: 200px; height: 200px; padding: 16px; color: orange; border: 1px solid orange;}.test-box .test-ite
2022-04-13 17:41:35
307
原创 angular中observers.length使用场景记录
场景模拟angular步骤条的时候，有一个场景是这样的，如果步骤条设置了监听事件，则悬浮鼠标样式为pointer，否则为default。部分代码import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';import { Step } from './steps.interfaces';@Component({ selector: 'yby-steps', templateUrl: './s
2022-04-13 14:48:15
768
原创 umijs项目-国际化语言配置
配置.umirc.tsimport { defineConfig } from 'umi';export default defineConfig({ // 启用layout配置 layout: { name: 'ulives-library-web', locale: true, // layout中启用locale配置 layout: 'side', }, // 路由配置 routes: [ {
2022-03-03 10:03:14
1892
原创 nvm安装使用及npm包安装失败问题记录
nvm-windows安装及使用github下载地址: nvm-windowsnvm 列出nvm的相关信息nvm arch 显示当前node运行环境是32位还是64位的nvm root <path> 设置存储不同node版本的位置nvm version nvm的版本nvm list 列出已安装的版本nvm install node 安装node最新版nvm install <version> 安装对应版本的nodenvm unin
2022-02-17 17:33:37
1257
1
原创 雪花飘落-2022虎年大吉
前言临近虎年春节，又缝下雪，简单弄个雪花飘落，全当玩耍效果图代码展示代码很简单，一些css，js，基本的html，加上图片就完事了html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
2022-01-29 15:27:49
112
原创 代码编辑器CodeMirror使用总结-配置理解说明
本文的选项是根据官网的配置环境进行的理解，有些选项没有使用到和没有理解的就没做说明，有理解不对的欢迎指出来，对没有说明的也欢迎用过的友友给出自己的理解常用选项配置value编辑器的初始值 - [string | CodeMirror.Doc]// formTextArea 方法初始化编辑器时，value被textarea的值覆盖掉了CodeMirror.fromTextArea(document.getElementById('textarea'), { value: 'function ab
2022-01-13 15:54:33
16203
1
原创 代码编辑器CodeMirror使用总结-基础用法
CodeMirror的版本: 5.65.0CodeMirror 是一个web端代码编辑器组件，提供了基本的编辑器功能。通过其提供的插件或者第三方依赖，可以实现既定语言的关键词高亮显示、自动完成提示、设定标记、错误提醒等功能。生成基本编辑器模式为javascript模式-可以高亮显示关键字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ
2022-01-10 14:59:38
5274
原创 WebSocket认识理解及简单使用
WebSocket认识WebSocket是一种全双工的通信协议，基于TCP协议，可以满足客户端和服务端双向通信需求。默认端口也是80和443，握手阶段采用http协议，与http有良好的兼容性。可以发送文本和二进制数据。无同源限制，客户端可以与任意服务器建立通信。WebSocket属性与方法// 利用 `WebSocket` 构造函数可以创建 指定url的 WebSocket 连接。const ws = new WebSocket('ws://ip:port/api_pat
2021-12-22 11:59:43
792
原创 angular双向绑定理解
双向绑定原理双向绑定将属性绑定与事件绑定结合在一起。Angular 的双向绑定语法是方括号和圆括号的组合 [()]。[] 进行属性绑定，() 进行事件绑定。名称规则为 [输入名] + Change。属性绑定(@Input-输入) - 设置特定的元素属性。事件绑定(@Output-输出) - 侦听元素更改事件。所以表单双向绑定中有 ngModel 和 ngModelChange，也可以自定义双向绑定属性。ngModel与表单元素进行双向绑定import { Component,
2021-12-17 16:26:19
1129
原创 angular内容投影理解
单内容投影 - 利用ng-content来实现<!-- 组件 - app-content-single --><div> <h2>标题</h2> <!-- 投影内容显示位置 --> <ng-content></ng-content></div><!-- 使用 --><app-content-single> <div>this is content&l
2021-12-16 14:32:22
1242
原创 angular 之 ng-template、ng-container、ng-content区别及使用
ng-template定义一个模板-默认不渲染列表渲染例子-效果图html<div *ngFor="let person of persons;"> <div>姓名: {{person.name}}</div> <!-- 通过 ngTemplateOutlet 指令输出template的内容 context 可以给模板传递数据, $implicit 为默认的数据 --> <!-- ng-container 进行占位且不渲染具体的标签
2021-12-16 10:52:01
2372
原创 angular父子组件通信
用到的apiInput - 子组件中定义可接受的属性，可以用来父组件给子组件传递数据Output - 子组件中定义输出的属性，该属性需要是 EventEmitter 的事件类型，用来通知父组件做出相应的操作EventEmitter - 用在带有 @Output 指令的组件中，以同步或异步方式发出自定义事件，并通过订阅实例来为这些事件注册处理器。简单的例子列表渲染子组件，点击子组件通知父组件进行操作person.tsexport interface Person { name: string
2021-12-15 19:08:00
386
原创 angular自定义form表单元素-checkList
实际使用form的时候，最外层的form的某个表单元素可能是个组合的，这种情况如果是可多场景复用的，最好封装一个表单元素。本文以组合复选框为例来说明下自定义表单元素的过程实现效果展示效果html<form nz-form [formGroup]="form"> <nz-form-item nz-row> <nz-form-label style="width: 120px;" nzRequired>{{ label }}</nz-form-l
2021-12-14 14:38:39
1461
原创 页面布局-左侧菜单右侧内容
左侧200px，右侧根据窗口自适应，右侧宽度小于800px的时候会出现滚动条要实现的效果html<div class="container"> <div class="inner left"> <div class="menu-item"> <div style="width: 300px;background: blue;">item</div> </div> <div class
2021-12-08 11:35:55
2442
原创 微信小程序-页面间通信
页面分类tabBar 页面 - app.json中配置的 tabBar 页面page 页面 - 其他的 非tabBar 页面，后面称为 page 页面跳转页面时进行数据传递目标页面为 tabBar 页面// 当前页面wx.reLaunch({ url: '/pages/tab1/index?id=123'})// tab1页面Page({ onLoad (option) { console.log(option.query); // { id: 123 } }})
2021-11-24 17:10:17
891
原创 微信小程序-路由跳转
当前测试的基础库版本为 2.17.0页面分类tabBar 页面 - app.json中配置的 tabBar 页面page 页面 - 其他的 非tabBar 页面，后面称为 page 页面页面栈// 微信小程序提供页面栈，用来保存页面。// 可以在页面中通过 getCurrentPages() 方法来获取页面栈的数据// 开发者工具的控制台也可以直接使用该方法// 页面栈最多十个页面，最后一个为当前页// 页面栈最少一个页面，只有当前页// 页面栈内按理说最多只会存在一个 tabBar
2021-11-24 16:03:40
187
原创 windows安装openssl
下载下载地址: http://slproweb.com/products/Win32OpenSSL.html根据提示进行安装点击脚本按照提示进行安装添加系统环境变量和path我的电脑-右键点击属性-选择高级系统设置// 新增系统变量// OPENSSL_HOME// openssl/bin的真实路径// 新增系统变量的path// %OPENSSL_HOME%检查是否安装成功openssl version 检查安装版本...
2021-11-18 19:08:36
881
原创 用ScreenToGif录屏并生成gif动图
下载ScreenToGif可以从本身电脑的电脑管家下载，也可以百度下载，该软件轻量，方便，可自行添加水印，免费启动软件打开录像机可以调整帧数和调整要录制的屏幕区域点击-录制点击-停止另存为有保存文件的地址和名称以及其他配置可以根据情况调整保存成功...
2021-11-02 11:06:06
420
原创 angular12简单搭建项目的过程记录
ng全局安装最新发布版本安装npm install -g @angular/cli指定版本安装npm install -g @angular/cli@8.3.29查看当前版本ng --version注意：需要根据ng版本选择安装对应的node版本// Angular CLI: 12.2.2// Node: 14.16.0项目创建ng new admin-angular --skipTests=true --style=scss创建的项目中跳过了单元测试的创建
2021-09-28 12:01:44
1146
原创 angular中自定义webpack配置
用到 @angular-builders/custom-webpack 依赖安装 custom-webpackangular - 8.2.14@angular-builders/custom-webpack - 8.4.1npm i -D @angular-builders/custom-webpack@8.4.1 或者 yarn add @angular-builders/custom-webpack@8.4.1 --dev调整angular.json{ // ...省略配置 "p
2021-08-11 19:24:44
1603
原创 angular中使用echarts地图
在angular中使用echart的时候，只需要在对应的组件生命周期中调用echart的api就可以了echart的初始化在component的ngOnInit事件中进行echarts的初始化，配置option，然后echarts图表就生成了app-base-chart组件html<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>scss// 基本的图表样式
2021-07-29 16:44:06
615
原创 apidoc使用简单总结及例子
当前调试都是在apidoc@0.28.1版本下执行的，有不对的地方欢迎指出安装apidocnpm i apidoc --save-dev配置apidoc可以有以下三种形式存放配置package.json{ "apidoc": { "name": "projectName", "url": "http://apiservice.com", "version": "1.0.0" // 此处省略更多apidoc配置 }}apidoc.json{
2021-07-29 10:57:55
1845
原创 angular中input、ngModelChange、valuesChange的监听情况
一个小小的输入框Input<div> testNameInput <input type="text" nz-input [(ngModel)]="testNameInput" (input)="testNameChange(testNameInput)"> testNameEventInput <input type="text" nz-input [(ngModel)]="testNameEventInput" (input)="testNameEvent
2021-07-23 10:11:57
2958
原创 本地调整angular8的devkit的逻辑以便于使用before方法进行api的mock
使用angular8进行项目开发，但是请求数据api的时候没找到官方给的使用webpack-devServer之before方法的api，现在找了个折中的办法，直接本地调整devkit的module配置，简单实现了。1.调整schema.json文件路径: node_modules/@angular-devkit/build-angular/src/dev-server/schema.json增加before，否则启动的时候会报错，不支持before选项{ "properties": {
2021-07-07 17:27:46
176
原创 git commit --amend 的使用记录
下面是我这里使用的两种情况在最近一次提交中追加修改把调整的文件内容加入到暂存区中 git add [filepath]使用 git commit --amend 进行提交，并进入提交信息描述编辑页面，不需要调整可以直接保存使用 git log 查看提交记录，已经合并成功，但是commitId已经改变修改最近一次提交的描述信息git commit --amend 会进入提交信息描述的编辑页面（vim的命令行模式）i进入编辑模式进行描述信息编辑描述信息编辑完成之后，E
2021-07-01 20:35:21
700
原创 用array的sort方法把已知的元素排列在数组的首位
sort排序会改变原数组的顺序，所以下面会用map进行数组浅拷贝const arr = ['a', 'f', '数字', 'd', 'man'];// 把数字排在第一位const arr_1 = arr.map(item => item).sort((a,b)=> a === '数字' ? -1 : 1);// 把数字排第一位，man排第二位const arr_2 = arr.map(item => item).sort((a,b)=> a==='数字' || a ==
2021-07-01 20:29:52
415
原创 构造函数定义的属性方法小结
说明构造函数构造器中的属性为每个构造实例单独所有，构造函数本身无法访问构造函数本身挂载的方法为构造函数本身所有，实例无法访问构造函数原型挂载的方法为构造实例共同所有demofunction MyList(){ // 此处的属性为每一个构造实例，单独所有。list1.obj list2.obj不相等，为两个存储地址 this.text = '123'; this.obj = { a: 1, b: 2 }}// 此处的方法只有构
2021-05-06 11:28:25
283
原创 css给前端页面添加水印效果体验
前言本次实现的时候只是为了体验下css的pointer-events的属性效果，所以就把水印做成了fixed的，体验上来说按照内容设定水印效果更佳，水印的个数和位置可以自己设定。还有一种感觉更好的方法是给水印元素添加水印背景图，然后repeat显示，这样不需要设定水印个数。水印元素需要根据内容而定。eg：我的例子中的class=shuiyin的水印元素。一、pointer-events该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target/* 除了指示该元素不是鼠标
2021-04-30 10:08:19
7678
3
原创 react-native-camera安装记录
一、安装依赖yarn add react-native-camera二、link到native// linkyarn react-native link react-native-camera三、build.gradle调整// android/app/build.gradle 添加如下android { defaultConfig { missingDimensionStrategy 'react-native-camera', 'general'
2021-04-22 14:42:36
250
原创 react-native-image-picker的使用简单总结
一、依赖安装依赖 react-native-camerayarn add react-native-image-pickerreact-native link react-native-image-picker二、调用相机import { launchCamera } from 'react-native-image-picker';launchCamera({ mediaType: 'photo', maxWidth: 1000,// 设置选择照片的大小，设置小的话会相应的进
2021-04-14 14:33:05
4676
6
原创 react-native初体验的总结
一、前提知识点RN中文网链接 https://www.react-native.cn/docs/getting-startedhtml、JavaScript、css基础es6+等新的概念react、redux相关知识如果需要用ts语法，还需要了解typescript相关知识点数据请求，官方中有推荐的，我这里选择axios二、开发前后相关的一些配置react-native相关知识点可以参考官方文档进行学习，总结了几点基本的RN开发需要的环境(mac,windows)，参考官方文档即可
2021-03-29 10:33:37
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人