Uniapp基础学习(二)

server/2025/1/28 18:49:11/

 uni-app怎么用?和vue对比记忆一文教会你_uniapp vue-CSDN博客

一、项目结构解读

uni-app项目的结构通常包括以下几个部分:

  • pages:存放项目页面的目录,每个页面通常由.vue文件、.js文件、.json文件等组成。
  • components:存放可复用的Vue组件的目录。
  • static:存放静态资源(如图片、视频等)的目录。
  • utils:存放工具函数的目录。
  • store:Vuex状态管理
  • main.js:Vue初始化入口js文件。
  • App.vue:入口组件,用于配置App全局样式以及监听应用生命周期。
  • manifest.json:配置文件,用于配置应用名称、appid、logo、版本、启动页面等打包信息。
  • pages.json:页面管理文件,用于配置页面路由、导航条、选项卡、页面样式等页面类信息。

主要mainfest.json和pages.json两个文件与Vue项目有不少差异,下面重点阐述这两文件:

mainfest.json

manifest.json 文件是 uni-app 项目中用于管理应用配置的重要文件,它包含了应用的名称、图标、权限、版本信息、页面路由配置、窗口样式配置、平台特有配置等多个方面的内容。以下是对 manifest.json 文件的详细解析:

基本结构

manifest.json 是一个 JSON 格式的文件,其基本结构大致如下:

{  "appid": "__UNI__XXXXXX", // 创建应用时云端分配的,不要修改  "name": "应用名称",  "description": "应用描述",  "versionName": "1.0.0",  "versionCode": "100",  // 其他配置项...  
}
-----------------------------------------------------------------
{"name" : "若依移动端","appid" : "__UNI__25A9D80","description" : "","versionName" : "1.1.0","versionCode" : "100","transformPx" : false,"app-plus" : {"usingComponents" : true,"nvueCompiler" : "uni-app","splashscreen" : {"alwaysShowBeforeRender" : true,"waiting" : true,"autoclose" : true,"delay" : 0},"modules" : {},"distribute" : {"android" : {"permissions" : ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},"ios" : {},"sdkConfigs" : {}}},"quickapp" : {},"mp-weixin" : {"appid" : "wxccd7e2a0911b3397","setting" : {"urlCheck" : false,"es6" : false,"minified" : true,"postcss" : true},"optimization" : {"subPackages" : true},"usingComponents" : true},"vueVersion" : "2","h5" : {"template" : "static/index.html","devServer" : {"port" : 9090,"https" : false},"title" : "RuoYi-App","router" : {"mode" : "hash","base" : "./"}}
}
主要配置项
1. 应用基本信息
  • appid:创建应用时云端分配的唯一标识符,不要修改。
  • name:应用名称,将展示在应用的标题栏或安装列表中。
  • description:应用描述,简短介绍应用的功能和用途。
  • versionName:版本名称,通常用于展示给用户看的版本描述。
  • versionCode:版本号,用于内部标识应用的版本,通常是一个整数,每次发布新版本时递增。
2. 窗口表现
  • navigationBarTextStylenavigationBarTitleTextnavigationBarBackgroundColor 等:这些配置项用于设置导航栏的样式,包括文字颜色、标题、背景色等。不过需要注意的是,这些配置项通常不在 manifest.json 中直接设置,而是在 pages.json 或其他全局配置文件中设置。
3. 应用权限

对于需要特定权限的应用(如访问相机、存储等),manifest.json 文件中可以配置相应的权限申请信息。这部分信息通常位于平台特有的配置部分,如 app-plusdistribute 等。

4. 平台特有配置
  • app-plus:5+App(即使用 HBuilderX 打包的原生App)的特有配置,包括是否允许内联视频播放、是否启用自定义组件模式、编译器版本、nvue页面编译模式等。
  • distribute:发布信息配置,包括Android和iOS的打包配置,如Android的权限申请、iOS的某些特殊配置等。
  • quickapp:快应用特有配置。
  • mp-weixinmp-alipaymp-baidu 等:各小程序平台的特有配置,如小程序的 appid、是否启用自定义组件模式等。
