zou12e / blog Goto Github PK
View Code? Open in Web Editor NEWzou12e的博客-另眼看世界
Home Page: https://zou12e.github.io/blog/
zou12e的博客-另眼看世界
Home Page: https://zou12e.github.io/blog/
mysql -u root -p
use mysql
-- 修改root用户权限
update user set host='%' where user='root' and host='localhost';
-- 刷新
flush privileges;
-- 新增用户远程连接
grant all on *.* to 'newuser'@'%' identified by '123456';
/etc/mysql/mysql.conf.d/mysqld.cnf
-- 注释
bind-address = 127.0.0.1
-- 重启mysql
/etc/init.d/mysql restart
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
-- 关闭brew更新
export HOMEBREW_NO_AUTO_UPDATE=true
1. 解压文件
a. rar文件
brew install unrar
unrar x package.rar
b. 7z文件
brew install p7zip
7z e package.7z
2. git 补全
a. brew install bash-completion
b. 修改或者添加 ~/.bash_profile,加上以下内容
if [ -f ~/.git-completion.bash ]; then
. ~/.git-completion.bash
fi
c. git clone https://github.com/git/git.git
找到源码中 contrib/completion/git-completion.bash
cp git-completion.bash ~/.git-completion.bash
d. source ~/.git-completion.bash
3. 查看关闭端口
sudo lsof -i :9000
sudo kill -9 PID
查看所有LISTEN进程
netstat -an | grep LISTEN
4. 启动mango mysql redis
mangod
mysqld
redis-server
这几天做移动端项目把自己坑到了。
$(function(){
$.ajax({});//直接使用ajax方法,有50%的机会失败,请求不成功,请求返回0
});
$(function(){
$.ajax({});//此时的XMLHttpRequest对象尚未初始化,所以请求返回0
});
解决方案
window.onload = function(){
$.ajax({});
}
1. let a = 10; //更加严格,只在当前作用域生效
2. const PI = 3.1415; //常量,只在当前作用域生效,声明后不能改变
3. global //node中的顶层对象 浏览器中的顶层对象是widnow
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
4.变量赋值
let [a, b, c] = [1, 2, 3];
a // 1
b // 2
c // 3
let [x = 1] = [undefined];
x // 1
let [x = 1] = [3];
x // 3
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let {length : len} = 'hello';
len // 5
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
5. 字符串方法
let s = 'Hello world!';
s.startsWith('Hello') // true 头部是否开始
s.endsWith('!') // true 尾部是否结束
s.includes('o') // true 全部是否包含
'x'.repeat(3) // "xxx" 重复次数
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'x'.padStart(5, 'ab') // 'ababx' 头部补全
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab' 尾部补全
'x'.padEnd(4, 'ab') // 'xaba'
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` //` 数字键 1 左边 变量名写在${}
6. 数值扩展
Number.parseInt == parseInt
Number.parseFloat == parseFloat
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false
Math.trunc(4.1) // 4 返回整数部分
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
Math.sign(-5) // -1 返回正数+1 负数-1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
2 ** 2
// 4
2 ** 3
// 8
let a = 1.5;
a **= 2;
// 等同于 a = a * a;
let b = 4;
b **= 3;
// 等同于 b = b * b * b;
7. 函数扩展
function log(x, y = 'World') { // 构造函数, 赋值
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
var f = v => v;
var f = function(v) {
return v;
};
// 正常函数写法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭头函数写法
var result = values.sort((a, b) => a - b);
foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
8.数组扩展
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
[...'hello']
// [ "h", "e", "l", "l", "o" ]
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike);
// ['a', 'b', 'c']
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
9.对象扩展
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
const o = {
method() {
return "Hello!";
}
};
// 等同于
const o = {
method: function() {
return "Hello!";
}
};
const cart = {
_wheels: 4,
get wheels () {
return this._wheels;
},
set wheels (value) {
this._wheels = value;
}
}
cart.wheels //4
cart.wheels = 14;
cart.wheels //14
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2); //合并对象 浅拷贝
target // {a:1, b:2, c:3}
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
const [a, ...b] = [1, 2, 3]; // ...扩展运算符
a // 1
b // [2, 3]
10.Symbol // 独一无二的,可以保证不会与其他属性名产生冲突
let s = Symbol();
let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"
11. Set && Map
Set
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
const set = new Set([2, 3, 5, 4, 5, 2, 2]);
[...set]
// 2 3 5 4
// 去除数组的重复成员
[...new Set(array)]
Map
const map = new Map([
['name', '张三'],
['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
12.异步解决方案
Promise
Generator
async
13.类 class
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
class Foo { //静态方法
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
class Point {
}
class ColorPoint extends Point { //继承类
}
14.模块化
//circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
import { area, circumference } from './circle';
console.log('圆面积:' + area(4));
console.log('圆周长:' + circumference(14));
import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
import();
import('./circle.js')
.then(({area, circumference}) => {
console.log('圆面积:' + area(4));
console.log('圆周长:' + circumference(14));
});
// export-default.js 默认输出是一个函数
export default function () {
console.log('foo');
}
import Def from 'export-default'; //这时import命令后面,不使用大括号
// 等同于
import { default as Def } from 'modules';
时间:2017年10月4日 至 2017年10月14日
出发地:深圳
路线:深圳-香港-东京-箱根-东京-京都-奈良-大阪-香港-深圳
住宿:民宿+酒店
人数:7人(两对夫妻,一对姐妹加一个单身妹子,组合有点奇葩)
行程:穷游网
本来是准备在回程的飞机上写的,但是一路颠簸,就放弃了。
我们实际路线和之前做的行程差不多,中途没有什么大的变动和意外,只是中途有些插曲,不过也给旅程提供很多乐趣。
行程的东西我就不多说了,就讲讲中途我们遇到的一些比较有趣的事情和一些经验。
因为是廉价航班,不包餐,不包行李额,所以要单独买行李额,人均行李额大概15-20kg之间比较合适,价格15kg,200-300百,如果是多人出行,行李额买在同一个人身上。回程的行李额要多买一些,因为要购物。
为什么机票这么便宜了,因为是在香港飞,小飞机,左边坐三个,右边三个,和高铁差不多,不过坐着还没高铁舒服,后来我们才发现,这些廉价航班上50%以上都是职业代购。
推荐:携程
民宿就挺好,提前在airbnb上找好自己喜欢的房子(如果确定了旅行,那就提前订,可选的房子就比较多了),人多比较好找,如果是2个人找房子都比较小,而且相对比较贵,人多可以找一套房子,我们住的都挺不错的。有人担心民宿的位置不好找,这点一点都不要担心,房东给你的文档非常的详细,从那里出发,在那里转弯,再那里进去,都清清楚楚,如果这都找不到,那也不适合自由行了。
如果想住酒店,或者有些情况住酒店方便一些(我们第一天到日本晚上10点多了,所以找了个机场酒店,可以接机班车)
推荐:airbnb、携程、Booking、e路东瀛 (订酒店三家可以比一下价格)
日本签证个人是办理不了的, 必须找旅行社,或者淘宝代办。这个他们比较专业。不要担心被拒签,提供的资料(必须真实),旅行社会帮你提前审核一边,如果通过了,才会帮你送签到大使馆,不然会退还。
推荐:淘宝(搜日本签证)
提前去银行换的,人均换了60000日元(3500人民币左右),后来去日本取也可以,多不了多少钱,但是日本取款要看这台ATM机器是否支持银联,一般都有一台支持银联的机器。
你想要的门票都可以在淘宝买到。我们是国庆期间去的日本,人比较多,所以三鹰之森吉卜力美术馆(宫崎骏美术馆)没有买到票,还挺可惜的。
这个比较重要,决定了你行程。因为我们提前花了很多时间,所以在日本没有遇到太大的麻烦,基本和我们预期的一样。哈哈,主要是大家英语和日语都不怎么好,只能提前准备了。
主要有网络就可以啦,我们订的是11天日本无限流量卡,又是淘宝。(这个要注意啦,买卡之后商家会送一些优惠劵,记得带着,购物的时候可以用)
谷歌地图,乗換案内,出国翻译官(这个因人而异)
在深圳包车挺方便的,因为带着大包小包,挺不方便的,推荐淘宝啦(搜包车过关)。其它的方式就不推荐啦。具体淘宝的客服会和你说清楚的。
日本的航班需要在机场内做两趟接驳车,所以大家需要预留多一点时间去登机闸口,我们比较磨蹭,差点错过航班了。当时真是好着急
飞机大概四个小时到日本,时区不同,到日本后就多一小时,国内8点,日本9点。
如果想留点纪念,可以在一些景点,地铁站,机场盖章,(具体位置可以问工作人员)需要自己准备一个本子。
我们到的就是成田机场,因为我们的航班是晚上11点多到的日本,因为第一次到日本,交通什么的都不太熟悉,就提前预定了机场旁边的酒店,一般酒店都有大巴接送,找到酒店大巴接送的地点,等大巴就可以了,酒店一般有餐厅,不过比较贵,酒店周边没有便利店,酒店里面有便利店,不过关门比较早,所以第一晚到日本,准备一些吃的,例如方便面,面包。
在机场,地铁站购买,只能使用现金。地铁,轻轨,公交都可以做。
坐地铁需要注意的是:日本很多地铁都分快速线,需要看本趟地铁是否到你所要去的站点(尤其在京都需要注意)。
坐公交需要注意的是:有些公交是分段收费,上车走后门刷一次卡,下车走前门刷一次卡。如果后门没有刷卡的机器,那就只要下车在前门刷一次卡下车。大部分公交都是从后门上车。
提前规划好景点路线,日本打车比较贵,注意一下景点的末班车,我们其中有一个景点差点没有赶上末班车
买买买 很多东西都挺便宜的,大阪,东京,京都,奈良比较,应该是京都最便宜一点,我们最后一站是大阪,所以选在在大阪买买买,我们是在大阪心斋桥买的东西,这里稍微晚一点街边的商铺关门后会把一些纸盒丢在门外,如果买的东西太多,有没有东西包装,可以去捡纸盒回去打包,7-11有专门的打包胶带。
我们选择都是airbnb,民宿的好处是自由,可以体验一下当地的居住环境,找房子需要提前规划一下。
一定要注意:如果不小按到了火警报警装置,不要着急,找到复位的地方
待续
控制台输入
setInterval(function(){window.frames["contentFrame"].document.location.reload()},1000*228);
//1000*228 mv时间
打开:https://freessl.org/
a. 输入你的域名
b. 选择方式
证书品牌:Trustasia
证书类型: ECC
验证类型: 文件验证
CSR生成: 后端服务器生成
c. 输入你的邮箱
d. 点击创建
e. 验证文件
下载文件放置到配置的文件路径下
f. 点击验证,验证成功下载证书 chain.zip
打开:https://myssl.com/chain_download.html
a. 解压chain.zip 有两个文件
full_chain.pem
private.key
b. 打开网址选择上传证书选择full_chain.pem
c. 点击获取证书链
可以下载证书链或者使用命令
curl https://myssl.com/api/v1/get_chain/.. 直接下载到服务器
a. 准备两个文件上传到服务器 位置 /path/to/
full_chain_ecc.crt
private.key
b. 配置Nginx
server {
# 监听 ssl 443 端口
listen 443 ssl;
server_name www.zourunze.com;
# 开启 ssl
ssl on;
# 指定 ssl 证书路径
ssl_certificate /path/to/full_chain_ecc.crt;
# 指定私钥文件路径
ssl_certificate_key /path/to/private.key;
}
Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来,沉浸式的体验,改进web的性能低下等。是Google 在2015年提出,2017才推广开来。其宗旨是渐进增强,不再有媲美原生应用的想法,而是让 WebApp 变得更加对移动环境友好,体验自然顺滑。
Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
Connectivity independent – Service workers allow work offline, or on low quality networks.
可以离线,使用service worker技术,即使网页关闭,PWA 仍然可以在后台运行获取数据更新
App-like – Feel like an app to the user with app-style interactions and navigation.
Fresh – Always up-to-date thanks to the service worker update process.
Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable – Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
Re-engageable – Make re-engagement easy through features like push notifications.
可以推送消息
Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
可以添加到home屏幕
Linkable – Easily shared via a URL and do not require complex installation.
便于分享
基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了,Firefox 和微软的 Edge 正在开发中,水果公司的 Safari 最近刚刚表达了可能会支持 PWA。从长久的角度看,只要 Google 不断推动一些网站往 PWA 转型,其他的浏览器或者竞争对手也就会自然跟风上船。
实现 PWA 所需要的特性,主要是围绕着 Service Workers 的基于事件的 cache 系统和消息推送的一套新的 API,此外还需要定义 manifest.json 来定义安装行为或是样式等。
首先,将你的chrome升级到最新的55版本
1 合集
https://pwa.rocks/,这个网址有很多pwa应用。其中不乏 The Washington Post,Flip Board,AliExpress,Wikipedia,Gmail,Booking 这样的大头
2 阿里巴巴
Hybrid App虽然看上去是一个Native App,但只有一个UI WebView + Native的壳子,里面访问的是一个Web App。而PWA是真正的Web App。
在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10
在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 37 内核来渲染的
在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的
小程序入口在微信里面,并不能添加到主屏幕,不能离线,不能推送。小程序的优势就是庞大的用户群,推广起来非常好。
总而言之,PWA是未来的趋势。
a. 安装wine
b. 检查
wine ~/.config/微信web开发者工具/WeappVendor/s/wcc.exe
sh ~/.config/微信web开发者工具/WeappVendor/wcc.exe
./bin/replace_weapp_vendor.sh
cp -rf ./bin/WeappVendor/* ~/.config/微信web开发者工具/WeappVendor
c. 手动添加一个解析 Windows 的 exe 的 binfmt 配置 (ubuntu16.4以下版本)
vim /usr/share/binfmts/wine
内容填入
package wine
interpreter /usr/bin/wine
magic MZ
保存退出,更新一下配置就好了
sudo update-binfmts --import wine
(update-binfmts 找不到 sudo apt-get install binfmt-support)
最近看了一些推文,在讲关于互联网大数据杀熟的现象。
站在技术的角度上没毛病,就是分析你的个人消费数据,来给你定价,而且让这个价格对你无感,而且还帮助商家赚钱。
我的思考是价格这个东西,怎么才是公道的。
比如一个电影院去现场买票是80元每张。
有一个互联网渠道买票是40元每张;
新用户是30元每张;
如果这个互联网渠道发现你在我们的渠道购票稳定,每次涨价,最后涨到了60元/张;
能不能鉴定这个互联网产品杀熟了?
你说他杀熟,但是他还是比现场买票便宜,还提前可以帮你选座,影院装了方便你取票的机器,这些都是他的成本;
你说他正常买卖,但第一次他给新用户30每张,到后面越来越贵,也是存在价格的不透明,越来越贵了。
我一开始以为互联网的出现让很多价格都透明了,现在大数据杀熟让我又搞不懂了。
$.ajax({
url: '/api/v1/adduser',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
Id:1,
Name:2
})
})
1. 下载工具 SQuirreL SQL Client
下载地址: https://sourceforge.net/projects/squirrel-sql/?source=typ_redirect
2. 工具需要java安装,安装java
教程:http://www.cnblogs.com/a2211009/p/4265225.html
[如果第一种方法不行,就使用第二种]
3. 安装工具
java -jar squirrel-sql-3.8.1-standard.jar --下载工具名称
4. 安装驱动 jtds.jar[百度搜索下载]
步骤:
a:打开软件
b:选择 - 驱动程序 - jTDS Miorosoft SQL - 双击
c:弹出对话框 - 选择附加类路径 - 点击新增 - 将下载的jtds.jar添加进去
d:控制台出现绿色文字提示成功,驱动列表jTDS Miorosoft SQL前面的叉变成勾
5.连接数据库
步骤:
a:选择别名
b:点击加号
c:弹出对话框 - 名字随便填 - 驱动选择 jTDS Miorosoft SQL
d:地址填写
示例:jdbc:jtds:sqlserver://192.168.0.255:1433/FM
192.168.0.255 --IP
FM --数据库名称
e:填写用户名密码
f:点击测试 - 弹出链接成功即可
g:失败 检查以上操作
6.连接其他数据库也是以上方法
1.找到sublime下的Packages目录
2.新建HTML文件夹(如果有就不用创建了)
3.下载文件 HTML.sublime-syntax
4.将文件 HTML.sublime-syntax 放进HTML文件夹即可
1.Preferences ->Package Control
2.输入 install package 回车
3.再输入 balel 回车安装即可
4.打开一个js或者jsx的文件,选择View -> Syntax -> Open all with current… -> Babel
-- 问题
No coverage information was collected, exit without writing coverage information
-- 解决
sudo npm install -g babel-cli
yarn add -D [email protected]
yarn add -D mocha
./node_modules/.bin/istanbul cover --no-default-excludes --report=text -x '/node_modules/' ./node_modules/.bin/_mocha -- -t 8000
localStorage
单位字节
IE 9 5000000 4.7683716mb
firefox 22.0 5242880 5mb
chrome 28.0 2621440 2.5mb
safari 5.1 2621440 2.5mb
opera 12.15 5242880 5mb (超出则会弹出允许请求更多空间的对话框)
与浏览器内核有关
IE Trident
firefox Gecko
safari WebKit(Blink)
chrome WebKit(Blink)
opera Presto
cookie 个数 大小(字节)
IE6.0 20 4095
IE7.0+ 50 4095
Opera 30 4096
firefox 50 4097
safari ∞ 4097
chrome 50 409
a. 安装wine
b. 检查
wine ~/.config/微信web开发者工具/WeappVendor/s/wcc.exe
sh ~/.config/微信web开发者工具/WeappVendor/wcc.exe
./bin/replace_weapp_vendor.sh
cp -rf ./bin/WeappVendor/* ~/.config/微信web开发者工具/WeappVendor
c. 手动添加一个解析 Windows 的 exe 的 binfmt 配置 (ubuntu16.4以下版本)
vim /usr/share/binfmts/wine
内容填入
package wine
interpreter /usr/bin/wine
magic MZ
保存退出,更新一下配置就好了
sudo update-binfmts --import wine
(update-binfmts 找不到 sudo apt-get install binfmt-support)
这几天一直对着WordPress发愁,打开实在是太慢了。
后来查看了一下源代码,原来是加载google字体引起的。
在网上搜了一下资料。
大致的解决方案有三种:
第一种是: 禁止加载google字体;
第二种是: 替换googel字体的来源,用国内服务器提供的地址;
第三种是: 把用到的字体下载到本地。
经过本人的慎重思考与实践,最终推荐大家使用第二种方法,既简单又快捷。
详细步骤: 全文件搜索 fonts.googleapis.com 替换成 fonts.useso.com/css
主要就两个文件
wp-includes/script-loader.php
wp-content/themes/wp-forge/functions.php (wp-forge 当前使用的主题)
想必大家对css中 -moz-, -webkit-,-o-,-ms- 开头的样式并不陌生,但是具体代表什么意思了?
估计大家就不太清楚了吧,现在给大家科普一下
-moz- 代表Firefox
-webkit- 代表Safari 和 Chrome
-o- 代表Opera
-ms- 代表IE
各种浏览器的低版本为了支持css3新属性而使用的开头。
比如说你用的火狐浏览器版本比较低,不能识别css3新属性。
但是又要在该浏览器版本上使用,就需要在原有的样式前加上-moz-
sudo apt-get update
sudo apt-get install python-software-properties
sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
sudo apt-get install npm
sudo npm config get registry
sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list
sudo npm install -g yarn
-- 需要先把nodejs先升级到8.0以上
sudo yarn config get registry
sudo yarn config set registry https://registry.npm.taobao.org
sudo npm install -g nrm
sudo nrm ls
sudo nrm use taobao
sudo npm install n -g
sudo n stable
sudo node -v
1. 自定义组件默认不使用app.wxss的公用样式
解决: 在自定义组件的样式中引用公用样式 @import '../../app.wxss';
2. 层级过多view float失效(可能是自己布局有问题)
解决: 还没找到解决方案, 暂时用position: absolute;
3. 使用 async await
解决:使用到的页面需要引入
import regeneratorRuntime from '/utils/regenerator-runtime';
具体解决方案:https://ninghao.net/blog/5508
4. hidden标签失效
原因:布局使用了display:flex
解决:不实用flex布局,或者换成 class='ishide?"hide":""'
5. 小程序自适应高度
.img{
width: 100%;
}
# mode="widthFix"
<image class="img" src="../../images/hello.png" mode="widthFix"></image>
6. 空格,换行使用
# \r\n
放入<text></text>标签中
最近玩了一下gulp,挺简单方便的。
有个一个非常实用的插件、配合chrome插件可以实现保存代码自动刷新页面。
简单说下用法。
1.首先先安装node(这是必须的)
https://nodejs.org/
2.全局安装 gulp
npm install --g gulp
3.在项目目录安装 gulp
npm install --save-dev gulp
4.安装gulp livereload 插件(自动刷新)
npm install --save-dev gulp gulp-livereload
5.在项目目录下创建gulpfile.js
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function () {
livereload.listen();
// app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件
gulp.watch('app/**/*.*', function (file) {
livereload.changed(file.path);
});
});
6.下载安装chrome插件 livereload
在Chrome 网上应用店搜索,现在需要翻墙才能下载
(如果本地没有服务器,可以使用node的服务器)
npm install --g http-server
运行服务器
http-server
如果本地有服务器就可以忽悠这两步
7.运行命令,并用Chrome浏览器打开网页
gulp watch
8.打开插件开关(中间变为实心黑色圆点表示开始运作了。)
9.保存代码,页面即可实时刷新,省去大部分人力
尤其是有双屏的时候会感觉特别好,左边屏幕写代码,右边屏幕显示效果和放效果图。
ssh连接ubunt16.04系统出现错误:
server responded “Algorithm negotiation failes”
服务器响应通过失败
通过网页连接的方式先连接服务器,(我使用的是阿里云,找到实力详情,选择远程连接)
在命令行打开ssh的配置文件: (可以通过右上角复制命令输入)
sudo vi /etc/ssh/sshd_config
Ciphers aes128-cbc,aes192-cbc,aes256-cbc,aes128-ctr,aes192-ctr,aes256-ctr,3des-cbc,arcfour128,arcfour256,arcfour,blowfish-cbc,cast128-cbc
MACs hmac-md5,hmac-sha1,[email protected],hmac-ripemd160,hmac-sha1-96,hmac-md5-96
KexAlgorithms diffie-hellman-group1-sha1,diffie-hellman-group14-sha1,diffie-hellman-group-exchange-sha1,diffie-hellman-group-exchange-sha256,ecdh-sha2-nistp256,ecdh-sha2-nistp384,ecdh-sha2-nistp521,diffie-hellman-group1-sha1,[email protected]
sudo /etc/init.d/ssh restart
https://www.microsoft.com/net/learn/get-started/linux/ubuntu16-04#run
a.进入项目目录(含Program.css)
-- 安装依赖
sudo dotnet restore
-- 编译应用程序,发布结果集的文件到一个目录
sudo dotnet publish
找到发布文件 (pwd 找到位置)
../bin/Debug/netcoreapp2.0/Chloe.Admin.dll
../bin/Debug/netcoreapp2.0/publish/
记住这两个文件位置
b.配置systemctl
cd /etc/systemd/system/
-- 创建一个新的server启动
sudo vi new.service
[Unit]
Description=cs-web-admin
[Service]
# [ ]是简写,要写全路径
WorkingDirectory=[../bin/Debug/netcoreapp2.0/publish/]
# [ ]是简写,要写全路径
ExecStart=/usr/bin/dotnet [../bin/Debug/netcoreapp2.0/Chloe.Admin.dll]
Restart=always
[Install]
WantedBy=multi-user.target
c.启动服务
-- 刷新配置
sudo systemctl daemon-reload
-- 启动
sudo systemctl start new.service
-- 查看状态
sudo systemctl status new.service
今天和第三方对接,需要嵌套iframe,做自适应高度。
看了很多篇文章,很多写的很复杂,而且不好理解。
今天总结一下:
这里只讲跨域的iframe如何传递值的方案,同域的不啰嗦了。
比如:
我们有2个域名
1. www.a.com
2. www.b.com
我们需要a域名下的a.html引用b域名下的b.html页面,然后让a.html页面引用的b.html页面的高度能自适应,有点绕、仔细读一遍。
这就是我们的场景。
我们直接在a.html去获取b.html页面的高度是不可以的,这涉及浏览器的安全问题。
所以我们用一个新的界面c.html来做数据传递。
c.html放在a域名下,然后在b域名下的b.html引用它。
大概关系
www.a.com下有2个界面
1.a.html (内容iframe src=b.html)
2.c.html
www.b.com下有1个界面
1.b.html (内容iframe src=c.html)
贴一下三个页面代码大家就清楚了。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8" >
<title>a.html< /title>
</head>
<body>
<iframe id="iframe" src='http://www.b.com/b.html' />
</body>
<script>
//设置iframe的高度
var ifr_el = document.getElementById("iframe");
function getIfrData(data){
ifr_el.style.height = data+"px";
}
</script>
</html>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8" >
<title>b.html< /title>
</head>
<body>
页面内容
<iframe id="iframe" src='http://www.a.com/c.html' />
</body>
<script>
//将页面高度赋值给c.html
window.onload=function(){
var ifr_el = document.getElementById("iframe");
ifr_el.src +="?height="+document.body.scrollHeight+"&t="+(new Date().getTime());
}
</script>
</html>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8" >
<title>c.html< /title>
</head>
<body>
</body>
<script>
var getParam = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
height;
//页面被加载的时候获取url的值,发现height值,然后告诉a.html,回调a.html界面的getIfrData方法
window.onload = function() {
height = getParam("height");
if (height && height > 0 && window.parent && window.parent.parent && window.parent.parent.getIfrData) {
window.parent.parent.getIfrData(height);
}
}
</script>
</html>
在这里我们可以举一反三,这里的c.html传递的是b.html的高度,我们也可以传递其他的数据,这就看具体使用场景了!
最近学习了一些新的移动端布局方式(自适应屏幕宽度),给大家分享一下:
Bitbucket地址:[email protected]:281933726/csscase3.git
$(“body”).on(“tap”,”#btn”,function(){
//do something
})
zepot tap事件如果这样使用后,导致页面其他元素的事件都不能冒泡,将失效;页面成假死状态。
如果要为某个元素绑定点击事件,推荐使用
$(“body”).on(“chick”,”#btn”,function(){});
CSS伪类和伪元素大家应该都用过,这里我们要用这些简单的css属性完成一些看起来比较复杂的视觉效果
我们常用的伪类有
:active 用在移动端触摸后
:focus 元素获取焦点后
:hover 鼠标移动到元素上后
:visited 被访问过的链接
我们常用的伪元素有
:before 在某元素之前插入某些内容
:after 在某元素之前后入某些内容
css3中常用的选择器
:disabled 禁用的input
:checked 被选中的input
效果猛击这里 <<
Bitbucket地址:[email protected]:281933726/csscase1.git
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
最近几天在看react ,刚过完一遍基本的语法。
发现这不是一个简单的库,也不是一套框架,是一个很庞大的体系,是一套解决方案。其中webpack就是其中的一块,这一篇只做一个最基础的介绍
WebPack是一个 模块打包机。gulp 和 grunt只能说是一个工具。
- 全局安装
npm install -g webpack
- 安装到你的项目目录
npm install --save-dev webpack
- 创建
package.json npm init
- 安装Webpack
npm install --save-dev webpack
demo
app
a.js
main.js
node_modules
public
index.html
package.json
webpack.config.js
- a.js
module.exports = function() {
var a = document.createElement('div');
a.textContent = "Hello word !";
return a;
};
- main.js
const a = require('./a.js');
document.querySelector("#root").appendChild(a());
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>
- webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
- package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
npm install --g webpack-dev-server
npm install --save-dev webpack-dev-server
npm run webpack
npm start (start关键语法,可以省去run)
github地址:https://github.com/zou12e/webpack
call,apply,bind 功能都是 改变函数内部this指向;
写几个简单的例子大家都了解啦;
var a = {
user:"a",
fn:function(i,j){
console.log(this.user,i,j);
}
}
console.log("-----call------");
var b = a.fn;
b.call(a,1,2); // a 1 2
console.log("-----apply------");
var c = a.fn;
c.apply({user:"c"},[3,4]); // c 3 4
console.log("-----bind------");
var d = a.fn;
var e = d.bind({user:"d"});
e(5,6); // d 5 6
var f = d.bind({user:"f"},7,8);
f(); // f 7 8
call 第一个参数一样,后面传多个参数,立即调用函数
apply 第一个参数一样,后面传数组,立即调用函数
bind 第一个参数一样,后面传多个参数,返回一个函数,需要主动调用 (函数参数与bind后面参数设置相关)
JSON.parse(jsonstr); //可以将json字符串转换成json对象
var json= JSON.parse(“{id:1,name:\”zou12e\”}”);
JSON.stringify(jsonobj); //可以将json对象转换成json字符串
var str = JSON.stringify({id:1,name:”zou12e”});
最近看到一篇非常有用 水平垂直居中方案。
原文地址:http://www.cnblogs.com/coco1s/p/4444383.html
效果猛击这里 <<
Bitbucket地址:[email protected]:281933726/csscase2.git
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.