朱治龙发布的文章 - 朱治龙个人博客

2022-01-26

[转载]如何从交互维度量化用户体验？最近在准备一个用户体验相关的PPT作内部分享，收集素材的时候在知乎上发现一篇讲解非常翔实的文章。故转载于此，仅用于副本留底，若有侵权可联系删除。原文地址：https://zhuanlan.zhihu.com/p/39124206https://mp.weixin.qq.com/s/69SUAWmsg7S4J4CvLk1TNA{mtitle title="以下为转载的内容原文"/}之前参加了回音分享会，认识了很多新朋友，线下分享时间有限，可能有很多东西没有讲的很透彻，所以整理了一下我当时的 ppt 和想要表达的观点，写了这篇文章，和大家分享一些在产品和交互设计中的一些自己的方法。一、什么是交互狭义的交互（Interaction）定义交互主体必须是人本身，而客体可以是产品，环境，服务等等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着心理预期施加一个行为，然后客体会根据这个行为给予一个反馈（没有反馈本质也是一个反馈），而人会根据这个反馈是否符合预期去进行心理修正。如下图所示，这就是我理解的最小交互模型：当时我举的例子是用翻页器去控制 ppt 翻页：如上图所示，拆解这一套交互行为：当我点击翻页器的「下一页」按钮，我点击行为附带的心理预期是「PPT翻往下一页」，然后我点击的时候，遥控器塑胶按钮给到我手指一个物理反馈，证明我按下的行为已经完成了，这是「输出端（我的手）的交互与反馈」，这时候遥控器接收到按钮指令，把指令通过红外线传输到 USB接收器上，接收器把指令传到 PC端然后完成翻页动作，再通过大屏幕传到我的眼（输入端）中，我就可以确认这一次交互反馈是符合预期的。这里有一点想要补充：设备对设备（上图中黑色箭头），也属于广义的交互，只不过现阶段大家研究的交互设计都是狭义的，人为主体的交互。在我们日用科技产品的早期，有两个东西是无法跳过的，那就是按键手机和 PC电脑：他们几乎是同步在发展的，而这两个产品的交互行为基本上延续到了触屏手机时代，所以为了弄明白触屏手机的交互，这两个产品是值得讲一讲的。先看按键手机（就是我们小时候用的非智能手机）：在按键手机中，最让用户困惑的其实是按键和屏幕之间存在一个映射关系，而不同厂商缺乏一个统一的规范，各家映射规则不一样。大家是否还记得当年的手机说明书那可以说是相当厚，因为说明书必须要给用户建构一个心理模型；比如上图，点击左上角和右上角那两个「-」按钮，其实一一对应的是屏幕左下角的「Goto」和右下角的「Names」。这个一一对应关系作为今天的用户来看应该是很平常而且很易懂的，但是当年没用过手机的人，需要花很长时间阅读说明书，才能够明白物理按键和屏幕上的映射关系，这就是按键手机很难用的地方，也是很反人性的地方。因为作为用户来说，心智上，我们当然希望所触即所得。再来看 PC，作为和按键手机差不多一起出现的载体形式，人们操作 PC端人是通过媒介（也就是鼠标+键盘）输入的，其实本质上也是我们通过鼠标在桌面上滑动 x-y 区域对应到电脑桌面上指针的移动来创造屏幕中x-y的映射关系，然后键盘上几十个键配合输入完成操作。大家发现了么，上述的两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为，这两种载体从出身开始就是需要很大交互成本的。随着科技的发展，触屏感应技术推出了之后，印象中触屏手机就是两三年时间就摧枯拉朽的淘汰了按键手机，本质上是干掉了一一对应的交互映射，所按即所得：触屏手机出现之后，交互专家们不禁要问一个问题了：手和触摸屏到底有多少种交互方式？答案是有很多种：越是高阶越是隐藏的交互手势越复杂，所谓的「交互成本」也越高，比如锤子三指滑动换屏保那种，就是利用了高阶交互便捷实现边界功能。那这么看起来，iOS 也好还是所有的安卓手机都好，从用户端而言，就是组合交互手势，让信息更好的传达而已。那么同理，在 App 中也是一样，如果我们了解了每一个交互行为的用户心理预期，对设计工作而言就能做到有的放矢：我们以「单击」和「滑动」这两个最简单的交互行为举例。所谓单击手机屏幕，用户其实最核心的是有两个预期：第一是选中一个元素，比如 Radio组件。第二是逻辑上的 Next，比如点了一件衣服，应该 Next 到衣服的详情；点了付款，应该出现付款流程，点了返回，应该 back 到上一路径点等等。划动交互也是一样的，用户在一块手机屏幕上单指划划划，用户内心的预期其实也不复杂，最核心的预期也就两点：第一是查看屏幕外的线索（前提是设计师给用户留下线索了或者是这个 UI组件长得就是可以划动的样子）。第二是查看相邻标签的内容，或者查看同一个标签下的相邻元素，比如 iOS 的 segment controlle组件就是典型例子：当我们了解了这些之后，我们在实际的设计工作中就可以根据上面这些理论来合理选择 UI组件去呈现对应的信息了。二、从交互维度合理选择UI组件我们在设计工作中，选择 UI组件，本质上就是选择信息的呈现形式。每一个常见的 UI界面和 UI组件，都一定也满足上面所说的最小交互模型：在这里我举一些例子说明。第一个例子：同样的内容，选择不同的 UI组件呈现，给用户呈现的是完全不同的产品结构：大家看下面这张图：这两个 UI模块摆在大家面前，大家应该能清晰的感受到，左边是一个 segment 控制下面内容的 UI；而右边是一个所有内容列表的集合页，只不过通过 tab 聚类了而已。第一件事应该想到的是如果需要采用右边的排列形式就必须要控制 tag 的字数；然后由于右边的 tag 占据了推荐贴的位置，导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的，图右的优势在于，由于竖向排列 tag 可以让一个屏幕显示更多的 tag，可以让用户更方便的定位内容，比如外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜，而且外卖产品的左侧 tag 一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便（京东和淘宝电商类平台也是类似的）。但是比如今日头条，新闻类客户端只能采用左边的这种形式，因为新闻类客户端是需要用户长时间沉浸的，比如用户选中一个「体育」的 tag 之后一般要沉浸的看好久好久，用户需要沉浸在这个 tag 下的内容中，那这个时候显然用右边这种设计方式让 tag 常驻屏幕左侧是不合适的。再来看第二个例子，就是 UI 应该会随着内容而进行调整和优化：这里举一个唱吧的例子，唱吧从7.0到8.6之间做了三次改版，大家可以看到，唱吧团队几乎是损失了屏幕效率来加大了间隔和突出了歌名，这是为什么呢？这是因为页面承载的关键任务不同，大家对比着7.0时候和8.6时候的 UI样式，正好是今天快手和唱吧的对比：大家会发现，其实这个页面，快手和唱吧承载的内容都是消费转化，都希望用户点击进去消费内容，但是两款产品做了截然不同的 UI风格，原因是什么呢？快手在这个页面，其实承载的关键任务是：「迅速让用户找到感兴趣的点」，它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身，比如第一张图是一个人在打高尔夫，右边是一个工人，然后第二排左边是一个游戏的镜头，右边是一个传递正能量，大家可以很方便的通过图片识别里面的内容，用户更沉浸更聚焦的去选择自己喜欢的，点击进入消费就可以了。但是唱吧的视频截图其实是不能识别里面内容的，大家可以看到，第一张图是一个妹子，第二张图是一个妹子，第三张图还是一个妹子，那用户点击进去的动力在哪儿了？除了这个照片长相之外，更多的其实是文字决定的，是这个人唱的这首歌的歌曲名是不是我喜欢的，或者是这个演唱者的歌手等级。所以基于这种更深层次的逻辑，唱吧和快手两款产品的这个页面都是为了促进消费转化，但是 UI 长相上完全不同。我们看第三个例子：同样组件下，选择不同的交互方式，也会使得效果完全不同，比如现在有一个 UI页面，主要由一个 tab（iOS叫segment controlled）组件控制下面的内容，长这样：我先假定一个前提：这个 app 中的这个组件不支持横划，只支持点击切换。好了，现在我假设这是一款已经稳定运营了一年的产品，为了说明问题，我假设一个理想数据：假设每天有20W 的 uv 访问这个页面，其中分流情况是：10Wuv消费「推荐」下的内容2Wuv消费「生活」下的内容1Wuv消费「段子」下的内容3Wuv消费「美女」下的内容4Wuv消费「游戏」下的内容这时候，为了优化交互行为，有一天决定把这个 tab组件从不可横向划动改成可以划动的（并且告诉用户这里可以滑动了），然后给你一次机会重新排列这五个 tab 顺序，你会怎么做呢？最简单的办法当然是把五个 tab 按照用户消费意愿逐一排列，即：「推荐、游戏、美女、生活、段子」。这样排列当然没有任何问题，但是还有没有更优解呢？我给出的解决办法是这样的，大家评判一下：按照用户的消费量，「游戏」是消费量第二的一个 tab，毫无疑问我会把它排在第二项，这样可以刺激用户划动行为，然后「美女」是消费量第三的，我会把它放在第四位，这时候我会把「段子」和「生活」这两个消费率最低的 tab 分 AB test 做两个版本放在第三和第五位拿去测，以判断之前的「段子」和「生活」是由于自身内容不够优质，还是之前交互成本太低导致的数据较差：最后我们来看第四个例子：比如一个 app，他的 UI 如下图所示的这个样子。现在假设在运营和市场团队不做任何努力的情况下，单从产品交互的角度，能不能优化上面这个版块的点击率？首先我们来分析一下页面架构：如果我们认为，不管是点击右上角的「>」，还是点击留个圆形入口都算完成转化的话，我们现在的这个红色的 UI组件，入口位置一共有7个。根据长尾理论，如果我们把这个圆形入口从6个扩展到比如九个，是不是一定对转化率有正向影响？答案并不一定：为什么呢？因为主要是这样的改动会带来一个未知的泳道横划交互，它会产生一定的影响，如下图所示。用户看到这个泳道之后可能出现三种行为：用户完全不滑动——那入口就从6个变成了6.5个，别的没有变量影响。用户滑动看完了之后，点击某一个或者左上角的「>」进入——这是我们想要的转化用户滑动看了这些圆形入口之后松手，就是不点击进去——这是我们不愿意看到的结果想到这里，那为什么我们不能让用户直接滑动之后松手就跳转呢？想到这里，所以优化方案如下图所示，给与用户一个 x轴区间，滑动手势操过那个区间则告诉用户你现在松手默认跳转，用户不愿意跳转也可以回划，只要不足这个 x区间就给与用户自主选择的机会：我之前在上家工作的时候，我们把6个圆形入口变成了10个，然后用这个「松手跳转」的交互把单元模块的穿透率从21%提升到了31%，这是一个实战当中的真实例子。当然了，请大家再思考这样的一个问题：一个页面的流量就这么大，一个地方涨了11%，那势必别的地方就会相应的损失11%。一般情况下 app 首页承担着80%以上的分流工作，根据流量漏斗来看的话每一次引流都会导致其他模块的数据下降，所以设计师们应该要根据运营策略和公司大的产品 OKR 来合理选用合适的交互组件，以达到想要的目的，还是那句话：「小孩儿才分对错，大人只看利弊。」三、从交互的维度量化用户体验移动互联网产品设计中，尤其是在中国的 app 产品，有两大分歧阵营：「扁平」阵营表示了，我们需要产品足够扁平，最好就是三次交互可以触达所有 app 界面：「简洁」阵营也表示了，我们需要页面信息足够简洁，最好一个页面只完成一个核心任务：双方你来我往，谁也说服不了谁，如下图所示，「简洁」阵营反驳「扁平」阵营说：你们一点都不遵守席客定律，层级扁平是扁平了，但是相应的页面信息变得越来越多，给用户呈现的干扰就越来越多，用户做出决定的时间也越来越多，所以你们「扁平党」不行。这时候「扁平」阵营也找到了反驳的论点，他们说你看你页面足够简洁了，但是页面层级就很深啊，交互成本这么高，每一次都伴随流失，可用性这么差，你们还有理了？所以「简洁党」你们才不行。中国的互联网产品，很难做到既简洁又扁平，这个问题的根源在于永远有那么多信息需要呈现，永远有那么多功能需要添加，这个是中国的激烈市场竞争导致的，并不是说中国的产品就不如国外的好（我的哥哥之前在 Facebook 现在 Airbnb 工作，他经常感叹道国外的互联网产品到中国来真的都得死…）我想要讨论的是，面对中国现在互联网产品市场现状，如果一款产品非要你站队上面两派阵营，你会选哪一派？我现在的选择是「扁平党」，因为用户面临一款眼花缭乱的 app，如果是经常使用，缺功能布局信息架构很少改动的前提下，早晚也会习惯和适应的，但是如果一些核心的东西不能第一时间暴露在用户眼中，很有可能用户就不知道你有这种功能。这个就是为什么我们设计经常会说这个产品经理傻逼吧，怎么什么东西都想展现出来，这一堆东西找个入口集合收起来页面多干净多清爽多好看。我早年间也是和诸位一样的观点，但是现在我越来越觉得，界面清爽了，你的大功能 feature 因为设计隐藏没有被发现，不是设计开发测试都白做了么，说好的 ROI 在哪里？我们大家都是互联网从业者，不管看到这篇文章的你是一位设计、产品、还是开发、测试、运营人员，我们都明白用户体验这个词是由 N多维度综合而成的一个过程性评价，它和方方面面都有关系。那既然是这么专业且牵连甚广的一个名词，我们真的就没有办法去量化评价它了吗？永远不要忘记，用户体验是个过程，而我们每个人也都是用户本身。在这里我提供一种普通用户维度的比较好用的用户体验评估方法是「穷举分析用户行为路径」。比如你是一款外卖产品的设计师，那么用户在不同产品模块下订一个外卖的流程路径大概有多少种，都穷举出来。比如你是一款在线演唱类的产品设计师，那么用户在产品中完成一首歌需要的用户路径到底有多少条，穷举所有路径之后一一优化，让路径变得更加扁平，或许是一个最「笨」但是有效的方案，怎么优化呢？用淘宝消息页举个例子：淘宝消息页上面有「交易物流」、「通知」、「互动」三个 tab，这时候我们假设一个用户三个按钮下面都有消息，用户想要看完这三个消息大概需要几次交互？答案是至少6次：「点击第一个进去 – 返回 – 点击第二个进去 – 返回 – 点击第三个进去 – 返回」，这样的交互显得呆板且冗长，淘宝团队巧妙的把三个内页集合成一个页面的三个 tab 形式，大大缩短的交互成本，这就是所谓的「把用户路径变得更扁平」：大家在使用很多产品的过程中，多多留心就会发现原来细节里面总有魔鬼。欢迎关注作者的微信公众号：「SeanyDesign」

