当前位置： 首页 > news >正文

Uniapp基础学习（二）

news 来源：原创 2024/9/20 12:36: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. 窗口表现
  • navigationBarTextStyle、navigationBarTitleText、navigationBarBackgroundColor 等：这些配置项用于设置导航栏的样式，包括文字颜色、标题、背景色等。不过需要注意的是，这些配置项通常不在 manifest.json 中直接设置，而是在 pages.json 或其他全局配置文件中设置。
3. 应用权限

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

4. 平台特有配置
  • app-plus：5+App（即使用 HBuilderX 打包的原生App）的特有配置，包括是否允许内联视频播放、是否启用自定义组件模式、编译器版本、nvue页面编译模式等。
  • distribute：发布信息配置，包括Android和iOS的打包配置，如Android的权限申请、iOS的某些特殊配置等。
  • quickapp：快应用特有配置。
  • mp-weixin、mp-alipay、mp-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。
    • rpxCalcMaxDeviceWidth、rpxCalcBaseDeviceWidth、rpxCalcIncludeWidth：与 rpx 计算相关的配置。
3. tabBar
  • 作用：用于配置底部的原生 tabbar。
  • 主要属性：
    • color：未选中时 tab 上的文字默认颜色。
    • selectedColor：选中时 tab 上的文字颜色。
    • backgroundColor：tab 的背景色。
    • borderStyle：tabbar 上边框的颜色，可选值 black/white。
    • list：tab 的列表，每个元素都是一个对象，包含 pagePath、text、iconPath、selectedIconPath 等属性。
4. condition
  • 作用：启动模式配置，仅开发期间生效，用于模拟直达页面的场景。
  • 主要属性：
    • current：当前激活的模式（list 的索引项）。
    • list：模式的列表，每个元素包含 name、path 和可选的 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）等。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Anchor Alignment Metric来优化目标检测的标签分配和损失函数。
  • [数据集][目标检测]西红柿成熟度检测数据集VOC+YOLO格式3241张5类别
  • Ubuntu 修改IP
  • 发烧时眼睛胀痛的多种原因
  • 基于Netty框架的桩直连协议（云快充协议1.5）
  • C++相关概念和易错语法（32）（单例模式、类型转换）
  • leetcode:516 最长回文字序列 动态规划
  • C++基础（7.Stack_Quene_List）
  • Windows10上Nginx如何通过自签名证书方式发布Https服务(上）
  • 第二百一十四节 Java反射 - Java反射字段访问
  • DAY69
  • Gartner《2024中国安全技术成熟度曲线》AI安全助手代表性产品：开发者安全助手D10
  • 启动 Spring Boot 项目时指定特定的 application.yml 文件位置
  • APS开源源码解读: 排程工具 optaplanner
  • 洛阳3天攻略
  • Android 初级面试者拾遗（前台界面篇）之 Activity 和 Fragment
  • angular学习第一篇-----环境搭建
  • express + mock 让前后台并行开发
  • Golang-长连接-状态推送
  • idea + plantuml 画流程图
  • Java 网络编程（2）：UDP 的使用
  • JavaScript函数式编程（一）
  • js中forEach回调同异步问题
  • orm2 中文文档 3.1 模型属性
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • webgl （原生）基础入门指南【一】
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 浮动相关
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）
  • 前端每日实战：61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 如何使用 JavaScript 解析 URL
  • 使用agvtool更改app version／build
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 容器镜像
  • ​ ​Redis（五）主从复制：主从模式介绍、配置、拓扑（一主一从结构、一主多从结构、树形主从结构）、原理（复制过程、​​​​​​​数据同步psync）、总结
  • ​插件化DPI在商用WIFI中的价值
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • $L^p$ 调和函数恒为零
  • (31)对象的克隆
  • （DenseNet）Densely Connected Convolutional Networks--Gao Huang
  • （黑马点评）二、短信登录功能实现
  • （三）Hyperledger Fabric 1.1安装部署-chaincode测试
  • （十）T检验-第一部分
  • （一）Mocha源码阅读: 项目结构及命令行启动
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (转)socket Aio demo
  • ..回顾17，展望18
  • .gitignore文件---让git自动忽略指定文件
  • .NET CF命令行调试器MDbg入门（二） 设备模拟器
  • .Net环境下的缓存技术介绍
  • .NET连接数据库方式
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • .project文件
  • 。Net下Windows服务程序开发疑惑