當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/12/9 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发【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><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`); })

總結

以上是生活随笔為你收集整理的前端开发【WEUI框架H5网页开发】—— WEUI+Node.js+fis3 项目开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [react] 举例说明在react中怎
下一篇：前端小知识点(9)：函数和对象之间的关系