2020 年 02 月

浏览模式: 标准 | 列表 | 图文
jq的简单用法

jq的简单用法

jq是linux命令行下读取和解析JSON的好工具。只是好象不能jq xxx.json这样的用法,但没事,可以通过管道符,cat xxx.json|jq 就OK了

在这里:https://www.tuicool.com/articles/vieMN3Q有详细的教程,写的非常完整,但如果简单的使用,并不需要完整的看完,只要记得几个用法就行

来个简单的数据:{"code":1,"msg":"ok","data":{"fields":["a","b","c"],"items":[{1,2,3},{11,22,33}],"other":[{"x":1,"y":1},{"x":2,"y":2}]}}

1、获取items节点: cat xxx.json|jq ".data.items"

2、获取items下第二条数据的第二个,即22. cat xxx.json|jq ".data.items[1][1]"

3、获取other下的所有x节点: cat xxx.json|jq ".data.other[].x"

是不是很方便?如果要自定义格式输出,还可以这样

1、将所有x节点用{"items":[]}格式输出: cat xxx.json| jq "{items: [ .data.other[].x ]}" ,

如果要看更多的用法,还是上面的网址里更详细一点。我这只是简单的用一下。。或者说是临时在服务器上测试数据,让自己看起来会比较方便一点。还有一个原因是我在服务器上用这个的最大理由。有时候JSON拿到的时候中文都是转义过的。用jq,可以直接看中文。这点比较爽

browser-sync 省时的浏览器同步测试工具

browser-sync 省时的浏览器同步测试工具

不知道将它算在哪个分类。但即实是js写的就扔在javascript下面了。。

不怎么为什么,我npm install -g browser-sync,就是没用。最后还是用yarn global add browser-sync,才让这个命令行成为全局的。
因为在用PHP开发,没有用纯vue,所以没法用webpack那类的玩意,就造成我写完页面,要刷新一下才OK。特别是两个屏幕。。好麻烦。鼠标移来移去,按再cmd+r。。。
虽然装了hammerspoon,弄了个插件可以让鼠标切换显示 在不同的显示器上,但还是麻烦。以前也用过browser-sync好象都失败了。
最近实在觉得烦,又操起来了。
试了一下。原来还是很简单的。
browser-sync start --proxy "localhost.dev" --files "resources/views/*/*/*.php" --no-ui --no-open
因为我本地测试会使用域名。所以,需要指定proxy,启动后会打开3000端口,这样就可以通过localhost:3000进行访问了。
--files,是指监测resources下的文件。我开始用 *.php 失效。所幸我90%的情况下只要监测模板。所以目前看来还是够用了。
命令太长。可以放到Makefile里或者象我一样,扔在了fabric的文件中,运行一下:fab watch就OK了
-----
补充:附上两个网址:
2、国内的文档:http://www.browsersync.cn/
再补充:因为在laravel里进行了分组,要检查一下PHP也reload。只能这样了。
1、laravel下的命令行:browser-sync start --proxy "localhost.dev" --files "resources/views/*/*/*.php,app/*/*.php,app/*/*/*.php,app/*/*/*/*.php,config/*.php,app/*/*/*/*/*.php" --no-open --no-ui
2、没有用browsersync的 --xip参数,因为他使用之后,域名就变成:http://127.0.0.1.xip.io,你要干脆就是这个域名也就算了,却偏偏还带了port,那就失去意义了。
vue + sortable js的一些简单操作

vue + sortable js的一些简单操作

用sortable处理排序,代码真的很少,不需要引用什么vue-sortable之类的。但会有个问题。。实际的DOM和Vnode可能会显示不一致。往往拖完了,序号变了,数据变了(可以通过console.log来查看),但就是DOM没变。

后来是搜索到这篇文章,写的比较详情:https://www.jianshu.com/p/d92b9efe3e6a,我就不多写了。我的几行代码类似如下:

dragable() {
let contentRow = document.querySelector('.content-row');//指定element,如果有ID最好,在这个下面的元素,最好都是统一类型的,如果当前元素是ul,那就是拖li
Sortable.create(contentRow, {
onEnd: ({newIndex, oldIndex}) => { //监听拖动结束事件
let newline = contentRow.children[newIndex],
oldline = contentRow.children[oldIndex];
// 先删除移动的节点 ,再插入移动的节点到原有节点,还原了移动的操作
//这里是操作DOM
contentRow.removeChild(newline);
contentRow.insertBefore(newline, newIndex > oldIndex? oldline : oldline.nextSibling);
//这里是操作数据
let currRow = this.items.splice(oldIndex, 1)[0];
this.items.splice(newIndex, 0, currRow);

}
});
},

这个方法是vue的methods中的。不复杂。看看就行。记录一下。原来我觉得很简单。这个方法的最后两行就行了。。。但就是DOM不变。参考了上面链接中的内容才加了那两行。

wechaty 在 分拆的文件中使用自身变量

wechaty 在 分拆的文件中使用自身变量

wechaty是目前看来最优雅的机器人库了。使用方式也很简单,官方的demo例子就几行代码,不过看到他们的hot-import-bot.js就感觉慌了。毕竟在同一个页面里,还能直接使用bot变量(例子中实例化的时候,用的是bot,const bot = new Wechaty());但分拆成单独的文件后就没有相应的用法。

看源码中是有这样的代码:

public on (event: 'dong', listener: string | ((this: Wechaty, data?: string) => void)) : this

是看到确实对每一个件事都是传入两个参数,然而demo里都是类似这样:

async function onLogin (user) {
console.log(`${user} login`)
}

