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

最新推荐文章于 2025-09-06 15:52:58 发布

原创最新推荐文章于 2025-09-06 15:52:58 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #npm #前端

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了使用WEUI框架进行H5网页开发，结合fis3进行资源路径批量转化，利用node.js的http模块实现根据请求返回不同页面的功能。详细讲解了WEUI的引入，flickity手势滑动图片效果的应用，特殊字体的引进以及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`);
})