5. 统计与监控
  • uniStatistics:uni统计配置,用于控制是否开启uni统计功能,以收集应用的使用情况数据。
6. 其他配置
  • splashscreen:启动界面配置,包括是否等待首页渲染完毕后再关闭启动界面、是否自动关闭启动界面、是否在程序启动界面显示等待雪花等。
  • modules:模块配置,用于控制app的包体积,不需要的模块可以在打包时剔除。
  • vueVersion:Vue版本选择,uni-app支持Vue 2.x和Vue 3.x,可以在这里指定使用哪个版本的Vue。
注意事项
  • 在配置 manifest.json 时,应确保遵循 JSON 的语法规则,如使用双引号表示字符串、对象属性名与值之间用冒号分隔等。
  • 不同的平台(如小程序、H5、App)在解析 manifest.json 时可能会有所差异,因此在配置时需要注意跨平台的兼容性。
  • 对于一些敏感信息(如小程序的 appid),应避免在公共的代码仓库中泄露。

总之,manifest.json 文件是 uni-app 项目中非常重要的配置文件,通过合理配置该文件,可以方便地管理应用的基本信息、窗口表现、平台特有配置等多个方面的内容。

page.json

pages.json 文件是 uni-app 项目中用于全局配置的重要文件,它决定了页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。该文件类似微信小程序中的 app.json 的页面管理部分,但提供了更多跨平台的配置选项。以下是对 pages.json 文件的详细解析:

基本结构

pages.json 是一个 JSON 格式的文件,其基本结构大致如下:

