uni-app怎么制作关于我们页面

星雪大大_1113

星雪大大_1113

2026-11-08

186人浏览

原创

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

uni-app怎么制作关于我们页面

页面结构用 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-app
    uni-app

    uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

    下载
    • 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 个图片路径里 —— 提前拆分数据和视图,省下的不只是时间。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2883

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6303

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

7210

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

7038

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

1003

5

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

0

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

0

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

0

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

20

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习