微信网页开发
移动端调试
VConsole:https://github.com/Tencent/vConsole
网页仅在微信中打开
通过 userAgent 判断是否是微信环境
12345678910111213141516171819// 1、function getIsWxClient() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } return false;}// 2、var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;var isAndroid = ua.indexOf('android') != -1;var isIos = ...
CentOS安装、配置、自启nginx
Nginx 简介
Nginx (engine x) 是一个高性能的 HTTP 和反向代理 web 服务器 ,同时也提供了 IMAP/POP3/SMTP 服务。Nginx 是由伊戈尔·赛索耶夫为俄罗斯访问量第二的 Rambler.ru 站点(俄文:Рамблер)开发的,公开版本 1.19.6 发布于 2020 年 12 月 15 日。
其将源代码以类 BSD 许可证的形式发布,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2022 年 01 月 25 日,nginx 1.21.6 发布。
Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在 BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上 nginx 的并发能力在同类型的网页服务器中表现较好。
Nginx 下载
Nginx 官网:http://nginx.org/en/download.html
命令行下载
123# 进入www目录 根据个人习惯存放位置cd /usr/local/www/wget http://ng ...
移动端强制横屏
需求
在竖屏 条件 下默认是 横屏显示的。
即使用户 开了 横屏模式,界面的 横屏模式 自动转换 过来。
实现
1. meta 标签
这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度,这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面。
目的是 让界面显示 更加适应 手机屏幕。
1<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2. CSS
关于横屏的 样式 就主要是 利用 transform 的 旋转 和 平移 来改变 竖屏样式。
对于横屏的 样式 就保持不变
对于 body 在 屏幕转换 时,宽高的 改变,就用 JS 来控制
123456789101112131415161718192021222324252627282930313233343536* ...
部署hexo到GitHub
部署hexo到GitHub
1. GitHub创建个人仓库
首先,你先要有一个GitHub账户
注册完登录后,在GitHub.com中看到一个New repository,新建仓库
创建一个和你用户名相同的仓库,后面加.github.io只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名。我这里是已经建过了
点击create repository
2. 生成SSH添加到GitHub
回到你的git bash中
12git config --global user.name "YourName"git config --global user.email "YourEmail"
这里的YourName输入你的GitHub用户名,YourEmail输入你的GitHub邮箱。这样GitHub才能知道你是不是对应它的账户
输入一下两条命令,检查一下你的用户名和邮箱是否正确
12git config user.namegit config user.email
...
安装宝塔面板
Centos安装命令:
1yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
Ubuntu/Deepin安装命令:
1wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
Debian安装命令:
1wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh
Fedora安装命令:
1wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh
Linux面板7.1.0升级命令:
1curl http: ...
vue中使用Lottie动画
什么是Lottie ?
Lottie是一个iOS,Android和React Native库,可以实时渲染After Effects动画,允许应用程序像使用静态图像(在这里动画被转化成json文件)一样轻松使用动画。网上也有丰富的动画资源可供我们选择
Lottiefile
Lottie介绍
灵活的After Effects功能
我们目前支持实体,形状图层,蒙版,alpha遮罩,修剪路径和虚线图案。我们将定期添加新功能。
以你喜欢的方式操作动画
可以前进,后退,并且最重要的是你可以对动画进行编程以响应任何交互。
文件小
文件非常小,通常可以以json文件的形式存在,可以通过json api来加载。
如何使用Lottie
安装vue-lottie包
1npm install --save vue-lottie
在main.js引入并全局注册组件
12import lottie from 'vue-lottie';Vue.component('lottie', lottie)
或者 在需要的组件里面引入并注册组件
12345import Lot ...
vue解决跨域问题
vue解决跨域问题
跨域问题
如何解决
12345678910111213141516171819module.exports = { devServer: { proxy: { // 代理 "/api": { target: 'https://api.XXX.com', changeOrigin: true, // 是否为HTTPS协议:true&false secure: true, //路由重写 转发规则 pathRewrite: { "^/api": "" } } } }}
HTML使用lottie
引入Lottie 文件
1https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js
设置dom节点
1<div id="svgContainer" style="width: 100%;height: 100%;"></div>
获取节点
1var svgContainer=document.getElementById('svgContainer');
初始化 lottie
1234567891011var animItem=lottie.loadAnimation({ container: svgContainer, // 包含动画的dom元素 loop: true,// 循环播放 autoplay: false, // 自动播放 // renderer: "svg", rendere ...
CSS文本超出
单行文本
1234//单行文本overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
多行文本
12345//多行文本display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
CSS去除页面滚动条
123456html{ /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ overflow:-moz-scrollbars-none;}
1234//谷歌下隐藏滚动条::-webkit-scrollbar{ display:none;}