基于NW.JS全屏无边框程序将HTML打包成可执行文件.EXE 一、介绍/下载/安装打包软件NW.jsNW.js 官网：nwjs.ioNW.js中文网：nwjs.org.cn诚如中文网站所说，对于国内用户，下载速度慢过乌龟，大多数会下载失败，建议使用淘宝NPM镜像下载：https://npm.taobao.org/mirrors/nwjs/NW.js分两个版本：normal版：正式发布版SDK版：带chrome调试器的，方便调试使用依各自需要使用，不需要调试，只是用于打包/去边框，可直接下载发布版这里演示下载0.45.0的发布版：https://npm.taobao.org/mirrors/nwjs/v0.45.0/nwjs-v0.45.0-win-x64.zip下载的是个压缩包，直接解压即可，需要可配置一下环境变量，不懂直接忽略也行，不影响后续操作想入门的可以去中文官网了解开发文档快速入门手册：https://nwjs.org.cn/doc/user/Getting-Started.html只要打包封包直接跳过看下文即可二、打包操作在需要打包文件中新建文件：package.json，里面的内容是：可根据需求进行更改，不涉及可默认{ "main": "index.html", //打包程序入口 "name": "cloud", //字符串必须是小写字母或者数字，可以包含"." 或者"_"或者"-" ，不允许带空格,必须唯一 "description": "demo app of node-webkit", //描述 "version": "1.0.0", //版本 "keywords": [ "demo", "node-webkit" ], //关键字 "window": { //窗体配置 "title": "node-webkit", //窗体的标题 "icon": "link.png", //窗体的ico图标 "toolbar": false, //是否要工具栏 "frame": true, //bool值。如果设置为false，程序将无边框显示 也就是没有系统默认的关闭，最小化，全屏按钮 "width": 1000, //窗口的大小：宽 "height": 800, //窗口的大小：长 "position": "mouse", //字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。 "min_width": 400, //最小宽度 "min_height": 200, //最小高度 "max_width": 9999, //最大宽度 "max_height": 9999, //最大高度 "as_desktop": false, //是否作为桌面背景窗口显示 "resizable": true, //是否允许调整窗口大小 "always-on-top": true, //窗口是否置顶 "fullscreen": false, //是否全屏显示 "show_in_taskbar": true, //是否显示任务栏图标 "show": true, //如果设置为false，启动时窗口不可见 "kiosk": false //是否使用kiosk模式。如果使用kiosk模式，应用程序将全屏显示，并且阻止用户离开应用 }, "webkit": { "plugin": true, //bool值，是否加载插件，如flash，默认值为false。 "java": false, //bool值 是否加载java applets " page-cache": false //是否启用页面缓存 } }再选中全部文件，压缩成 .zip 文件(.rar文件不能)，并将后缀改为：.nw把刚刚的.nw用nw.exe打开，会出现你的网页(有配置环境变量/懂得路径操作的可以不用打开这一步)，其实打开就相当于是预览成效，并定位打包程序路径nw.exe就是刚刚下载的NW.js里面解压出来的文件接下来就是打包成EXECMD打开命令提示符，CD定位到nw.exe所在的文件夹，输入:copy /b nw.exe+文件的名字.nw 打包后生成的文件名字.exe这里吾输入的是：copy /b nw.exe+Ring.nw Ring.exe至此打包完成，在nw.exe所在文件目录下已生成可执行文件Ring.exe该可执行文件依赖于目录下的其他文件，若需要单独运行，还得继续封包封包方式一：使用Enigma Virtual Box，封包后程序较大，一般都得100M+封包方式二：使用innosetup这个工具会生成一个安装版本，且安装文件才 50M+，推荐这种方法，具体的使用方法可参考：https://blog.csdn.net/miaodichiyou/article/details/81668431?utm_source=blogxgwz2xNW.exe 的默认图标通过配置文件是无法修改的，需要用工具 Resource Hacker 来修改纯小白在线打包：http://www.krpano.tech/nwjs下载地址：https://dl.nwjs.io/v0.54.1/nwjs-v0.54.1-win-x64.zip最近有个项目使用nw.js开发的桌面应用，在开发中发现nw.js默认不能播放mp3，我是用的版本是最新的nwjs-v0.16.1-win-64版本的。由于MP3编码属于专利编码，非开源授权的，所以在nw.js中默认不支持MP3的播放，需要手动启用才行。在MP3播放中需要用到一个ffmpeg.dll的动态库文件，所以只要找到nwjs对应的版本的ffmpeg.dll文件替换掉nwjs目录下的ffmpeg.dll即可。官方文档中也给出了相关的说明：http://docs.nwjs.io/en/latest/For%20Developers/Building%20NW.js/#enable-proprietary-codecs这里我们直接从社区下载对应版本的ffmpeg.dll文件即可。社区版本地址：https://github.com/iteufel/nwjs-ffmpeg-prebuilt/releases

php 及 mysql 数据库支持emoji图标，及保存成四个?的解决方式。 Mysql 要支持emoji图标必须实现以下2点：1、数据库表对于存emoji图标的字段的字符集及排序规则修改为对应utf8mb4。2、连接字符串的charset也需要修改为 utf8mb4 ，不然保存后会存成四个？(问号)