2022年01月26日
129 阅读
0 评论
0 点赞

2022-01-25

使用docker-compose部署前端应用公司测试服务器都使用docker compose 进行应用部署，之前没接触过，但是有不少项目在使用该方式，对相关的部署机制及命令做了简单了解后，开始尝试将近期开发的一个前端应用部署到测试服务器上部署目录：/root/zhuzl/monthly-report-ui/,该目录下有两个目录：一个 dist 为打包后的前端工程文件；一个 nginx为部署相关的目录。将打包后的文件上传到dist目录。在 nginx 目录添加如下文件：nginx.confuser nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #underscores_in_headers on; server { # listen 443 ssl; listen 80; server_name localhost; # ssl_certificate /usr/local/nginx/conf/server.crt; # ssl_certificate_key /usr/local/nginx/conf/server.key; root /usr/share/nginx/html; location /api/ { proxy_pass http://xxx/api/; proxy_redirect off; proxy_ignore_client_abort on; proxy_connect_timeout 600; proxy_send_timeout 600; proxy_read_timeout 600; proxy_pass_request_headers on; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } }monthly-report-ui-docker-compose.ymlversion: '3' services: monthly-report-ui: #build: # context: . # dockerfile: Dockerfile image: nginx #image: rookiezoe/nginx #image: crunchgeek/nginx-pagespeed volumes: #- ./server.key:/usr/local/nginx/conf/server.key #- ./server.crt:/usr/local/nginx/conf/server.crt - ./nginx.conf:/etc/nginx/nginx.conf - ../dist:/usr/share/nginx/html #- ../helper:/usr/share/nginx/html/helper #- ../api-doc:/usr/share/nginx/html/api-doc ports: - "40001:80" #links: # - hydra #depends_on: # - hydra #environment: # - CONSOLE_VERSION=1.2 command: /bin/bash -c "exec nginx -g 'daemon off;'" networks: default: external: name: dev_oauth 安装以上方式准备好后，进入 nginx 目录，使用如下命令启动或停止应用：# 停止服务 docker-compose -f monthly-report-ui-docker-compose.yml down # 启动服务 docker-compose -f monthly-report-ui-docker-compose.yml up &服务启动后，即可使用http://<SERVER-IP>:40001访问应用本示例配置文件信息：monthly-report-ui.zip 以下内容已加密，请输入密码查看：