也没有看到有传入第二个变量。如果你主动 传入第二个参数,会直接报undefined。在这样分拆的页面怎么使用bot呢?

我找了一下node的全局变量,发现nodejs有一个global变量。嗯,变量名就叫:global.....,于是将除了message以外的事件放到主文件index.js中。并在onlogin中赋值:global.bot = bot;

然后在分拆后的message中,const bot = global.bot; 果然就可以用了。

问了一下群里,发现有人也这样用,但。。。Huan Li(Huan (李卓桓))说了,其实可以在方法里面直接 const wechaty = this;就可以用了。。。

这么说。。。this就可以直接用?果然不会Ts就是不懂。然后 他还更新了一下 git,并在里面加入了使用方法,详见:https://github.com/wechaty/wechaty-getting-started/blob/master/examples/professional/hot-import-bot/listeners/on-friend.js

/**
* Wechaty - https://github.com/chatie/wechaty
*
* @copyright 2016-2018 Huan LI <zixia@zixia.net>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
async function onFriend (contact, request) {
/**
* We can get the Wechaty bot instance from this:
* `const wechaty = this`
* Or use `this` directly:
* `console.info(this.userSelf())`
*/
if(request){
let name = contact.name()
// await request.accept()

console.log(`Contact: ${name} send request ${request.hello()}`)
}
}

module.exports = onFriend
看到 if(request) 上的注释了么。。。就是这样简单。

最后想说的是,感觉

public on (event: 'dong', listener: string | ((this: Wechaty, data?: string) => void)) : this

这个this的用法就象python的self一样。虽然不懂,但是感觉很厉害的样子。

最近在尝试使用他做了个小机器人,就是当群里有人问天气的时候自动回复了一下。。。目前只是demo。没有细纠,但这时候发现 Room.alias(Contact)。没有拿到群昵称,准备这两天再看看问题是啥。

yarn:error Incorrect integrity when fetching from the cache

yarn:error Incorrect integrity when fetching from the cache

yarn add laravel-echo-server

yarn add v1.19.0
[1/4] ? Resolving packages...
[2/4] ? Fetching packages...
error Incorrect integrity when fetching from the cache
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
解决方法:
1、yarn config set unsafe-disable-integrity-migration false
2、yarn cache clean
3、yarn install -f 或者 直接 yarn add ..
问题解决。
setWechatTitle 触发过早导致ios input无法输入

setWechatTitle 触发过早导致ios input无法输入

setWechatTitle 指的是这个插件:https://juejin.im/post/5cff17f45188252dd239943a

在微信里,涉及到后续改title总会有不能刷新,或者不能显示动态title的问题。这个插件就是为了解决它的。
然而,今天遇到的问题是。过早的设置this.wechat.title,导致input框无法输入(用的是element-ui)。测试过。普通 的input框可以(估计两者在CSS上会有冲突,没有细究)
最后简单偷懒的方法是将 这个触发放到了wx.ready(里)。至少表明,我页面元素都加载完了,才触发的。此时不再有任何冲突。
没有时间查问题出在哪里,是哪个语句导致的(因为只有IOS上有这个问题,android没有。而且,IOS上的 -webkit-user-select:auto 这个CSS也设置了,所有的都是无效)

记录个七牛的小问题

七牛云 使用sdk 上传图片提示{"error":"key doesn't match with scope"}

偷懒,我用的是Overtrue的qiniu-filesystem的组件。overtrue大家应该知道,写easywechat的。用了qiniu-filesystem的组件后,生成token就方便了:Storage::disk('qiniu')->getUploadToken();就OK了。
这种是默认情况,啥都OK。配合qiniu-js的upload方法就行。 qiniu.upload(file, filename, uptoken, putExtra, config),也容易解释:file对象,文件名。uploadToken,putExtra是否指定原文件,config:配置,是否用CDN域名等
但如果生成token的时候,指定prefix了。那名qiniu的这个upload方法中的filename就要注意一下。必须是带上prefix的全文件名(基于overtrue的插件)
而且php的方法也要改。如果你直接定义scope为"bucket:prefix",你会发现。。。无效。只能用全名才OK。
记录一下,也算踩了个小坑
iOS 9.3.5 环境安装微信

iOS 9.3.5 环境安装微信

最近的项目是基于VUE开发的,但总有用户说不正常,询问下来是因为使用ipad 2,ios 9.3.5。为此,从闲鱼买了个ipad mini。结果下载微信的时候说不兼容。最后,只能从Appstore的“更新”-“已购项目”找到微信,点击右边的云下载图标。系统会弹出“你要下载最新的兼容版本吗?该版本的“微信”与此设备不兼容。”的对话框,点击“下载”。这样就会在手机上下载最新的兼容当前手机环境的微信版本了。

后记:安装了也打不开。。。提示微信版本过低。

真是纠结

php:str_pad and javascript :padStart

php:str_pad and javascript :padStart

php 要在字符串前后补位很容易 。str_pad就行了。有PAD_LEFT和PAD_BOTH以及PAD_RIGHT等。但JS就没有这么方便了,虽然在现代浏览器中已经支持padStart这样的用法。

padStart(length , padString)。然而用起来还是要注意:1、只支持String的补位。最好是 val.toString().padStart(10,'0')。2、旧版浏览器不支持。。。比如:微信PC版内置的浏览器就不支持(mac 支持)。

只能临时写个方法。。

String.prototype.padStart = function(length, padString) {
var str = this;
while (str.length < length)
str = padString + str;
return str;
}

然后就可以用了。