uniapp h5模板
uniapp H5 模板基础结构
uniapp 的 H5 模板基于 Vue.js 技术栈，通过 vue-cli 生成的项目结构适配多端（包括 H5）。核心目录和文件如下：
├── pages # 页面目录
│ └── index.vue # 示例首页
├── static # 静态资源（图片等）
├── components # 公共组件
├── manifest.json # 应用配置（如启动页、权限）
├── pages.json # 页面路由与样式配置
├── App.vue # 根组件
└── main.js # 入口文件 关键配置说明
pages.json
定义页面路由、导航栏样式等，示例配置：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app"
}
}manifest.json
配置 H5 特有的启动项，如基础路径（routerBase）：
{
"h5": {
"router": {
"base": "/h5/" // 部署子目录时需配置
},
"template": "template.h5.html" // 自定义模板文件
}
}自定义 H5 模板文件
在项目根目录创建 template.h5.html，可修改 HTML 骨架。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>{{ title }}</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 可在此插入全局脚本
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>适配 H5 的注意事项
路由模式
默认使用 hash 路由，如需 history 模式，在 manifest.json 中配置：
"h5": {
"router": {
"mode": "history"
}
}跨域问题
开发环境下，在 vue.config.js 中配置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://target-domain.com',
changeOrigin: true
}
}
}
};静态资源路径
生产环境部署时，确保 publicPath 正确（在 vue.config.js 中配置）：
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/h5/' : '/'
};扩展功能示例
动态修改标题
在页面中使用 uni.setNavigationBarTitle：
export default {
onLoad() {
uni.setNavigationBarTitle({ title: '新标题' });
}
}H5 专用样式
通过条件编译区分平台：
<style>
/* 所有平台生效 */
.title { color: #333; }
/* 仅 H5 生效 */
/* #ifdef H5 */
.title { font-size: 16px; }
/* #endif */
</style>