2022年01月25日
64 阅读
0 评论
0 点赞

2022-01-24

此内容被密码保护加密文章，请前往内页查看详情

2022年01月24日
2 阅读
0 评论
0 点赞

2022-01-24

此内容被密码保护加密文章，请前往内页查看详情

2022年01月24日
1 阅读
0 评论
0 点赞

2022-01-21

2022年01月21日
146 阅读
0 评论
0 点赞

2022-01-21

2022年01月21日
199 阅读
0 评论
0 点赞

2022-01-21

自动化项目部署系列：①环境准备以前的项目有基于 devops 的方式来实现项目的开发、测试、上线部署，零零散散在带团队的过程中也有过一些尝试，但是一直没时间系统性的实践过。本次新购一台云服务器，准备进行一次实践。服务器在腾讯云上买的4H8G5M的配置，在这一台上部署相关的环境可能会很吃力，不过咱们也就基于学习研究的目的，够用就行。一、解析泛域名到云服务器系统安装完毕，为便于后续对外提供服务，我们先解析一个泛域名到这台服务器上，我注册的域名都在DNSPOD上管理，所以就在DNSPOD上配置了:解析配置好后，*.test.wljy.xyz都将被解析到 110.40.150.131 这个IP.二、初始配置服务器添加普通权限用户此处添加 zhuzl 用户，并为该用户设置登录密码：[root@VM-16-6-centos ~]# useradd zhuzl [root@VM-16-6-centos ~]# passwd zhuzl Changing password for user zhuzl. New password: Retype new password: passwd: all authentication tokens updated successfully.将用户添加到soduers/etc/sudoers文件添加写权限[root@VM-16-6-centos ~]# chmod +w /etc/sudoers编辑 /etc/sudoers[root@VM-16-6-centos ~]# vi /etc/sudoers找到 root ALL=(ALL) ALL 并在其下一行添加如下信息：zhuzl ALL=(ALL) NOPASSWD: ALL调整后的效果截图：取消/etc/sudoers 的写权限[root@VM-16-6-centos ~]# chmod -w /etc/sudoers创建数据目录并授权[root@VM-16-6-centos /]# mkdir /wldata [root@VM-16-6-centos /]# chown -R zhuzl:zhuzl /wldata/ 切换为普通用户[root@VM-16-6-centos /]# su zhuzl使用普通用户执行后续的安装操作，相关操作见后续章节。

2022年01月21日
121 阅读
0 评论
0 点赞

2021-12-29

初入职场注意事项今天一个前不久离职的同事找到我聊聊天，刚加入了一家新公司，很多东西都不懂，同事关系处理的不是很好，之前经常看我的文章，想知道有没有什么技巧，可以更快学到东西，不用依靠同事，快速获得领导的认可。聊着聊着发现还真可以总结几点初入职场，经常犯的小错误，第一就要属爱当伸手党，有的时候爱向人请教，看上去是一个好习惯，但实际上请教的时候也要分请教的技巧，你不能什么不知道的都问，你应该经过思考以后提问。比如说你不会做一个PPT，你不能问对方说这个PPT应该怎么做呀，更好的提问方式是，这个PPT我想这么做，12345你帮我看看对不对，这样对方会比较容易愿意给出你指导，因为你是经过思考过的，而不是在一片空白的情况下，所有的空需要别人帮你填满。这种伸手党的行为是不可取的，职场不是学校，同事和领导没有义务替你回答所有的问题，替你把人生的空填上，而你什么都用疑问式的提问，很容易给别人留下什么都不懂，自己不爱动脑子的印象。第二，“我是来学东西的”，通过降低自己的身价来获取工作机会。比如说经常有人来跟我面试的时候说，我就是来学习的，只要给我这个学习机会，我什么都愿意做。看似这样很诚恳的发言，其实并不能帮他争取到工作机会，因为在我的视角里，我会这么判定这个人，他对自己的价值没有认知。也就是他提供不出与这个工作岗位匹配的价值。我开的不是学校，我开的是公司，我需要有人来干活儿，我愿意付他匹配的工资，只要他能把活干好，而不是找一群免费劳动力，我反而还要教他，浪费我的时间。刚入职场，一定要区分清楚职场跟学校之间的差别，建立自己的价值，用自己的价值去交换，而不是降低自己的身价。愿意给你这样工作机会的环境，也不是什么好环境，只是想占你便宜。最后说说获得领导的认可，我在一家公司的时候，我的一位领导跟我说了一句话，我一直记忆犹新，他说，向上管理，就是“管理好领导的期望”。这句话我默默记住了很久，后来过了两年才领悟这个意思。不是把一件事儿做完了，完成任务了，就交差了。留给领导去检查去吧，他提了意见我再改，很多人都是这样干的，领导就是你的免费改卷机器。后来改稿越来越多，领导累他也累。接收了一项工作任务，首先是要弄清楚，自己的领导在期待什么，他脑袋里对这件事情的蓝图是怎样的。然后需要做好反馈，她在什么点上需要了解情况，在什么点上她希望被你邀请介入，在什么点上觉得他应该听一次汇报，你得判断得出来这个节奏，然后再每一个期待的点上向领导进行反馈，最后交出的答卷再检查一遍是不是符合领导交代的要求。没有这个反馈的节奏，你就会导致你的上级对你失控，他对你一旦产生失控感，信任度就会下降，不安全感就会上升。以上内容来自老同事【文子】的朋友圈分享

