前端开发【WEUI框架H5网页开发】—— WEUI+Node.js+fis3 项目开发

一、项目架构

项目包含CSS，HTML，images，js等静态资源文件，各自存放在以文件后缀名命名的文件夹下。

二、WEUI框架

1、框架说明

开发采用腾讯开发的WEUI样式，WEUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。
官方地址：
1）UI演示：https://weui.io/
2）JQuery库：http://www.jqweui.cn/components
3）源码地址：https://github.com/Tencent/weui

2、引进方式
1、源码下载链接: WEUI；
2、打开下载后的项目目录，将weui-wxss-master\dist\style\weui.min引入自己项目对应文件夹下。
3、jQuery WeUI 依赖 weui.css 和 jQuery，jQuery 的版本至少在 V1.7.0 以上。
4、HTML引入：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>火车票搜索结果页</title><!-- 引入 WeUI --><link rel="stylesheet" href="../css/weui.min.css">
</head>

5、其他方式引入：根据项目使用的对应框架的要求引入。
6、根据对应模块将源码放入到本项目中。

三、flickity手势滑动图片效果引入

1、官网地址：https://flickity.metafizzy.co/

2、下载后将flickity-docs.min.css和flickity-docs.min.js分别添加到自身项目中，并添加对应的指向。
3、布局修改，隐藏左右按钮及下方滑动条。

//隐藏左右按钮
.flickity-button {display: none;
}
//隐藏下方滑动条
.flickity-page-dots {display: none;
}

4、呈现效果

四、特殊字体引进

1、特殊字体下载：http://www.downcc.com/font/326030.html
2、下载后将资源放置到项目目录下；
3、在CSS中引进特殊字体引进：

@font-face {
font-family: SourceHanSansCN-Medium;
src: url('../ttf/SourceHanSansCN-Medium.ttf');
}
@font-face {
font-family: SourceHanSansCN-Regular;
src: url('../ttf/SourceHanSansCN-Regular.ttf');
}

4、对应模块使用特殊字体：

.style-main {font-family: SourceHanSansCN-Medium, serif;font-size: 16px;color:#2F2F2F;
}

五、fis3批量转化HTML文件中的资源路径

1、说明
HTML项目代码中，前端静态页面往往包含了大量资源文件，如CSS、JS、PNG、JPG等。本地开发时往往指向本地相对路径，在服务器部署时往往要更换为资源在服务器上部署的路径，这个时候通常采用前端工程构建工具fis3

2、官网链接：

官网链接：http://fis.baidu.com/

3、本地环境支持部署：
1）本地支持node.js：https://nodejs.org
2）查看nodejs的版本号：在命令行输入node -v；
3）查看npm的版本号在命令行输入npm -v；
4）安装fis3（采用淘宝镜像，正常安装指令由于网络问题一直失败）

正常安装指令（基本失败）：npm install -g fis3
淘宝镜像指令安装：npm install fis3 -g --registry=http://registry.npm.taobao.org/ --disturl=https://npm.taobao.org/dist

4、项目新增 fis-conf.js 文件，文件中添加以下代码：

//匹配后缀为js、css、png的命令，并添加前缀地址
fis.match('*.{js,css,png}',{domain:'http://127.0.0.1'
});
// 执行工作指令
fis release -d ../output // 表示将目标文件处理后放在 output 文件夹中

5、运行 fis-conf.js文件

六、node.js-http模块之根据不同请求地址返回不同页面

1、使用说明

无框架的静态HTML页面希望实现根据客户端调用请求返回不同结果的HTML页面的功能；Node.js 标准库提供了HTTP模块，可以支持根据客户端不同的请求响应返回不同的处理结果。

2、代码实现

//引进http模块
var http = require("http")
//引进fs模块
var fs = require("fs")
// 创建http响应请求
var server = http.createServer(function(req,res){//获取请求URL中的内容，并根据不同请求地址指向本地不同页面var path = req.url;if(path === /index.html"){path = "/html/search.html";}else if(path === "/index.html?query=%E4%B8%AD%E5%9B%BD%E7%A7%BB%E5%8A%A8"){path = "/html/cmcc_result.html";}else if(path === "/index.html?query=%E7%81%AB%E8%BD%A6%E7%A5%A8"){path = "/html/train_result.html";}//其他静态资源加载staticFile(res,path);
})function staticFile(res,path) {//获取全局目录，完成本地静态页面地址拼接var path = __dirname + path;//文件流形式读取页面资源fs.readFile(path, function (err, stdout, stderr) {if (!err) {var data = stdout;//解析文件后缀var type = path.substr(path.lastIndexOf(".") + 1, path.length)；//在这里设置文件类型，告诉浏览器解析方式res.writeHead(200, {'Content-type': "text/" + type});    //写入资源res.write(data);}//结束res.end();})
}
//定义服务器监听地址和端口，启动服务
server.listen(8080, '127.0.0.1', () => {const addr = `http://127.0.0.1:8080`;console.info(`Server started`);
})