警告：React Hook useEffect has a missing dependency 问题在使用useEffect时，当我们将函数的声明放在useEffect函数外面时，会报eslint警告webpackHotDevClient.js:119 ./src/pages/detail/enterprise/modules/businessWarning/modules/tendAndBid/modules/topTitle/index.jsx Line 27:6: React Hook useEffect has a missing dependency: 'menuConfig'. Either include it or remove the dependency array. You can also do a functional update 'setMenuConfig(m => ...)' if you only need 'menuConfig' in the 'setMenuConfig' call react-hooks/exhaustive-deps解决办法1.使用 // eslint-disable-line react-hooks/exhaustive-depsuseEffect(() => { clickshow() }, [showConfirmation])// eslint-disable-line react-hooks/exhaustive-deps function clickshow() { if (showConfirmation) { document.addEventListener('click', isShowConfir, true); } else { document.removeEventListener('click', isShowConfir, true); } } function isShowConfir(e) { if (showConfirmation) { let _con = confDom.current; if (_con && !_con.contains(e.target)) { e.stopPropagation(); setShowConfirmation(false) } } }2.将函数 放在useEffect内useEffect(() => { function clickshow() { if (showConfirmation) { document.addEventListener('click', isShowConfir, true); } else { document.removeEventListener('click', isShowConfir, true); } } function isShowConfir(e) { if (showConfirmation) { let _con = confDom.current; if (_con && !_con.contains(e.target)) { e.stopPropagation(); setShowConfirmation(false) } } } clickshow() }, [showConfirmation])总结以上两种方式可以解决useEffect警告，类似useCallback等警告也可以通过方法1解决。

Typecho博客搭建教程 前言{card-describe title="Typecho官方的介绍"}轻量高效:仅仅 7 张数据表，加上不足 400KB 的代码，就实现了完整的插件与模板机制。超低的 CPU 和内存使用率，足以发挥主机的最高性能。先进稳定:原生支持 Markdown 排版语法，易读更易写。支持 BAE/GAE/SAE 等各类云主机，即使面对突如其来的高访问量，也能轻松应对。简洁友好:精心打磨过的操作界面，依然是你熟悉的面孔，更多了一份成熟与贴心。每一个像素的剪裁，都只为离完美更进一步。{/card-describe}环境配置Typecho是一个动态博客框架，需要Web服务器+数据库+PHP。系统环境是CentOS 7.3，Web服务器选用的是Nginx，数据库选用的是MySQL首先安装Nginxrpm -ivh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.18.0-1.el7.ngx.x86_64.rpm启动Nginxsystemctl start nginx在浏览器访问服务器公网IP，出现Welcome to nginx!则Nginx启动成功！将Nginx设为开机自启systemctl enable nginxNginx Web服务器安装完成！下面安装MySQLwget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum update yum install mysql-server改变文件属主和属组chown mysql:mysql -R /var/lib/mysql初始化并启动mysqlmysqld --initialize service mysqld start如果用root用户初始化可能会报安全启动错误，忽视即可修改mysql管理员密码并登陆mysqlmysqladmin -u root password "your-password" mysql -u root -p输入密码登陆，出现“mysql>”则登陆成功！最后安装PHP安装EPEL(Extra Packages for Enterprise Linux)源rpm -ivh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm安装PHP及其扩展yum install php71w php71w-fpm \ php71w-cli php71w-common php71w-devel php71w-gd \ php71w-pdo php71w-mysql php71w-mbstring php71w-bcmath \ php71w-pecl-redis启动PHPsystemctl start php-fpm查看PHP是否开启ps -ef | grep php开启控制台会输出PHP进程相关信息将PHP设置为开机自启systemctl enable php-fpm至此，Typecho所需环境都配置完成！搭建站点创建站点目录mkdir -p /var/www/example.com其中的”example.com”为使用的域名，请将所有的”example.com”替换为自己使用的域名，也可使用IP下载并解压Typechocd /var/www/example.com yum install wget wget http://typecho.org/downloads/1.1-17.10.30-release.tar.gz tar -xzvf 1.1-17.10.30-release.tar.gz将解压出的文件移动至站点根目录mv /var/www/example.com/build/* /var/www/example.com删除多余文件rmdir build && rm 1.1-17.10.30-release.tar.gz站点文件下载完成！接下来只需配置Nginx和PHP即可！创建站点的Nginx配置文件cd /etc/nginx/conf.d vim example.com.conf内容为server { listen 80; server_name example.com; location / { root /var/www/example.com; index index.html index.htm index.php; if (-f $request_filename/index.html){ rewrite (.*) $1/index.html break; } if (-f $request_filename/index.php){ rewrite (.*) $1/index.php; } if (!-f $request_filename){ rewrite (.*) /index.php; } } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # location ~ \.php$ { root html; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME /var/www/example.com$fastcgi_script_name; include fastcgi_params; } # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } 同样，需要将所有的"example.com"改为自己使用的域名完成后按下ESC键后输入”:wq”回车保存退出文件重启Nginxsystemctl reload nginx修改PHP配置文件vim /etc/php-fpm.d/www.conf按下i键编辑，将其中的”user = apache”改为user = nginx将其中的”group = apache”改为group = nginx完成后按下ESC键后输入”:wq”回车保存退出文件重启PHPsystemctl restart php-fpm最后，为Typecho创建数据库mysql -u root -p输入数据库root用户密码登录数据库create database typecho;创建完成后退出数据库exit;浏览器输入域名即可访问Typecho安装界面，按照提示填写相关内容即可！最后总结Typecho是国人开发的非常简洁的博客框架，操作习惯非常符合国人，也有很多漂亮的主题，但是开发者已经三年没有更新了，所以使用Typecho作为长期博客框架要仔细考虑考虑。转载至:https://www.jianshu.com/p/2c15570daeb0