2021年12月29日
103 阅读
0 评论
0 点赞

2021-12-29

王小波的计算机水平有多好？转载自：https://www.zhihu.com/question/20964366/answer/95202867作者：姚勇今天逛知乎的时候，偶然看到王小波外甥，原水木年华成员，《QQ 炫舞》创始人——姚勇先生的一篇回答，讲述了他回忆中王小波在编程领域中的造诣，看完对王小波有了新的认识，现分享给大家看下。下面是正文：以下文字都是我本人写的。为了让阅读方便，减少模糊性。我在文中以第三人视角描述。而不用 “我舅舅 “，” 我姥姥 “，” 我大舅舅 “，” 我小舅舅 “之类的称呼。这是一个十几年软件工程师的习惯而已。我舅舅是王小波，我是个禁不住人肉的老百姓，资质平庸。王小波一篇《我是怎样做青年思想工作》的杂文在我青年单身适龄的年代，给我个人做了最大程度的广告，算是他老人家留给我最宝贵的遗产之一。除此之外，还有他那台用了很久的 PC，在他去世前一年送了我。他是汇编高手，自己用汇编写了 DOS 下的汉字输入法。输入法有个功能，可以加 4 声。一般拼音输入法没有这功能，这需要普通话读音正确的使用者，90 年代总共也没几种汉字输入法。看过他用自己输入法打汉字，速度几乎和盲打英文一样。那时候我大学，正在疯狂苦练吉他，并没有弄懂他用了何种技术。虽然我从小学也用 Z80 和 APPLE II 做些机器码编程做游戏，但到了中学为了高考，计算机就荒废了。他人生最后几年，WINDOWS 3.2 开始普及，然后是 WIN95。他开始从 DOS 转向 WIN32 SDK 编程。最终非常任性地熬夜苦干了很长时间，把输入法转为 WIN32 SDK 在 WINDOWS 下正常工作。当时 WINDOWS 已经有不少汉字输入法，尤其到了 WIN95 时代，他这么做也只是出于兴趣而不是在 DOS 时代的必须。就 WIN32 SDK 我们还讨论过一些。那时候 win32 sdk 真的是很难用。主要是互联网还没有（我是 96 年后用上的），资料很少，匈牙利命名法陌生。WIN32 的体系和 DOS 大相径庭，全部都很陌生，而且完全抛弃了 DOS 那套东西。所有 90 年代 DOS 底层程序员向 WIN32 的迁徙都是一部血泪史。他人生最后一年，多媒体开始普及。光驱，声卡，2D 加速卡普及。95-96 年他开始和我合计做多媒体出版。原因现在想起来很悲伤 ------ 他的书很难在大陆出版，他不得不想办法让他的作品能够让更多人看见，而平时维持生计，只能忍着严重的痔疮，每日给各种杂志写杂文稿件。多媒体的兴起，让他感觉也许利用他的技术优势，自行制作电子出版物。配上插图，音乐，用电子书籍方式可以让自己作品为大众所见。他给我看了已经制作了一部分的 DEMO，就和现在用 Micromedia 多媒体制作软件制作的电子多媒体制品很像。电子书内容是黄金时代，有图案的背景，按空格可以翻页。同时有音乐，好像偶尔还会有一点动画的特效（我记不清了）。但当时的 DEMO 完全是他自己用 WIN32 写的 EXE 可执行程序，他那是从 WIN32 SDK 移植输入法时，基本掌握了消息处理，GDI，窗口控制等方法。还有一些底层的 TRICK。我大学后和王小波比较近，那几年每周末都在他母亲家相聚。他母亲 5 个儿女，只有他 1 个人在国内。于是他就经常住在母亲家，怕老人一个人，是个大孝子。母亲家旁边有个筒子楼里 2 间房的小屋，公共厕所和水房，冬天暖气烧得极热。偶尔我会和他住一块，里屋是他的生活起居和写作桌，外屋很小只有张床，他弟弟的孩子和我偶然会睡外屋。印象最深的就是他烧普洱茶的电炉和玻璃茶壶，里面总是有极浓的茶水，下面沉淀着大量茶叶，估计熬夜就靠那个。目睹了他后半截人生（从我记事起到他去世，中间他出过很多年），感慨很多。王小波有个八叔，当时双手打算盘，无比聪明是个天才。年少夭折。王小波父亲因为搞逻辑学，引起毛泽东注意，被毛接见聊了一下逻辑学的学术相关问题。69 心脏病发独自倒在家中过世。王小波去世方式和他父亲一模一样，区别仅在更加年轻。王小波哥哥在受文革影响挖了 10 年煤，后来去美国博士念数理逻辑，解决了一个 100 多年未解的数理逻辑问题。最后的博士毕业论文自己系的教授搞不定，专门找了数学系的教授来看。毕业后他哥哥专心开饭馆挣钱养育 2 个女儿成人。准备财务自由后再著书立传。我的最大感慨是，留得青山在，不怕没柴烧。天才也好，资质普通如我也好，人都只有一个人生。王小波妈妈去年 92 岁，10 月刚去世，白发人送走了自己两个儿子，又过了十几年才走。之前得过癌症，靠自己毅力锻炼，恢复了。王小波去世后一年，王小波弟弟又突然去世。当时孩子都没敢告诉老人。老太太感觉不对，但又无法得知真相，只是和我说她的疑心。当时国内只有我一人，只能瞒着，不停劝慰老人没事。老太太喃喃说，“除死无大事，除死无大事啊” 。除死无大事。人生在世，碰到什么坎，都只会是你人生中一个普通的节点。时间一长，什么都会成为过眼云烟。留份宽心，也许这样导致目标感没有强到能和社会精英逐鹿。但只要有耐心，不怕挫折，假以时日，目标总会实现的。作为一个 42 岁还在以玩游戏看动漫为生活主体的大叔，保持健康和有活力地追求智慧和有趣，做自己热爱的工作，保持善良，做精神自由的人，是我从王小波的人生学到最重要的东西。希望每个喜欢王小波的人，都有自己充实和健康的身体和精神。（完）

2021年12月29日
21 阅读
0 评论
0 点赞

2021-12-19

