0%

发表于 更新于

拼图验证组件实现

最开始对于该组件的计划是

第一天

  • canvas 画线切图进行 x 轴偏移(记录 x )
  • 用户 touchstart touchend 时间差以及 x 轴位移量进行校验
  • 三次失败后刷新图片

第二天

  • 在上一次切图的 y 轴上再次切同一形状的图产生混淆增加校验难度（注意 x 轴避免重合）
  • 用户自刷新
  • 用户关闭
  • 移动端以及 pc 的适配

未考虑

  • 人机识别机制
  • 前端校验安全问题
阅读全文 »

发表于 更新于

需求:私信拉粉丝群 功能已实现但设计稿不详

card2 判断是否为为未加群逻辑

card2 都是解析连接的

先判断该链接是否为群

//判断是否是群链 群连接 weibo.com/p/230491${群id}

为群再使用群id获取群成员列表遍历是否在该群中，不在该群便弹出二维码。

添加了 modal4

主要是二维码的模态框

​ * 二维码配置

​ * 详情见 https://github.com/davidshimjs/qrcodejs

​ * npm i qrcodejs2 https://www.npmjs.com/package/qrcodejs2

vux 添加

qrcode: ‘’, *//群二维码

1
2
3
4
5
6
7
//操作二维码(qrcode)
exqrcode(state, val) {
	state.qrcode = val;
},
emptyqrcode(state) {
	state.qrcode = null;
},

sync_double 分支

需求：新消息提醒联动

1、群消息免打扰

1-1 群消息免打扰功能，Web和App进行设置两边数据同步。【完成1】

1-2 右键出现气泡，气泡第一条：“查看群资料”，点击打开群信息弹窗，第二条：“群消息免打扰”/“打开群消息通知”，第三条“删除对话”，和线上逻辑一致。【完成1】

1-3 若点击“查看群资料”，回默认切换至当前聊天室，然后打开当前群的群资料弹窗。【完成1】

1-4 设置为“群消息免打扰”后，userlist第二条栏目显示规则：

[x条未读]+最新的一条消息+橙点（没有未读时显示免打扰icon【此icon还未使用最新设计稿icon】）【完成0.8】

2、群消息免打扰功能【调整icon位置及大小未作】【完成0】

3、群标题文案

3-1 群标题文案位置左移，UI上需要调整。【完成1】

3-2 鼠标碰到当前区域，鼠标变成手指icon。【完成1】

4、原关闭该群提醒功能【完成0】

双端消息同步

屏蔽消息状态码不在 pc/mobile 分开，都是用 mobile 的状态码

所以第一次渲染 chatlist 时所拿取的信息的是 mobile 的

1
2
3
4
export const getchatlist = obj => { 
 //获取聊天列表 special_source 标记请求来源 默认为 0 手机端 3
	return axios.get(`/webim/2/direct_messages/contacts.json?special_source=3`, obj).then(res => res.data);
};

手机端修改

一旦手机端修改是否屏蔽的状态会有下推 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
else if (type == 'groupchat_remind_settings') { //群消息免打扰双端同步
    let {
        list,
        i
    } = this.listHandle(cometdMsg.gid);
    this.$store.commit('update' + list, { //更改chatlist  此时不置顶联系人
        notTop: true,
        i,
        param: {
            remindSetting: cometdMsg.settings.mobile
        }
    });
    this.cgProcessPoll(); //结束当前消息处理
}

根据其id判断在列表的位置并修改屏蔽状态

pc 端修改

一旦pc修改需要通知移动端修改

1
2
3
4
5
6
export const setnotice = obj => { //更改用户私信群设置
	return axios.post(`/webim/2/notice_center/discussion_group/set_push_settings.json`, qs.stringify(obj)).then(res => res.data);
	//	return axios.post(`/webim/groupchat/update_user_settings.json`, qs.stringify(obj)).then(res => res.data);
};
//switch	 提醒设置，1：关闭；2：打开；3：屏蔽
//call_from pc:表示更改PC端私信群提醒设置 mobile 手机端

所以全局搜 setnotice 修改参数就好了

查看群/个人资料

若点击“查看群资料”，默认切换至当前聊天室，然后打开当前群的群资料弹窗。

当前是否选折了查看的的用户

  • 已选折正常逻辑

    1
    2
    this.$parent.$refs.cardcontaininfo.curView = "modal2")//群
    this.showUserInfo(0, 3)//人

  • 未选折需要先选择同时注意时机问题

    • 群没事，由于群是根据存储在 vux selectid 进行渲染而在选折时就已经修改了 selectid

    • 个人用户就需要注意时机问题，不然可能导致查看的资料是之前选取那个人的 usercardinfo，由于会重新渲染 message.vue, 而showUserInfo（） 的显示信息是根据 usercardinfo 获取的，但是 usercardinfo 的修改并不是一修改 slectedid 就会改变的，他的促发条件是聊天记录。这个时候我用的 eventbus

      1
      2
      3
      this.$store.commit('fillusercardinfo', other);
      Bus.$emit('newUserCard');
      //一旦修改 usercardinfo 代表着可以去展示用户资料了

