- 博客(116)
- 收藏
- 关注
RSS订阅原创 三权分立学习
三权指的是配置、授权、审计。配置指对应用系统进行配置，使之能正常运行；授权指对使用应用系统的账号进行管理，在此过程中提高应用系统的安全等级；审计指对上述两项工作进行监督指导，及时上报危险的操作。
2024-03-12 15:57:49
541
原创 vscode中自定义vue模板
打开vscode后，在菜单栏File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)弹框中输入vue选中vue.json{ "vue-template": { "prefix": "vueTemp", "body": [ "<template>", " <div>",
2022-01-03 23:02:02
1047
1
原创 微前端框架single-spa入门
停更已一年，期间做了很多团队和项目管理的事情。回归初心~1. single-spa介绍描述: A javascript router for front-end microservices官网: https://single-spa.js.org/2. 安装及项目启动（1）安装及新建项目并启动npm i [email protected] -gcreate-single-spa完成后执行npm start，如下图即为成功（2）错误排查开始使用create-single
2021-11-14 22:32:41
1456
原创 Accessibility Handbook
文章目录1. Overall duty of all parties (for details please refer to the checklist)1. 1 Role: FE1.2 Role: BE1.3 Role: CE1.4 Role: QAChecklist2.1 Checkpoint: Language2.2 Checkpoint: Page Title2.3 Checkpoint: Landmark2.4 Checkpoint: Skip links2.5 Checkpoint: Brea
2020-06-17 19:16:38
854
原创 微信小程序——客服功能接入
官方文档：https://developers.weixin.qq.com/miniprogram/introduction/custom.html小程序有官方自带的客服功能。但是暂不支持使用该客服功能后对用户进行划分，从而一部分是普通客服，一部分为VIP服务，或者指定某个客服服务某些用户。代码部分<button type="default" open-type="contact"&...
2020-03-17 16:48:18
2564
2
原创 微信小程序——富文本
在微信小程序里是支持使用富文本的。使用rich-text组件，官方链接：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html测试范例：<rich-text nodes="<div class='richtest'><h1 class='h1'>你好!</h1>...
2020-03-16 16:16:59
868
原创 CSS之自定义原生checkbox样式
需求原生的checkbox的样式基本不能满足项目的要求。在项目上，常常不使用原生的checkbox，而做个假的，通过点击事件来判断是否选中。但往往，这并不是一个好的办法。如何解决？可以通过伪类来自定义checkbox的样式。原生checkbox样式：自定义checkbox样式：实现demo：https://jsfiddle.net/ken0qvj6/1/<div> ...
2020-03-11 16:21:52
1978
原创 CSS实现两行input框样式
需求实现如下这样的两行的input框样式。placeholder是两行的：在输入的时候也是两行：实现demo: https://jsfiddle.net/2L7adr86/不要想着把input变为两行，而是直接使用textarea。如果在mobile的时候需要显示成input一样的样式，可以将row的值改成1，并在样式上加上white-space: nowrap;<texta...
2020-03-09 19:05:58
5330
原创 CSS之:focus-within自身或某个后代focus的伪类
1. 什么是:focus-within？:focus-within 是一个CSS 伪类 ，表示一个元素或其后代元素获得焦点。在表单中，这个伪类非常有用。2. 兼容性需要注意的是，IE不支持。3. 例子看下面这个例子，在input被选中的时候，隐藏*，并把整行变为灰色。<form> <div class="field"> <span>...
2020-02-24 17:54:54
799
原创 iOS上陀螺仪失效问题
1. 功能在实现如下功能时，通常会用到基于HTML5陀螺仪的DeviceMotionEvent和DeviceOrientationEvent。摇一摇旋转手机看全景图像DeviceMotionEvent 主要属性：属性说明单位acceleration包含x,y,z方向上的加速度m/s^2accelerationIncludingGravity含x,y,...
2020-01-20 17:23:55
5833
2
原创 iOS 13下的设备判断
文章目录1. 通常的设备判断方式(1) 移动端还是PC(2) 安卓还是iOS(3) 是否用微信打开2. iOS 13的问题3. iOS 13下如何判断设备1. 通常的设备判断方式通常在进行如下判断时，常使用navigator.userAgent。(1) 移动端还是PCfunction isMobile(){ return /Mobile/i.test(navigator.userAge...
2019-11-29 18:33:59
1870
原创 List样式进阶——图片环绕、分栏多列布局
前言好几个月没有更新了，也侧面反应工作太忙。最近被各种List的样式折磨得不轻。看似样式简单，但是在实现时也遇到不少问题。这篇小文记录一下，也提供给遇到相似问题的同学。List图片环绕如图，实现这样一个效果：List环绕在图片周围List的点始终和段落对齐，且在内容的外部实现demo: https://jsfiddle.net/doyk9hx1/1/<div class...
2019-10-16 11:20:20
648
原创 webpack插件filemanager-webpack-plugin(管理打包后的文件路径)
前言项目中使用这个webpack插件是基于这样一个业务场景：传统CMS项目，路由不在前端，后端需要前端提供文件前端需要将打包好的html、js和css文件输出到指定的后端文件夹路径（避免需后端拷贝代码）filemanager-webpack-plugingithub: https://github.com/gregnb/filemanager-webpack-plugin安装np...
2019-07-15 15:09:08
15894
转载 Jade语法简报
文章目录前言Jade语法整理Doctype标签缩进属性前言开始使用Jade已经是4年前的事了，这期间也有使用，但比较少，使用的功能也比较简单。最近因项目需要，进行了Jade的温故。这篇文章整理的比较全面，所以进行了转载：https://www.jianshu.com/p/05ed25bfc2c5Jade语法整理Jade 是HTML预处理语言，省略了大量的尖括号，简洁，高效参考网址：Jad...
2019-07-03 11:53:18
431
原创 Js脚本实现数据插入MongoDB
文章目录前言编写脚本(1) 连接数据库(2) 插入数据执行脚本前言mongoDB是可以直接执行js脚本的。本文简单介绍如何使用js脚本批量将数据插入mongoDB中。关于mongoDB如何安装、启动以及下文中用到的可视化工具，请参考：https://blog.csdn.net/joyce_lcy/article/details/89334290编写脚本(1) 连接数据库创建一个js文件...
2019-05-10 14:31:40
6197
原创 MongoDB安装、启动、数据导入及可视化工具
文章目录前言什么是NoSQL?为什么使用NoSQL?MongoDB安装(1) 更新Homebrew的package(2) 安装MongoDB(3) 查看是否安装成功MongoDB启动(1) 启动mongodb(2) 连接mongodb serviceMongoDB可视化前言MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决...
2019-04-16 15:27:27
917
原创 CSS3自定义滚动条
(1) 属性[1]::-webkit-scrollbar 滚动条整体部分[2]::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。[3]::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）[4]::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分[5]::-we...
2019-03-07 17:57:02
687
原创 JS Date对象及日期处理的坑
文章目录1. Bug建议(1) 日期字符串用/的格式(2) 使用moment.js日期处理类库2. Date对象、时间字符串、时间戳1. Bug不要这样写new Date('2019-3-5')，会出bug。这个String格式为YYYY-M-D。在iOS手机和safari浏览器上，这个格式会报错，改为YYYY-MM-DD，即new Date('2019-03-05')是可以的，用/也是可以...
2019-03-06 18:45:22
2216
原创 Flex布局——flex-basis、flex-grow、flex-shrink
1. 前言Flex布局的基础以及其他属性，请参考上篇：https://blog.csdn.net/joyce_lcy/article/details/86544661。为什么会把这个部分抽出来单独作为一篇呢？因为这三个属性不太容易理解并且需要搭配在一起使用。2. 剩余空间剩余空间：是父容器在主轴上可以被项目瓜分的空间。以下图为例，黑色边框是父容器，ABC是项目。白色区域为剩余空间，300...
2019-02-20 18:11:29
1146
原创 Flex布局
文章目录1. 前言(1) Flex的兼容性(2) 为什么要使用Flex?1. 前言(1) Flex的兼容性作为一个经历过需要兼容IE6时代的前端，不需要用float后，使用position(absolute)和display(inline-block)已经很爽了。Flex其实已经出现很久了，但是原来因为浏览器的兼容问题，很多实际项目并不能使用。现在它兼容性已经能在项目中被接受了，如下：...
2019-01-18 18:22:40
607
原创 js时间YYYY-MM-DD转换为英文显示，其他日期处理函数
目标：将2019-1-2转换成Jan 01, 2019实现方式：let date = new Date('2019-1-2'); //Wed Jan 02 2019 00:00:00 GMT+0800 (China Standard Time)let chinaDate = date.toDateString(); //&amp;amp;amp;quot;Tue, 01 Jan 2019 16:00:00 GMT&amp;amp;amp;quot;//注...
2019-01-03 15:10:49
7702
原创 ES6——声明和赋值（ let 和 const、变量的解构赋值）
文章目录let 和 const1. let2. 块级作用域(1) 为什么需要块级作用域？(2) ES6 的块级作用域(3) 块级作用域与函数声明3. const 命令变量的解构赋值1. 数组的解构赋值(1) 默认值2. 对象的解构赋值3. 字符串的解构赋值4. 数值和布尔值的解构赋值5. 函数参数的解构赋值6. 圆括号问题7. 用途(1) 交换变量的值(2) 从函数返回多个值(3) 函数参数的定义...
2018-11-19 19:26:35
5980
1
原创 微信小程序——template模板和component组件实战
官方文档：template模板：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.htmlcomponent自定义组件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/template...
2018-11-02 18:05:13
1578
原创 微信小程序——页面路由
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.htmlAPI：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html###页面栈普通的网页在页面跳转时，页面会被刷新；而...
2018-10-29 14:08:11
557
原创 微信小程序——获取当前定位
需求：获得用户当前定位的城市信息。wx.getLocation获得经纬度官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html调用这个接口，需要用户授权，参见之前的博客：https://blog.csdn.net/joyce_lcy/article/details/83345...
2018-10-26 17:19:32
2633
3
原创 微信小程序——获取微信步数
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/werun/wx.getWeRunData.html可以通过wx.getWeRunData获取用户过去三十天的微信运动步数。前提使用这个接口有两个前提：需先调用wx.login接口进行登录，请参考之前的博客：https://blog.csdn.net/jo...
2018-10-26 11:31:21
13382
原创 微信小程序——获取用户信息
文章目录用户信息使用open-data展示微信开放的数据使用wx.getUserInfo保存用户信息用户信息首先明确一下用户信息有哪些：微信用户昵称、头像、性别、城市、省份、国家和语言等。【注意】上述信息都是微信资料中填写的，并不是用户的实时定位城市等。获取用户信息分为两种情况：在小程序中显示上述信息（使用open-data）获得上述信息存入数据库（使用wx.getUser...
2018-10-25 19:32:26
1993
原创 微信小程序——登录
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html登录步骤调用wx.log()获取临时登录凭证code向开发者服务器请求，发送code。开发者服务起通过appid、appsecret和code，得到Openid（用户唯一标识）和session_key（会话秘钥）...
2018-10-25 15:32:29
1460
原创 微信小程序——授权
文章目录授权状态发起授权流程小程序中不免许多地方需要用户授权，比如获取地理位置、微信步数、用户信息等等。但是授权是怎样的流程，在哪些情况下会弹框询问授权，授权状态分为哪几种，在下文中可以找到答案。这个是小程序官方关于授权部分的内容（个人觉得不是特别清晰，并没有说明如何操作）：https://developers.weixin.qq.com/miniprogram/dev/framework/...
2018-10-24 16:01:21
1664
原创 微信小程序——请求(安卓机所有请求都失败fail ssl hand shake error)
文章目录安卓机所有请求都失败图片名称缓存安卓机所有请求都失败不仅仅是像服务器请求都失败的问题，包括预加载图片也会报这样的错 fail ssl hand shake error 。这个是由于服务器的中间证书（或是中级证书，intermediate certificate）的问题。可参考：https://sg.godaddy.com/zh/help/what-is-an-intermedi...
2018-10-22 11:44:58
3646
原创 微信小程序——小实现(禁止页面滚动、长按复制、长按识别二维码)
###1. 禁止页面滚动对于小程序某些一屏的页面，特别是全屏的swiper，并不希望页面在竖直方向上可以滚动。实现方式：在需要禁止滚动页面的json中加入："disableScroll": true注意：只在页面配置中有效，无法再app.json中设置该项参考：https://developers.weixin.qq.com/miniprogram/dev/framework/con...
2018-10-17 18:21:17
9250
原创 年月日三级联动js插件
推荐一个年月日三级联动的js插件：http://www.jq22.com/jquery-info5982特别是在mobile端，适合原生的select框。/* 年月日联动下拉选择JS封装类 Ver 1.0 版 制作时间:2013-3-12 更新时间:2013-3-12 应用说明:页面包含<script type="text/javascript" src="YMDClas...
2018-10-17 16:58:33
1488
原创 微信小程序使用sass——工程构建（vscode）和微信开发者工具
微信小程序官方提供了比较完整的开发文档，也提供了官方的开发工具。但是本人还是习惯于用vscode，同时，可以安装vscode中的插件来辅助开发。1. vsode插件(1) Live Sass Compile——实时将sass打包为wxsswxss的语法是原生的css，非常不方便，这个插件可以将sass实时打包为css，同样也也可以让后缀名为wxss。习惯于用less的，可以使用另一个插件：E...
2018-10-17 15:54:41
19274
3
原创 Vue工程中引入公共方法——动态设置背景图片实例
在一个Vue的文件中可以将html、css、js都写到一起，更方便的去做模块化。有时，在不同的模块中会使用相同的方法，所以需要在Vue的工程中引入公共方法。本文将以动态设置背景图片作为实例，进行讲解。1. 引入公共方法(1) 新建公共方法js(2) main.js中引入2. 使用实例1. 引入公共方法(1) 新建公共方法js(2) main.js中...
2018-09-04 16:03:10
2010
原创 Google验证码reCAPTCHA接入Web
1. 介绍reCAPTCHA是google旗下的验证码服务（免费的），当然要保证网络能打开google才行，所以常用于国外的网站。 官网：https://developers.google.com/recaptcha/2. 接入(1) site key申请Site Key: http://www.google.com/recaptcha/admin在本地开发时，可以使用此si...
2018-08-23 14:42:38
33743
9
原创 安装nvm管理node版本
介绍在mac上安装nvm来管理node版本，windows请参考其他教程。1. 前提本文主要介绍使用homebrew安装nvm。请确保已经安装了brew。可以通过brew -v查询是否已经安装。 localhost:~ joyce.liu$ brew -v Homebrew 1.7.12. 安装nvmbrew install nvm安装完后，为了...
2018-08-13 17:06:38
4037
原创 H5的视频解决方案(2) —— chrome自动播放问题
2. chrome自动播放问题(1) 背景和问题比较明确的是在mobile中，iOS不允许自动播放，但是安卓是可以的。为了兼容性，一般采用的是点击播放按钮播放，或者首次触屏后开始播放。然而最近遇到的问题：在chrome浏览器中页面加载完成之后播放视频会失败，并且出现如下报错： (2) chrome条款上图中的链接为：https://developers.google....
2018-08-08 15:00:57
13251
原创 H5的视频解决方案(3)——第三方视频接入(腾讯、youtube)
3. 腾讯视频接入4. YouTube视频接入(1) 使用iframe嵌入(2) 使用YouTbue API3. 腾讯视频接入通过iframe将视频插入。地址为：https://v.qq.com/iframe/player.html?vid={视频id}。如何获取id？例如这样一个腾讯视频的播放页面：https://v.qq.com/x/page...
2018-08-07 17:25:32
21012
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人