使用WinSW.exe安装FRP为系统启动服务本机 FRP 所在目录：D:\greenSoft\FRP\frp_0.36.2_windows_amd64日常使用FRP，我们都需要使用命令行的方式启动，特此我准备了个startFRP.bat的启动文件：frpc.exe -c ./frpc.ini该方式可手工启动，但会打开一个命令行的黑窗口在桌面上，在使用电脑的过程中偶尔会由于误操作导致关闭了，根据以往在windows下使用nginx的经验，我们可以使用WinSW.exe这个小工具实现将FRP注册成系统服务即可，操作步骤如下：1、下载 WinSW.exe 文件到FRP所在目录2、在该目录下新建winsw.xml文件，文件内容如下所示：<service> <id>frp</id> <name>frp</name> <description>用frp发布本地电脑网站到外网</description> <executable>frpc</executable> <arguments>-c frpc.ini</arguments> <logmode>reset</logmode> </service>3、在命令行中使用 winsw install 安装为服务。执行该命令后会显示成功提示。4、进入windows 服务管理器，查看是否存在名称为frp的服务。

2021年12月19日
115 阅读
0 评论
0 点赞

2021-12-07

2021年12月07日
150 阅读
0 评论
0 点赞

2021-11-30

简单理解 Typescript 的配置文件 tsconfig.json TS 使用 tsconfig.json 作为其配置文件，他主要包括两块内容：指定待编译的文件定义编译选项一般来说， tsconfig.json 文件所处的路径就是当前 TS 项目的根路径。tsconfig.json 的配置项众多并且复杂。所有的选项可以参考官方文档：https://www.typescriptlang.org/zh/tsconfig 这里我们分析一个简单示例：{ "compilerOptions": { "module": "commonjs", "noImplicitAny": true, "sourceMap": true, "declaration": true }, "files": [ "app.ts", "foo.ts", ] }其中， compilerOptions 用来配置编译选项， files 用来指定待编译文件。这里的待编译文件是指入口文件，任何被入口文件依赖的文件。也可以使用 include 和 exclude 来指定和排除待编译文件：{ "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] }下面简述 compilerOptions 中的选项配置，这些配置简单来说就是影响整个编译的过程和编译的结果。module - 生成的 Javascript 模块形式：none、commonjs、amd、system、umd、es6、es2015 或 esnextnoImplicitAny - 存在隐式 any 时抛错（默认为 false）sourceMap - 生成 map 文件（默认为 false）declaration - 生成对应的 .d.ts 文件 (默认为 false)

2021年11月30日
307 阅读
0 评论
0 点赞

2021-11-05

win11资源管理器菜单栏+右键菜单改回win10风格一、上方菜单栏1、win + R 输入 regedit 打开注册表2、依次展开（或地址栏复制）HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Shell Extensions3、右击 Shell Extensions 创建项key命名为 Blocked (如果没有)4、打开 Blocked ，右击空白处，新建字符串值。将值/名称命名为：{e2bf9676-5f8f-435c-97eb-11607a5bedf7}5、重启电脑注：如需调回至win 11 explorer，直接删除blocked 文件夹二、右键菜单1、win+r 输入 regedit 打开注册表2、依次展开（或地址栏复制）HKEY_CURRENT_USER\Software\Classes\CLSID3、右键CLSIDkey 然后新建项Key ，重命名为{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}4、右键此key {86ca1aa0-34aa-4e8b-a509-50c905bae2a2}, 新建一个key并重命名为 InprocServer325、打开 InprocServer32 ，右侧窗口双击打开 default 文件，回车保存。(设置空白text数据)6、关闭注册表，重启电脑或者使用如下修改注册表批处理语句：reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve taskkill /f /im explorer.exe & start explorer.exe若需还原把 reg add 改成 reg delete 即可

2021年11月05日
103 阅读
0 评论
0 点赞

2021-09-06

