宅科技 - 科技,宅出新生活

搜索
热搜: 活动 交友 discuz
如果你还没有论坛的账号,赶快注册吧!
立即注册

合作站点账号登陆

快捷导航
查看: 7495|回复: 40

[知识点] 手机+PC双屏显示:android端即时预览PC端修改的代码

[复制链接] [提交至百度]

107

主题

110

帖子

3268

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3268
发表于 2018-5-8 10:36:05 | 显示全部楼层 |阅读模式
前言

如何让手机充当第二个显示器,用来随时预览PC端的代码?前一阵子写代码时,一直在琢磨这个问题。

因为办公室电脑配置低下,且只配备一个17寸显示器,每当反复调试预览网页时,都要保存,刷新。用过

brackets即使预览功能,总是不太习惯。于是就想到手头的高配android,完全可以当做第二块屏。


原理

当我修改*.html/*.css/*.js时,按下Ctrl + S的瞬间,文件监控就捕捉到了这个变动,于是执行adb命令,向android发送浏览器请求,打开本机localhost。


方法文件监控:node.js fswatch

网上扫了一眼监控程序,没有自己想要的。看了手头现有的python、node.js,网上给的python代码好怪异,还是使用node.js,最初想的是把网页服务器与监控模块写到一个文件中,后来试了试,没搞定,就单独写了。

watch.js

  1. 'use strict';
  2. var exec = require('child_process').exec;
  3. var fs = require('fs');

  4. var count = 0;
  5. var time = 0;
  6. var phoneScreenTime = 30;
  7. //手机暗屏的时间,我的是30秒。后面要根据这个加点亮屏幕的判断
  8. var id, cmd;


  9. setInterval(function() {
  10.     time++;
  11. }, 1000)
  12. //每秒自增的time,为每次发生更改时,执行操作的间隔,用来判断手机是否黑屏的依据


  13. fs.watch('./resume/', { persistent: true, recursive: true }, function(event, filename) {
  14. //recursive参数作用是fs.watch的监控子目录,不支持linux系统
  15. //./resume/ 是我监控的文件目录

  16.     count++;
  17.     if (filename && count == 2) {
  18.     //此处count==2的意味为,只执行一次操作。
  19.     //因为nodepad++修改文件后保存,是先删除文件所有内容,再保存修改后的内容,相当于更改了两次文件的状态。(不晓得为什么)

  20.         if (time <= phoneScreenTime) {
  21.             cmd = '1.cmd';
  22.         } else {
  23.             cmd = 'screen.cmd';
  24.         }


  25.         //exec只能call,我贴上完整的命令会报错,不知道为什么
  26.         exec('call ' + cmd, function(error, stdout, stderr) {
  27.             if (error !== null) {
  28.                 console.log('exec error: ' + error);
  29.             }
  30.         });

  31.         //清除时间、文件二次更改
  32.         count = 0;
  33.         time = 0;
  34.     }
  35. });

  36. console.log('watcher is running');
复制代码

控制android打开指定网页:cmd + adb两个watch.js调用的cmd

购买主题 本主题需向作者支付 12 金币 才能浏览



上一篇:Android PC投屏简单尝试
下一篇:最全手机投屏开发原理分析以及源码下载-手机投屏到电脑
回复

使用道具 举报

0

主题

2

帖子

11

积分

吃瓜群众

Rank: 1

积分
11
发表于 2018-7-17 22:22:08 | 显示全部楼层
感谢楼主分享:)
回复 支持 反对

使用道具 举报

0

主题

1

帖子

10

积分

吃瓜群众

Rank: 1

积分
10
发表于 2018-7-19 11:47:20 | 显示全部楼层
感谢楼主
回复

使用道具 举报

0

主题

17

帖子

517

积分

顶级大神

Rank: 4

积分
517
发表于 2018-8-18 15:43:00 | 显示全部楼层
感觉好高级的样子
回复 支持 反对

使用道具 举报

0

主题

1

帖子

3

积分

吃瓜群众

Rank: 1

积分
3
发表于 2018-8-21 16:53:45 | 显示全部楼层
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

匿名  发表于 2018-8-30 15:37:22
看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具

0

主题

2

帖子

5

积分

吃瓜群众

Rank: 1

积分
5
发表于 2018-9-13 09:54:29 | 显示全部楼层
很好的方法,谢谢分享
回复 支持 反对

使用道具 举报

0

主题

19

帖子

19

积分

吃瓜群众

Rank: 1

积分
19
发表于 2018-9-24 01:51:31 | 显示全部楼层
咔咔咔咔咔咔
回复 支持 反对

使用道具 举报

0

主题

1

帖子

3

积分

吃瓜群众

Rank: 1

积分
3
发表于 2018-9-26 09:26:31 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

0

主题

1

帖子

3

积分

吃瓜群众

Rank: 1

积分
3
发表于 2018-10-9 13:54:17 | 显示全部楼层
android端即时预览PC端修改的代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /2 下一条

获取金币
点击进入,
加入会员和VIP,获取更多权益
每日各抽取前5位会员和VIP
额外奖励500金币和1000金币

手机版|小黑屋|网站地图|宅科技 ( 粤ICP备15107403号

GMT+8, 2020-7-17 00:22 , Processed in 0.679573 second(s), 30 queries .

Copyright © 2016 宅科技 | 智能终端极客社区

Powered by Discuz! X3.4 Licensed

快速回复 返回顶部 返回列表