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

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

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)。没有拿到群昵称,准备这两天再看看问题是啥。

 

 

 

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 指的是这个插件: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也设置了,所有的都是无效)

element-UI table如何按比例设置宽度

做后台,还真是首推ElementUI,毕竟规范,虽然东西比其他的少了一点,比如没有默认的ul/li效果之类的,但这些标准元素你可以引用一些第三方库,比如bootstrap,只要用他的CSS就行了。

当然,elementui也会有小问题,比如这次新版里推出的PopConfirm,好看是好看,但@confim/@cancel都没有(看官方的issue,有人提出是@onConfirm/@onCancel,但都没有用,也有人说是@on-confirm。。。。没有一一试,先用popup解决了)

这一篇说的是element-ui的Table组件,每个column都可以设置width,但这个width,因为没有单位,说不准是px?还是rem,如果一个表格的列不多,你这样设置的话,在大屏和小屏上面就很尴尬,要么全部偏左,要么撑破页面。因为他默认居然没有百分比设置(应该说width不支持百分比),但确实有人发现是可以支持,原来,el-table-column还有一个 min-width,这个就支持百分比,你可以设置<el-table-column min-width="15%"></el-table-column>,记得总数不要超过100%,否则还是会撑出或者会不起作用(总感觉有点妖)

 

Tags: element-ui

laravel mix extract之后.scss编译出来是空文件

 应该不算是我姿势不对吧,网上不少人有这个问题:https://github.com/JeffreyWay/laravel-mix/issues/1914

其实代码非常简单,如果是这样:
JavaScript代码
  1. mix  
  2.   .js('resources/front/visitors/visitors.js''public/js')  
  3.   .sass('resources/front/visitors/sass/visitors.scss''public/css')  
那就一切正常。如果加了这么一行:
JavaScript代码
  1. mix  
  2.   .js('resources/front/visitors/visitors.js''public/js')  
  3.   .sass('resources/front/visitors/sass/visitors.scss''public/css')  
  4.   .extract([....])  
则生成出来的visitors.css为空文件。生成空文件的时候,还认为自己是从几个vue文件里做了提取。但事实上scss这个文件是孤立的。不含在vue里(确实是有一个提取vuestyle的参数,但我没设置),laravel-mix的作者居然说:No, answer is don't upgrade if you're using dynamic imports. See the Mix 4 release notes.
 
评论里有人说实在不行就分成两个js文件来处理吧。嗯,事实上我也这样做了,比如我我因为前后台分开,就这么折腾的,但也会带来问题,比如,后一个生成的manifest.json会覆盖前面的(如果你不用{{mix()}}函数,那不会遇到这个问题,因为你不用它。。。但如果你用了,就会遇到各种不同的小问题,除非你放在一个mix.js文件里,只是用路由来解决)
 
最后我确实是分拆了,利用了concurrently,直接加了一个scripts:
JavaScript代码
  1. {  
  2.     "start":"concurrently \"npm:watch*\""  
  3. }  
执行npm run start,就OK了。如果你不想看完整的输出。上面的scripts中可以改成:
JavaScript代码
  1. {  
  2.     "start":"concurrently -r \"npm:watch*\""  
  3. }  
 
是的,你没有看错,就加了一个-r的参数