如何防止他人恶意调试你的web程序前言看到社区很多都在讨论如何调试,如何高级的调试,以及一些调试的奇技淫巧 ,今天我想和大家聊聊, 怎么禁止调试,禁止他人调试我们的程序为什么会有这篇文章呢,源自一次我寻找盗版电影的遭遇,一次好奇心的驱使下,由于很多这种平台都是只做搬运,不做存储,因为存储盗版电影向他人提供是违法的,特别是那种刚出的新电影! 当时好奇想通过看某站的控制台,想了解一下他们是怎么是通过啥接口,怎么请求,请求来的格式啥样的,抱着这样的好奇心,开始了我的奇妙之旅... 看完本篇文章你将学会我无法断定你能学到什么,但是以下是我希望你能从本篇文章中学到的:1.如何简单的防止你的程序被他人恶意调试2.逆向思维学会如何更好的调试具体实现防止调试的方法,这里我们主要是通过不断 debugger 的方法来疯狂输出断点,让控制台打开后程序就无法正常执行我们都知道 debugger 只有在控制台被打开的时候才会执行,所以后面的所有方法都是围绕着这一特性来进行,废话不多说,我将通过以下几个案例向你们展示道高一尺魔高一丈的道理,先上代码:方法一:(() => { function block() { setInterval(() => { debugger; }, 50); } try { block(); } catch (err) {} })(); 通过上方的代码我们可以看到,在页面中打开控制台后,会有以下结果:需要在这里说明以下几点:程序被 debugger 阻泄了,我们无法像以往一样在 Source Tab 中的对应 js 代码处添加断点调试,无法调试程序的执行逻辑.在程序异常复杂且被混淆后的代码是异常难读的!通常我们会在 source 的左边加上 breakpoint 来让程序每次走到加点的地方停下来,以便让我们查看一些变量的值或是步骤的流程逻辑(如下图所示)我们都知道,第一次打开控制台是看不到 Network tab 中的任何请求的,所以我们想通过 Network tab 来查看网页都做了哪些请求,也是看不到的,当我们打开控制台就会出 debugger 阻挡我们,我们可以通过下面的解决方法来处理,或者是用抓包工具来查看具体的请求大家可以先不看解决方法,想想如果是你,这个时候怎么突破这个屏障呢? 第一次遇到这种情况我也是很懵,不知道咋处理,后面发现问题简直不要太简单,我们可以带着疑问来看: 对于第一个示例,我们如何解决?(绕过它) 答案是: 禁止断点可以看到很简单,在 Chrome 控制台的 Source Tab 页点击 Deactivate breakpoints 按钮或者按下 Ctrl + f8(如下图所示)。但是对于控制台不熟悉的小伙伴,很难会想到这里去.但是,难道这篇文章就这样结束了?那我可顶不住小伙伴们的 "就这?" 其实,上面的解决方法并没有帮我们解决根本问题,我们需要做的是调试,上面虽然把debugger都去掉了,但是我们也无法在通过点击每一行代码左边的行号添加 breakpoint 了,所以根本性的问题,并没有解决,只是去除了那碍眼的疯狂 debugger,我们还是得另辟蹊径方法二:对对应的代码行,通过添加 logpoint 为 false，然后按回车后刷新网页，发现成功跳过无限 debugger,于是我们就可以愉快的自由调试了~对应的还有一种方法即通过 add script ignore list 来添加需要忽略执行代码行或文件可以看到,我们也可以通过删除 script ignore list 里已添加的忽略代码,恢复初始状态但是,你这么聪明,那人家不得想想对策?对于上面的第一个方法将setInterval(() => {debugger;}, 50);写在一行中,你即使通过添加logpoint为 false,也没用,仍然是疯狂 debugger,即使你可能想到,通过左下角的代码格式化,来格式一下setInterval(() => {debugger;}, 50);将它变成多行的,也是没用的,仍然会在刷新后重新弹 debugger(() => { function block() { setInterval(() => {debugger;}, 50); } try { block(); } catch (err) {} })();对于第二个方法,我们对代码进行如下改造(() => { function block() { setInterval(() => { Function("debugger")(); }, 50); } try { block(); } catch (err) {} })();我们可以通过将debugger改写成Function("debugger")();的形式,来应对;Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件,哈哈~对方表示好无奈于是会有以下结果这无限套娃,真够狠的,我们要坚信正义最后总会胜利,不能给想非法调试我们程序的人机会,所以我们要把各种情况都考虑周全,可以说这种方法是最恨的,但是这还不算完~ (好家伙~ 想非法调试我程序,那你就得战胜我)强化以上方法上面的代码由于没有加密混淆,多少可能还是会被别人读一些,那么我们加密混淆看看是啥样的好家伙,你这咋读?eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\\b"+d(a)+"\\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));格式化后的样子我们继续对代码进行改造,让对方尽量的难以识别我们的代码将 Function("debugger").call() 改成 (function(){return false;})["constructor"]("debugger")["call"](); 并且,添加条件,当窗口外部宽高,和内部宽高的差值大于一定的值,我把 body 里的内容全部清空掉,看你还能不能操作我的按钮啊啥的~哈哈哈需要特别说明的是 : 像 toG 的项目或者是一些为了保护自己的版权又或者是一些比较敏感的项目,出于安全的考虑在部署到生产环境后最好是不让别人调试的,当然,前端所做的也就那么一些,需要前后端一起配合,便可以很好的对项目或者数据进行私密的保护最后: 附上这份未混淆的来之不易的的代码(记得混淆后使用哦~) 一定要记得点赞加关注~原创太不容易了.你可以把它当作你的工具函数,在需要不让别人轻易调试的项目中引用 (当然它仍然有很多漏洞,但是我们可以用类似的逻辑方法,变化出很多更复杂的限制,最暴力的甚至可以当控制台打开后就立马通过window.close();来关闭调试窗口),欢迎大家在评论区留下更好玩的方法~共同学习(() => { function block() { if ( window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200 ) { document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!"; } setInterval(() => { (function () { return false; } ["constructor"]("debugger") ["call"]()); }, 50); } try { block(); } catch (err) {} })();推荐一个调试页面的小技巧说了那么多的防止被人调试,那么最后也说一个本人觉得眼前一亮的调试样式的方法通过给 style 标签添加 style="display: block" , contenteditable 两个属性实现在页面中便捷的调试样式复制下方代码到你的 html 文件中,玩一下~<!DOCTYPE html> <body> <div>来调试我吧~</div> <style style="display: block" contenteditable> body { background-color: rgb(140, 209, 230); color: white; } div { background-color: green; width: 300px; height: 300px; line-height: 300px; text-align: center; } </style> </body> 最后我所知道的禁止调试的方法就只有如上所述,但是肯定还有很多好玩的,小伙伴们可以在评论区留言,一起共同学习~最后抛出一个问题, 如何监测控制台是否被打开 (我上面提到的通过window内外高宽的差值其实可以通过独立调试窗口的方法绕过),网上找了一些方法,貌似都没用,感兴趣且有头绪,或者已经有方法的小伙伴可以小伙伴可以在评论下方说说自己的想法,{card-describe title="引用自"}作者：荣顶链接：https://juejin.cn/post/7000784414858805256来源：掘金{/card-describe}

2021年09月06日
62 阅读
0 评论
0 点赞

2021-07-14

在vue-cli3使用sass(scss)定义的全局样式及变量为统一风格及便于后续维护，在项目中常用的主色调、圆角、阴影相关的样式定义到一个全局变量文件中，常规的使用需要每个Vue组件中进行import,该操作会比较繁琐，经过了解后发现可以基于webpack的loader参数引入全局变量的方式来实现，相关实现过程如下所示：vue.config.jsmodule.exports = { // ... css: { // 为便于在Vue组件中使用，全局引入variables.scss中定义的变量 loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` } } } variables.css// base color $blue:#324157; $light-blue:#3A71A8; $red:#C03639; $pink: #E65D6E; $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; $theme: #004ca1; // ...vue 组件<style lang="scss" scoped> .btn-cursor { cursor:pointer; color: $theme } </style>

2021年07月14日
475 阅读
0 评论
0 点赞

2021-06-30

一个简单的自定义工作流设计器实现先瞅瞅产品提供的丑陋至极的原型效果再看看经过本人精雕细琢之后的惊艳效果Show me the code流程设计弹出层<template> <el-dialog width="760px" class="hkt-dlg-darkblue" :title="`流程设计：${formData.name}`" :visible.sync="isShow" destroy-on-close :close-on-click-modal="false"> <div class="dialog-wrap" v-loading="loading"> <div style="min-height:50vh"> <div class="info-block"> <el-row class="hkt-block-title"> <el-col :span="12"><div><span class="title-name">流程配置</span></div></el-col> <el-col :span="12" class="text-right"> <el-button type="text" @click="formModalChange('New', null)"><i class="el-icon-plus"></i> 添加审核节点</el-button> </el-col> </el-row> <div class="info-content"> <el-steps direction="vertical" :active="nodes.length"> <el-step v-for="(step, stepIndex) in nodes" class="step-item-wrap" :class="'step-item-signmodel-' + step.signModel" :key="step + stepIndex"> <div slot="title"> <div style="line-height:32px;heihgt:38px;"> <el-row> <el-col :span="12"> <span class="step-name" v-text="step.nodeName"></span> </el-col> <el-col :span="12"> <div class="step-item-oprations text-right"> <el-button size="mini" type="text" @click="stepSort(stepIndex, 'up')" v-if="stepIndex > 0"><i class="el-icon-top"></i> 上移</el-button> <el-button size="mini" type="text"@click="stepSort(stepIndex, 'down')" v-if="stepIndex < nodes.length - 1"><i class="el-icon-bottom"></i> 下移</el-button> <el-button size="mini" type="text" @click="formModalChange('Edit', step, stepIndex)"><i class="el-icon-edit"></i> 修改</el-button> <el-button size="mini" type="text" @click="removeStep(step, stepIndex)"><i class="el-icon-close"></i> 删除</el-button> <el-button size="mini" type="text" @click="addPersons(step, stepIndex)"><i class="el-icon-user"></i> 配置审批人</el-button> </div> </el-col> </el-row> </div> </div> <div slot="description"> <div v-if="step.approveNames.length === 0"> <span class="color-gray">暂未配置审批人员</span> </div> <div v-else class="step-item-content-wrap"> <div class="person-item"> <el-tag v-for="(person, personIndex) in step.approveNames" :key="person" disable-transitions @close="removePerson(stepIndex, personIndex)" closable>{{person}}</el-tag> </div> </div> </div> </el-step> </el-steps> <div v-if="nodes.length === 0"> <h3 style="padding-top:40px;font-weight:normal;color:#dedede;font-size: 22px; text-align:center"><p>当前流程暂未配置审核节点信息，</p><p>请单击右上角的“添加审核节点”按钮进行配置</p></h3> </div> </div> </div> </div> </div> <div slot="footer" class="dialog-footer-wrap text-center"> <el-button @click="isShow = false">取消</el-button> <el-button type="primary" :loading="submitting" @click="save">{{submitting ? '保存中': '确定'}}</el-button> </div> <step-form-modal :show.sync="formModalVisible" v-if="formModalVisible" :formData="currentRow" :mode="formMode" @callback="formCallback" /> </el-dialog> </template> <script> import stepFormModal from './stepFormModal.vue' export default { name: 'flowDesignModal', desc: '流程设计器', components: { stepFormModal }, props: { show: { type: Boolean, required: true, default: false }, formData: { // 适用于编辑 type: Object, required: false }, mode: { type: String, required: false } }, data () { return { loading: true, form: { }, nodes: [], formModalVisible: false, currentRow: null, currentStepIndex: null, formMode:'New', // New || Edit submitting: false } }, computed: { isShow: { get () { return this.show }, set (val) { this.$emit('update:show', val) } } }, created() { this.init() }, methods: { init () { if (this.formData) { this.getFlowNodes() // this.form = this.$hktUtils.deepClone(this.formData) } }, stepSort (index, type) { const steps = this.nodes if (type === 'up') { ;[steps[index], steps[index - 1]] = [steps[index - 1], steps[index]] } else { ;[steps[index], steps[index + 1]] = [steps[index + 1], steps[index]] } // 触发页面更新 this.nodes = steps.concat() }, async getFlowNodes () { this.loading = true const res = await this.$request.get(`/v1/manager/flow/node/listByFlowId?flowId=${this.formData.id}`) if (res.success) { this.nodes = res.data } this.loading = false }, // 添加或编辑流程节点 formModalChange (mode, formData, stepIndex) { this.formMode = mode this.currentRow = formData this.currentStepIndex = stepIndex this.formModalVisible = true }, formCallback (item) { // TODO 判断步骤名称是否已存在 if (this.formMode === 'New') { item.flowId = this.formData.id item.approveArray = [] item.approveNames = [] this.nodes.push(item) } else if (this.currentStepIndex >= 0) { this.nodes[this.currentStepIndex] = item this.currentStepIndex = null } }, addPersons (row, stepIndex) { const dialogProps = { multipleFlag: 'Y' } if (row.approveArray && row.approveArray.length > 0) { dialogProps.initRightUsers = row.approveArray.join(',') } window.hktCommon.selectUser(`配置 ${row.nodeName} 节点的审批人`, dialogProps, (res) => { row.approveArray = res.map(item => item.id) row.approveNames = res.map(item => item.name) this.nodes.splice(stepIndex, 1, this.$hktUtils.deepClone(row)) }) }, removePerson(stepIndex, personIndex) { this.nodes[stepIndex].approveArray.splice(personIndex, 1) this.nodes[stepIndex].approveNames.splice(personIndex, 1) }, removeStep(stepItem, stepIndex) { this.$confirm(`本操作不可恢复，确定删除该步骤（${stepItem.nodeName}）?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(() => { this.nodes.splice(stepIndex, 1) }).catch(() => {}) }, // 保存 async save () { const flowNodes = this.$hktUtils.deepClone(this.nodes) const existNodeNames = []// 用于校验名称是否重复 for (let i = 0; i < flowNodes.length; i++) { const flowNode = flowNodes[i] if (flowNode.approveArray.length === 0) { this.$message({ message: `审核步骤（${flowNode.nodeName}）至少需选择一个的审批人`, type: 'warning' }) return } if (existNodeNames.includes(flowNode.nodeName)) { this.$message({ message: `存在相同的审核节点名称：${flowNode.nodeName}`, type: 'warning' }) return } existNodeNames.push(flowNode.nodeName) flowNode.orders = i +1 flowNode.approveIds = flowNode.approveArray.join(',') } this.submitting = true // 执行保存入库相关操作 const res = await this.$request.post(`/v1/manager/flow/node/add`, flowNodes).catch(err => { this.submitting = false }) this.submitting = false if (res && res.success) { this.$emit('callback', flowNodes) this.isShow = false } } } } </script> <style lang="scss" scoped> .form-body-item { background-color:#fff; padding:10px; border-radius: 4px; margin-bottom: 10px; } .form-item-zones { border-bottom: solid 1px #DCDFE6 ; margin-bottom:20px; .block-title { font-weight:bold; display: inline-block; line-height: 36px; font-size:14px; } } .step-item-oprations { display: none; } .step-item-wrap { /deep/ .el-step__main { padding: 0 10px 10px; } } .step-item-wrap:hover { /deep/ .el-step__main { background-color:#F5F7FA; border-radius: 5px; } .step-item-oprations { display: block; } } .step-item-content-wrap { padding: 10px; } .btn-choose { margin-left:10px; vertical-align: middle; } .person-item /deep/ { display: inline-block; .el-tag { vertical-align: middle; position: relative; overflow: initial; margin-bottom:10px; .el-tag__close { padding: 2px; box-sizing: content-box; position:absolute; background-color: #D1E9FF; // display: none; top:-10px; right: -10px; &:hover { background-color: #1890ff; } } &:hover { .el-tag__close { display:block; } } } .el-tag + .el-tag { margin-left: 40px; &:before { content: '或'; position: absolute; left: -26px; color: #666666; } } } // 会签模式步骤的审批人之间是用和 .info-content /deep/ .step-item-signmodel-1 .person-item { .el-tag + .el-tag { &:before { content: '和' } } } .step-name { color:#101010; font-weight: bold; } </style> 步骤编辑弹出层<template> <el-dialog width="460px" class="hkt-dlg-darkblue" :title="(form.id ? '编辑' : '新建') + '步骤'" :visible.sync="isShow" append-to-body destroy-on-close :close-on-click-modal="false"> <div class="dialog-wrap"> <el-form ref="form" :model="form"> <el-form-item label="步骤名称" prop="nodeName" :rules="[{required: true, message: '请填写步骤名称', trigger: 'change'}]"> <el-input v-model="form.nodeName" style="width:250px"></el-input> </el-form-item> <el-form-item label="是否会签模式"> <el-switch v-model="form.signModel" :active-value="1" :inactive-value="2" active-text="是" inactive-text="否"></el-switch> </el-form-item> <el-form-item label="是否可办结"> <el-switch v-model="form.isOver" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch> </el-form-item> </el-form> </div> <div slot="footer" class="dialog-footer-wrap text-center"> <el-button @click="isShow = false">取消</el-button> <el-button type="primary" @click="save">确定</el-button> </div> </el-dialog> </template> <script> export default { name: 'stepFormModal', desc: '流程步骤表单', props: { show: { type: Boolean, required: true, default: false }, formData: { // 适用于编辑 type: Object, required: false }, mode: { type: String, required: false } }, data () { return { form: { nodeName: '', signModel: 2, isOver: 0 } } }, computed: { isShow: { get () { return this.show }, set (val) { this.$emit('update:show', val) } } }, created() { this.init() }, methods: { init () { if (this.formData) { this.form = this.$hktUtils.deepClone(this.formData) } }, save () { this.$refs['form'].validate(async (valid) => { if (valid) { this.$emit('callback', this.form) this.isShow = false } }) } } } </script> <style lang="scss" scoped> .form-body-item { background-color:#fff; padding:10px; border-radius: 4px; margin-bottom: 10px; } .form-item-zones { border-bottom: solid 1px #DCDFE6 ; margin-bottom:20px; .block-title { font-weight:bold; display: inline-block; line-height: 36px; font-size:14px; } } .step-item-oprations { display: none; } .step-item-wrap:hover { background-color:#D1E9FF; .step-item-oprations { display: block; } } .step-item-content-wrap { padding: 10px; } .btn-choose { margin-left:10px; vertical-align: middle; } .person-item /deep/ { display: inline-block; .el-tag { vertical-align: middle; position: relative; overflow: initial; .el-tag__close { padding: 2px; box-sizing: content-box; position:absolute; background-color: #D1E9FF; // display: none; top:-10px; right: -10px; &:hover { background-color: #1890ff; } } &:hover { .el-tag__close { display:block; } } } .el-tag + .el-tag { margin-left: 40px; &:before { content: '或'; position: absolute; left: -26px; color: #666666; } } } .step-name { color:#101010; font-weight: bold; } </style> 该组件涉及人员选择相关公共组件的封装，详细见分享一个在管理系统中一些公共组件的调用方式

2021年06月30日
232 阅读
0 评论
0 点赞

2021-06-30

2021年06月30日
71 阅读
0 评论
0 点赞

2021-06-30

记一次根据经纬度计算距离的项目实践近期公司接的公租房项目，在小程序模块中有用到离我最近的房源列表的功能，经过项目实践相关实现过程如下：功能演示PC后台配置小区位置：单击地图描点后打开如下图所示的描点对话框，描点选择后单击确定按钮返回经纬度信息：小程序中获取位置后调用接口显示距离：{lamp/}代码实现：管理后台描点Vue组件核心代码<template> <el-dialog width="95%" class="hkt-dlg-darkblue resource-modal" top="5vh" :title="title" :visible.sync="isShow" destroy-on-close :close-on-click-modal="false"> <div class="map-container" ref="mapContainer"></div> <div slot="footer" class="dialog-footer dialog-footer-wrap text-center"> <el-button @click="isShow = false">取消</el-button> <el-button type="primary" :disabled="!latitude" @click="pickedHandler">{{'确定'}}</el-button> </div> </el-dialog> </template> <script> export default { name: 'PickerQMapPositionModal', props: { show: { type: Boolean, default: false }, title: { type: String, default: '地图描点' }, dialogProps: { type: Object, reuired: true } }, data () { return { latitude: '', longitude: '' } }, computed: { isShow: { get () { return this.show }, set (val) { this.$emit('update:show', val) } } }, mounted () { this.init() }, methods: { init () { this.initMap() }, async initMap () { // if (!window.TMap) { // } await this.$hktUtils.loadJS('https://map.qq.com/api/gljs?v=1.exp&key=VQ6BZ-ZFSW6-H36SN-E7TZL-QZ6U6-O3F24') var center = new TMap.LatLng(28.239377,112.866161) //定义map变量，调用 TMap.Map() 构造函数创建地图 var map = new TMap.Map(this.$refs.mapContainer, { center: center,//设置地图中心点坐标 zoom: 15, //设置地图缩放级别 // pitch: 43.5, //设置俯仰角 // rotation: 45 //设置地图旋转角度 }); //初始化marker图层 var markerLayer = new TMap.MultiMarker({ id: 'marker-layer', map: map }); map.on("click", (evt) => { if(markerLayer.geometries && markerLayer.geometries.length > 0) { markerLayer.remove(markerLayer.geometries[0].id) } markerLayer.add({ position: evt.latLng }); console.log('evt.latLng', evt.latLng, evt) this.latitude = evt.latLng.lat.toFixed(7) this.longitude = evt.latLng.lng.toFixed(7) }) }, pickedHandler () { this.$emit('callback', { latitude: this.latitude, longitude: this.longitude }) this.isShow = false } } } </script> <style lang="scss" scoped> .map-container { width:100%; height:70vh; } </style> Java端计算距离核心代码package com.hkt.jianfa.rental.housing.manager.wx.util; /** * 根据经纬度计算距离的工具类 * * @author 朱治龙(i@zhuzhilong.cn) * @since 2021-06-29 16:22:18 */ public class DistanceUtil { //地球平均半径 private static final double EARTH_RADIUS = 6378137; //把经纬度转为度（°） private static double rad(double d) { return d * Math.PI / 180.0; } /** * 根据两点间经纬度坐标（double值），计算两点间距离，单位为米 * * @param lng1 第1个坐标的经度值 * @param lat1 第1个坐标的纬度值 * @param lng2 第2个坐标的经度值 * @param lat2 第2个坐标的纬度值 * @return */ public static double getDistance(double lng1, double lat1, double lng2, double lat2) { double radLat1 = rad(lat1); double radLat2 = rad(lat2); double a = radLat1 - radLat2; double b = rad(lng1) - rad(lng2); double s = 2 * Math.asin( Math.sqrt( Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2) ) ); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; return s; } /** * 传入逗号分隔的两个经纬度的值计算巨鹿 * * @param position1 第一个经纬度 * @param position2 第二个经纬度 * @return */ public static double getDistance(String position1, String position2) { if (position1.contains(",") && position2.contains(",")) { String[] point1 = position1.split(","); String[] point2 = position2.split(","); return getDistance(Double.parseDouble(point1[1]), Double.parseDouble(point1[0]), Double.parseDouble(point2[1]), Double.parseDouble(point2[0])); } return 0; } /** * 将距离数值转换为前端显示所需的字符串信息 * * @param distance * @return */ public static String decodeDistance(double distance) { if (distance < 1000) { return "<1km"; } else if (distance / 1000 > 100) { return ">100km"; } else { return new Double(distance / 1000).intValue() + "km"; } } } 业务逻辑类中调用DistanceUtil方法计算距离：小程序中获取位置后，将经纬度信息传给后端计算距离及排序核心代码如下：uni.getLocation({ type: 'gcj02', success: (res) => { this.searchForm.sort = 'distance' this.searchForm.location = res.latitude + ',' + res.longitude this.getProjects() }, fail: (err) => { this.getProjects() } })

2021年06月30日
142 阅读
0 评论
3 点赞

2021-06-02

2021年06月02日
161 阅读
0 评论
0 点赞

2021-05-26

node安装node-sass失败的处理方案安装 node-sass 的时候总是会各种不成功，大部分安装不成功的原因都源自这里，因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com上面，而这个网址在国内总是网络不稳定，所以我们需要通过第三方服务器下载这个文件。方法一：使用淘宝源npm config set sass_binary_site=https://npmmirror.com/mirrors/node-sass/ npm config set phantomjs_cdnurl=https://npmmirror.com/mirrors/phantomjs/ npm config set electron_mirror=https://npmmirror.com/mirrors/electron/ npm config set registry=https://registry.npmmirror.com这样使用 npm install 安装 node-sass、electron 和 phantomjs 时都能自动从淘宝源上下载。方法二：安装cnpm >>> 也是淘宝源的做法npm install -g cnpm cnpm install这样也可以成功安装node-sass方法三：使用VPNnpm config set proxy (http://127.0.0.1:1080)此处是VPN的代理地址 npm i node-sass # 下载完成后删除 http 代理 npm config delete proxy

2021年05月26日
133 阅读
0 评论
0 点赞