{  "pages": [  {  "path": "pages/index/index",  "style": {  // 页面样式配置  }  },  // 更多页面配置...  ],  "globalStyle": {  // 全局样式配置  },  "tabBar": {  // tabBar 配置  },  "condition": {  // 启动模式配置  },  "easycom": {  // 组件自动引入规则  },  // 其他配置项...  
}------------------------------------------------------------
{"pages": [{"path": "pages/login","style": {"navigationBarTitleText": "登录"}}, {"path": "pages/register","style": {"navigationBarTitleText": "注册"}}, {"path": "pages/index","style": {"navigationBarTitleText": "若依移动端框架","navigationStyle": "custom"}}, {"path": "pages/work/index","style": {"navigationBarTitleText": "工作台"}}, {"path": "pages/mine/index","style": {"navigationBarTitleText": "我的"}}, {"path": "pages/mine/avatar/index","style": {"navigationBarTitleText": "修改头像"}}, {"path": "pages/mine/info/index","style": {"navigationBarTitleText": "个人信息"}}, {"path": "pages/mine/info/edit","style": {"navigationBarTitleText": "编辑资料"}}, {"path": "pages/mine/pwd/index","style": {"navigationBarTitleText": "修改密码"}}, {"path": "pages/mine/setting/index","style": {"navigationBarTitleText": "应用设置"}}, {"path": "pages/mine/help/index","style": {"navigationBarTitleText": "常见问题"}}, {"path": "pages/mine/about/index","style": {"navigationBarTitleText": "关于我们"}}, {"path": "pages/common/webview/index","style": {"navigationBarTitleText": "浏览网页"}}, {"path": "pages/common/textview/index","style": {"navigationBarTitleText": "浏览文本"}}],"tabBar": {"color": "#000000","selectedColor": "#000000","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index","iconPath": "static/images/tabbar/home.png","selectedIconPath": "static/images/tabbar/home_.png","text": "首页"}, {"pagePath": "pages/work/index","iconPath": "static/images/tabbar/work.png","selectedIconPath": "static/images/tabbar/work_.png","text": "工作台"}, {"pagePath": "pages/mine/index","iconPath": "static/images/tabbar/mine.png","selectedIconPath": "static/images/tabbar/mine_.png","text": "我的"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "RuoYi","navigationBarBackgroundColor": "#FFFFFF"}
}
主要配置项
1. pages
  • 作用:用于配置应用包含的页面路径及窗口表现。
  • 格式:一个数组,每个元素都是一个对象,包含 path 和 style 两个属性。
    • path:页面路径,必须以 / 开头,表示项目的根目录。
    • style:页面样式配置,包括导航条样式、背景色等。
2. globalStyle
  • 作用:用于设置默认页面的窗口表现,如导航栏样式、背景色等。
  • 主要属性
    • navigationBarTextStyle:导航栏标题颜色及状态栏前景颜色,仅支持 black/white
    • navigationBarTitleText:导航栏标题文字内容。
    • navigationBarBackgroundColor:导航栏背景颜色(同状态栏背景色)。
    • backgroundColor:窗口的背景色。
    • backgroundTextStyle:下拉 loading 的样式,仅支持 dark/light
    • rpxCalcMaxDeviceWidthrpxCalcBaseDeviceWidthrpxCalcIncludeWidth:与 rpx 计算相关的配置。
3. tabBar
  • 作用:用于配置底部的原生 tabbar。
  • 主要属性
    • color:未选中时 tab 上的文字默认颜色。
    • selectedColor:选中时 tab 上的文字颜色。
    • backgroundColor:tab 的背景色。
    • borderStyle:tabbar 上边框的颜色,可选值 black/white
    • list:tab 的列表,每个元素都是一个对象,包含 pagePathtexticonPathselectedIconPath 等属性。
4. condition
  • 作用:启动模式配置,仅开发期间生效,用于模拟直达页面的场景。
  • 主要属性
    • current:当前激活的模式(list 的索引项)。
    • list:模式的列表,每个元素包含 namepath 和可选的 query 属性。
5. easycom
  • 作用:组件自动引入规则,可以简化组件的引用方式。
  • 主要属性
    • autoscan:是否开启自动扫描,开启后将会自动扫描符合特定目录结构的组件。
    • custom:自定义扫描规则,以正则方式定义组件的匹配规则。
注意事项
  • pages.json 文件中的配置项非常灵活,可以根据项目的具体需求进行配置。
  • 不同的平台(如小程序、H5、App)在解析 pages.json 时可能会有所差异,因此在配置时需要注意跨平台的兼容性。
  • 在配置 pages.json 时,应确保遵循 JSON 的语法规则,如使用双引号表示字符串、对象属性名与值之间用冒号分隔等。

总之,pages.json 文件是 uni-app 项目中非常重要的配置文件,通过合理配置该文件,可以方便地管理项目的页面、样式和导航等。

page.json VS VueRouter 

上述page.json功能类似于Vue-Router路由管理,下面简单阐述其不同:

Vue Router与uni-app中的pages.json在路由管理上存在明显的区别,主要体现在它们的设计目标、配置方式、应用场景以及路由跳转的实现方式上。以下是对这两者的详细对比:

一、设计目标与应用场景

  1. Vue Router
    • 设计目标:Vue Router是Vue.js的官方路由管理器,它与Vue.js深度集成,主要用于构建单页面应用(SPA)。
    • 应用场景:主要面向Web应用,特别是需要页面间导航而不需要重新加载页面的Web应用。
  2. uni-app的pages.json
    • 设计目标:uni-app是一个使用Vue.js开发所有前端应用的框架,其目标是编写一套代码,发布到iOS、Android、H5、以及各种小程序等多个平台。pages.json是uni-app中用于配置页面路由的全局配置文件。
    • 应用场景:适用于需要跨平台开发的场景,包括Web、iOS、Android以及各种小程序等。

二、配置方式

  1. Vue Router

    • 路由配置通常在项目的router.js或main.js文件中进行,通过定义路由表(routes)来管理页面间的导航。
    • 每个路由对象包含路径(path)、组件(component)以及可能的子路由(children)等属性。
import Vue from 'vue'  
import Router from 'vue-router'  
import Home from './views/Home.vue'  Vue.use(Router)  export default new Router({  routes: [  {  path: '/',  name: 'home',  component: Home  },  // 其他路由...  ]  
})

uni-app的pages.json

  • 路由配置在全局的pages.json文件中进行,该文件定义了应用的所有页面及其导航条、窗口表现等属性。
  • 每个页面配置项包含路径(path)、窗口表现(style)等属性。
{  "pages": [  {  "path": "pages/index/index",  "style": {  "navigationBarTitleText": "首页"  }  },  // 其他页面...  ]  
}

三、路由跳转的实现方式

  1. Vue Router
    • 路由跳转通常通过编程式导航(如this.$router.push({ path: '/some-path' }))或声明式导航(在模板中使用<router-link to="/some-path">)来实现。
  2. uni-app
    • 路由跳转在uni-app中通过API(如uni.navigateTo({ url: '/pages/some/path' }))或<navigator url="/pages/some/path">组件来实现。
    • uni-app还支持更丰富的页面跳转类型,如重定向(uni.redirectTo)、重新加载(uni.reLaunch)等。
文章来源:https://blog.csdn.net/m0_55049655/article/details/141968941
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/server/116405.html

相关文章

AI为云游戏带来的革新及解决方案:深度技术剖析与未来展望

近期&#xff0c;科技巨头埃隆马斯克与热门国产游戏《黑神话&#xff1a;悟空》的互动&#xff0c;再次引发了公众对AI技术在游戏产业中应用的关注。马斯克&#xff0c;作为特斯拉和SpaceX的掌门人&#xff0c;不仅在科技领域引领风骚&#xff0c;其个人兴趣也广泛涉猎&#xf…

数据库的实施过程分析

在完成了数据库的逻辑结构设计和物理结构设计后&#xff0c;下一步就是将设计成果转化为现实&#xff0c;这一步骤被称为数据库的实施。数据库实施是数据库开发过程中至关重要的一环&#xff0c;它标志着从设计阶段向实际应用的过渡。本文将为你详细讲解数据库实施的各个关键步…

【PostgreSQL数据库表膨胀的一些原因】

PostgreSQL表膨胀的原因主要有两个&#xff1a;一个是垃圾数据&#xff0c;即dead tuple行数太多未及时清理&#xff0c;导致不能及时提供能重用的空间&#xff0c;二是数据页之间存在空闲空间。 1.表的填充因子设置 表的填充因子是个很神奇的东西&#xff0c;因为设置太大或…

django 通过地址访问本地文件

django 通过地址访问本地文件 在Django中&#xff0c;如果你想通过URL访问本地文件&#xff0c;你可以使用Django的serve视图。首先&#xff0c;你需要配置你的urls.py来匹配文件存储的路径&#xff0c;并且确保文件存储在你的本地文件系统中。 以下是一个简单的例子&#xff…

Jmeter使用时小技巧添加“泊松随机定时器“模拟用户思考时间

1、模拟用户思考时间&#xff0c;添加"泊松随机定时器"

【计网】数据链路层:概述之位置|地位|链路|数据链路|帧

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山岗&#xff01; &#x1f4ab; 欢迎来到我的学习笔记&#xff01; ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ 1. 在OSI体系结构中的位置 1. 位置&#xff1a;数…

Unite Shanghai 2024 技术专场 | Unity 6及未来规划:Unity引擎和服务路线图

在 2024 年 7 月 24 日的 Unite Shanghai 2024 技术专场演讲中&#xff0c;Unity 高级技术产品经理 Jeff Riesenmy 带来演讲 Unity 6 and Beyond: A Roadmap of Unity Engine and Services。作为本次 Unite 首场专题演讲&#xff0c;他介绍了 Unity 引擎的最新进展及其配套的工…

在JavaScript中实现简单的发布/订阅模式

在现代Web开发中&#xff0c;发布/订阅模式是一种常见的设计模式&#xff0c;它允许不同部分的应用程序之间进行解耦和通信。这种模式特别适用于事件驱动的编程模型&#xff0c;能够有效地管理复杂的交互和数据流。本文将详细介绍如何在JavaScript中实现一个简单的发布/订阅模式…