发表于 更新于

新的项目使用 vue cli3 搭建，适配选折的是根据 vw 进行适配，写还是写 px 只是使用了 postcss 的相关插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  "postcss": {
    "plugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-aspect-ratio-mini": {},title:  flask vue socket
date: 2019/03/10
tags:	
	- 项目
      "postcss-write-svg": {},
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 375,
        "viewportHeight": 667,
        "unitPrecision": 3,
        "selectorBlackList": [
          ".ignore",
          ".hairlines"
        ],
        "minPixelValue": 1,
        "mediaQuery": false
      }
    }
  },
阅读全文 »

发表于 更新于

移动端适配一直是前端必须解决的问题，使用动态 rem 或者是根据 vw 进行 px 转换可以对局大部分现有机型适配，但是视网膜屏下的细线需要进行另外一些适配，不然 1px 会看起来更粗，因为像素被拆分，这样是不友好滴，看大漠从 2015 年到 2018 年的移动端适配过程你可以看到这孩子不容易啊。。。

阅读全文 »

发表于 更新于

vscode 的基本配置

尽管自己大多数的时候是在使用 vscode 敲代码，但是对于其的配置没有过比较深的认识，带我的小姐姐很贴心地给了我很好的参考资料

能让你开发效率翻倍的 VSCode 插件配置（上）

能让你开发效率翻倍的 VSCode 插件配置（中）

在里面最喜欢的就是 Settings Sync，基于 gist，可以备份我们的一些配置，插件，当我们换了个环境也能快速的搭建我们自己喜欢的敲代码的环境。

由于自己对于一些插件的不熟悉，就踩了坑。由于不了解 EditorConfig for VS Code 而自己又在项目中添加了 .editorconfig，且自己使用了 vscode 的自动保存功能，导致代码刚刚敲完停顿一下就自动换行了，了解了 insert_final_newline (on save) 这句的意义修改 vscode 自动保存的机制就完美避开了。

阅读全文 »

发表于 更新于

昨天做 flask 后端与 vue 前端使用 socket 进行一个数据通信。一开始打开 8080 端口就报 cors 错的错，

查资料使用 flask-cors 解决。难受的是后面使用 vue-socket，其实已经能用了，可是我想用下他 vuex 的集成功能，顺便可以在这个项目上熟悉下 vuex，然后就变成了一个天坑。

这个可爱的官方文档给的东西也是给全了的，我肯定照着他敲啊。可是。。。可是他先用了 vue-socket 在介绍如何使用 vuex 集成，我很自然而然的将 vuex 放在了 vue-socket 后面导致用起来没反应，后面先将 vuex 申明成 store 再来 vue.use(VueSocketIO) 就能用了，而我在这个地方停留了一个多小时。。。难受香菇。。。。

发表于 更新于

倒计时的优化

1
new Date(0) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

一直以为是 00:00:00

无限下拉加载组件

判断下拉组件是否出现在可视窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
eleInView(element) {
      const {
        top,
        right,
        bottom,
        left,
        width,
        height
      } = element.getBoundingClientRect();

      const intersection = {
        t: bottom,
        r: window.innerWidth - left,
        //减去 footer 的高
        b: window.innerHeight - top - 44,
        l: right
      };

      return (
        intersection.t > 0 &&
        intersection.r > 0 &&
        intersection.b > 0 &&
        intersection.l > 0
      );
}

getBoundingClientRect() 该方法返回元素的大小及其相对于视口的位置。

阅读全文 »

发表于 更新于

webkit-text-size-adjust: none 已经对桌面 chrome 无效

中文版Chrome浏览器不支持12px以下字体的解决方案

vue使用rem实现 移动端屏幕适配

vscode 配置

vutur 插件会自动修改 ‘ 为 ” 修改其配置可以杜绝

setting–>extensions–>vutur

format html –> js-beautiful-html

frmat js –> vscode-typescript

这几天使用 vscode 感觉写代码及其难受，每次打完一行代码回车本来缩进是对的但是就一小会儿它自动就跳到了行头，毫无体验感。然后没办法一个插件一个插件得看发现罪魁祸首是 EditorConfig for VS Code 

1
2
3
4
5
6
indent_style
indent_size
tab_width
end_of_line (on save)
insert_final_newline (on save)
trim_trailing_whitespace (on save)<--保存时修剪尾随空格

其实主要是我的 vscode 使用了自动保存，所以就。。。然后修改为切换窗体保存就好了。

阅读全文 »