手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年11月的文章

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

Submitted by gouki on 2020, February 29, 12:16 AM

 不知道将它算在哪个分类。但即实是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了
 
-----
补充：附上两个网址：
1、官网：https://browsersync.io/
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，那就失去意义了。

Javascript | 评论:0 | 阅读:7442

vue + sortable js的一些简单操作

Submitted by gouki on 2020, February 28, 10:03 PM

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

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

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

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

 

Javascript | 评论:0 | 阅读:7651

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

Submitted by gouki on 2020, February 25, 8:59 AM

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

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

JavaScript代码
  1. public on (event: 'dong',         listener: string | ((this: Wechaty, data?: string) => void))                                                    : this  

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

JavaScript代码
  1. async function onLogin (user) {  
  2.   console.log(`${user} login`)  
  3. }  

也没有看到有传入第二个变量。如果你主动 传入第二个参数，会直接报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

JavaScript代码
  1. /** 
  2.  *   Wechaty - https://github.com/chatie/wechaty 
  3.  * 
  4.  *   @copyright 2016-2018 Huan LI <zixia@zixia.net> 
  5.  * 
  6.  *   Licensed under the Apache License, Version 2.0 (the "License"); 
  7.  *   you may not use this file except in compliance with the License. 
  8.  *   You may obtain a copy of the License at 
  9.  * 
  10.  *       http://www.apache.org/licenses/LICENSE-2.0 
  11.  * 
  12.  *   Unless required by applicable law or agreed to in writing, software 
  13.  *   distributed under the License is distributed on an "AS IS" BASIS, 
  14.  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
  15.  *   See the License for the specific language governing permissions and 
  16.  *   limitations under the License. 
  17.  * 
  18.  */  
  19. async function onFriend (contact, request) {  
  20.   /** 
  21.    * We can get the Wechaty bot instance from this: 
  22.    *   `const wechaty = this` 
  23.    * Or use `this` directly: 
  24.    *   `console.info(this.userSelf())` 
  25.    */  
  26.   if(request){  
  27.     let name = contact.name()  
  28.     // await request.accept()  
  29.   
  30.     console.log(`Contact: ${name} send request ${request.hello()}`)  
  31.   }  
  32. }  
  33.   
  34. module.exports = onFriend  
看到 if(request) 上的注释了么。。。就是这样简单。

最后想说的是，感觉

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

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

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

 

 

 

Javascript | 评论:0 | 阅读:6791

yarn:error Incorrect integrity when fetching from the cache

Submitted by gouki on 2020, February 23, 1:03 PM

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 ..
 
问题解决。

Javascript | 评论:0 | 阅读:7886

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

Submitted by gouki on 2020, February 18, 2:27 PM

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也设置了，所有的都是无效）

Javascript | 评论:0 | 阅读:7116

Records:3094«‹42434445464748495051›»