“关于我们”页需在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 里用 <view></view> + <text></text> 搭基础内容
uni-app 的 vue 页面默认是 webview 渲染，CSS 写法和 Web 一致，但注意两点：
- 字号建议用
rpx（如font-size: 32rpx），保证不同屏幕宽度下可读性；px在小屏上容易过小 - 图片资源统一放
static/目录下，引用时路径写/static/images/logo.png（开头带斜杠），否则真机调试可能加载失败 - 不要在
<template></template>里直接写多层<div> —— uni-app 不识别 <code><div>，必须用 <code><view></view>替代，否则 H5 正常、小程序白屏示例片段：
<template> <view class="container"> <view class="logo"> <image src="/static/images/logo.png" mode="widthFix" /> </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 个图片路径里 —— 提前拆分数据和视图，省下的不只是时间。 -
