“关于我们”页需在pages.json中配置路由路径为"pages/about/about",可加入tabBar但须符合前5项且无子目录;页面用替代,图片路径以/static/开头,字号用rpx;联系功能需兼容多端API差异,文案建议抽离至static/i18n/about.json统一管理。

页面结构用 pages.json 配置路由就行
“关于我们”是标准的静态展示页,不需要特殊权限或登录态,直接在 pages.json 的 "pages" 数组里加一项即可,路径写清楚、不重复、不漏斜杠:
-
"path": "pages/about/about"(对应pages/about/about.vue) - 如果要用底部 tab 切换到该页,就放进
"tabBar.list",但注意:微信小程序要求 tab 页必须是pages数组前 5 项之一,且不能嵌套子目录(比如pages/about/index/about.vue就不行) - 避免和已有页面同名,比如已有
pages/user/user.vue,就别再建pages/about/user.vue,否则 HBuilderX 编译可能报page not found
about.vue 里用 + 搭基础内容
uni-app 的 vue 页面默认是 webview 渲染,CSS 写法和 Web 一致,但注意两点:
- 字号建议用
rpx(如font-size: 32rpx),保证不同屏幕宽度下可读性;px在小屏上容易过小 - 图片资源统一放
static/目录下,引用时路径写/static/images/logo.png(开头带斜杠),否则真机调试可能加载失败 - 不要在
里直接写多层—— uni-app 不识别,必须用替代,否则 H5 正常、小程序白屏示例片段:
<template><view class="container"><view class="logo"><image src="/static/images/logo.png" mode="widthFix"></image></view><view class="content"><text class="title">关于我们</text><text class="desc">我们是一家专注跨端开发的团队……</text></view></view></template>
需要联系信息时,用
uni.openLocation和uni.makePhoneCall用户点击地址跳地图、点击电话拨号,是“关于我们”页高频需求。这些 API 在各端行为有差异,不能只写一次调用就完事:
-
uni.openLocation在 H5 端无效,会静默失败;App 和小程序可用,但参数名不一致:address字段小程序支持,App 端必须用name+address组合才准确定位 -
uni.makePhoneCall在 H5 端触发tel:协议,部分浏览器会拦截;小程序需用户授权,首次调用弹窗,拒绝后再次调用无响应,得提前用uni.getSetting检查 - 电话号码字符串务必去空格、短横线等非数字字符,否则 iOS 可能拨号失败 —— 建议用正则清洗:
phone.replace(/[^0-9]/g, '')
内容更新频繁?考虑把文案抽成
static/i18n/about.json如果公司介绍、团队成员、联系方式后续要多语言或运营后台动态改,硬编码在
.vue里会越来越难维护。这时可以仿照 uni-app 官方 i18n 方案,建个纯 JSON 静态文件:- 路径:
static/i18n/about.json,内容如{"title": "关于我们", "mission": "让跨端开发更简单"} - 在
about.vue的onLoad里用uni.loadFile或直接import(编译时已存在)读取,绑定到data或setup返回值 - 注意:H5 端支持直接
import,但 App 端import静态 JSON 可能因打包机制失效,优先用uni.loadFile异步读取更稳妥
真正麻烦的不是写一页“关于我们”,而是当市场部第 7 次要求改文案、加新图标、同步到 5 个平台时,你发现所有修改都散落在 3 个
.vue文件和 2 个图片路径里 —— 提前拆分数据和视图,省下的不只是时间。 -











