uniapp文档常用整理

本文档总结了uni-app的环境判断、平台识别、样式导入、固定值处理、背景图片应用、App SDK配置、manifest.json完整内容、getApp()用法及getCurrentPages()功能,提供uni-app开发中的实用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.环境判断

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

if(process.env.NODE_ENV === 'development'){
   
    console.log('开发环境')
}else{
   
    console.log('生产环境')
}

2.判断平台

  • 编译期判断 编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码
// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif
  • 运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools)。
switch(uni.getSystemInfoSync().platform){
   
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

3.样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径

<style>
    @import "../../common/uni.css";

    .uni-card {
   
        box-shadow: none;
    }
</style>

4.固定值

uni-app 中以下组件的高度是固定的,不可修改:

组件 描述 App H5
NavigationBar 导航栏 44px 44px
NavigationBar 底部选项卡 HBuilderX 2.3.4之前为56px,2.3.4起和H5调为一致,统一为 50px。但可以自主更改高度) 50px

各小程序平台,包括同小程序平台的iOS和Android的高度也不一样。

5.背景图片

  • 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
  • 使用本地路径背景图片需注意:在背景图片小于 40kb 时,uni-app 编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
 .test2 {
   
     background-image: url('~@/static/logo.png');
 }
  • 微信小程序不支持相对路径(真机不支持,开发工具支持)

6. App SdkConfigs汇总

三方原生SDK配置。三方SDK的使用需要向这些SDK提供商申请,并配置参数到此处。可在HBuilderX可视化界面(App SDK配置)输入配置,此配置仅云打包后生效,本地打包需自行在原生工程中配置。

属性 类型 描述
oauth Object 授权登录,配置后可调用 uni.login 进行登录操作,目前支持的授权登录平台有:QQ、微信、新浪微博。
share Object 分享,配置后可调用uni.share进行分享,目前支持
push Object 目前支持uniPush、个推、小米推送,注意app仅支持push方式,配置多个push无效,建议使用uniPush,支持多厂商推送。
payment Object 三方支付配置,配置后可调用 uni.payment 进行支付,目前支持微信支付、支付宝支付、苹果内购
statics Object 统计配置,目前仅支付友盟统计,详见,在uni-app中只用 plus.statistic 进行调用。
maps Object 原生地图配置,目前仅支持 高德地图,申请方式可参考:地图插件配置。

7.完整 manifest.json

{
   
    "appid": "__UNI__XXXXXX,创建应用时云端分配的,不要修改。",
    "name": "应用名称,如uni-app",
    "description": "应用描述",
    "versionName": "1.0.0",
    "versionCode": "100",
  // 是否全局关闭uni统计
  "uniStatistics": {
     
      "enable": false//全局关闭  
  },
    // app-plus 节点是 App 特有配置,推荐在 HBuilderX 的 manifest.json 可视化界面操作完成配置。
    "app-plus": {
   
        // HBuilderX->manifest.json->模块权限配置
    "optimization": {
   
      "subPackages": true // HBuilderX 2.7.12+ 支持
    },
    // 屏幕方向
    "screenOrientation": [
      "portrait-primary",
      "landscape-primary",
      "portrait-secondary",
      "landscape-secondary"
    ],
        "modules": {
   
            "Contacts": {
   },
            "Fingerprint": {
   },
            "Maps": {
   },
            "Messaging": {
   },
            "OAuth": {
   },
            "Payment": {
   },
            "Push": {
   },
            "Share": {
   }
<think>好的,用户想学习UniApp的入门知识,我需要根据提供的引用内容来组织回答。首先,用户提到的引用1是关于项目创建和目录结构的,引用2提到了API的使用和样式处理。我需要将这些信息整合成一个结构清晰的教程。 首先,我应该从项目创建开始,因为这是入门的第一步。根据引用1,创建项目需要选择正确的文件夹路径,并展示项目结构。接下来是目录结构的解释,这部分需要详细说明每个文件夹的作用,比如pages、static等,帮助用户理解UniApp的基本组织方式。 然后,需要介绍开发基础,比如Vue的语法,因为UniApp基于Vue,这点在引用1里提到过。还要提到小程序开发经验对学习UniApp的帮助,鼓励有经验的用户更快上手,但也要强调零基础也没问题。 接下来是API的使用,引用2里的网络请求示例可以直接用上,展示如何发送GET请求,并处理成功和失败的情况。同时,要提到其他常用API如存储、路由等,但具体细节可能需要用户进一步学习或查阅文档。 样式处理部分,引用2提到了使用CSS预处理器,但用户可能不太清楚具体怎么操作,可以简要说明支持哪些预处理器,并给出一个简单的样式示例,比如修改页面背景色。 最后,学习资源推荐是必要的,官方文档和社区论坛对新手很有帮助。同时,实战练习能帮助巩固知识,比如创建一个简单的页面并调用API。 需要确保回答符合系统级指令:使用正确的中文,行内公式用$...$,独立公式用$$...$$(虽然这里可能用不上),生成相关问题。检查是否有引用标识,确保每个引用都正确标注。然后,生成的相关问题要围绕UniApp的学习路径、项目结构、API、优化等方面,帮助用户深入探索。 现在整理这些内容,确保结构清晰,分步骤讲解,语言口语化,避免使用Markdown格式,保持自然流畅。同时,验证引用是否正确对应,比如项目创建部分对应引用1,API示例对应引用2,样式处理也对应引用2。最后,相关问题要覆盖用户可能感兴趣的后续步骤,比如项目结构、API学习、优化技巧等。</think>以下是为您整理UniApp开发入门教程,结构清晰且结合实践要点: ### 一、项目创建与初始化 1. 创建项目时,通过浏览选择本地文件夹作为项目路径(例如桌面新建的demo1文件夹),所有源码文件将存储在该目录下[^1] 2. 新建项目默认包含核心目录: - `pages`:存放所有页面组件 - `static`:存储静态资源(图片/字体等) - `App.vue`:应用入口文件 - `manifest.json`:项目配置信息 ### 二、开发基础要点 1. **语法规范**:基于Vue.js框架,支持模板语法、组件化开发等特性。如条件渲染: ```html <view v-if="showContent">{{ message }}</view> ``` 2. **跨平台原理**:通过条件编译实现代码复用,同一套代码可编译到微信小程序/H5/App等多端 ### 三、API使用示例 网络请求演示(引用自官方文档): ```javascript uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('响应数据:', res.data); uni.setStorageSync('cacheData', res.data); // 数据存储 }, fail: (error) => { uni.showToast({ title: '请求失败' }); } }); ``` ### 四、样式处理技巧 1. 支持CSS预处理器:Sass/Less/Stylus 2. 全局样式定义在`App.vue` 3. 响应式布局示例: ```css .container { padding: 20rpx; /* 使用响应式单位 */ background-color: $theme-color; /* 使用预处理器变量 */ } ``` ### 五、学习资源推荐 1. 官方文档(必读) 2. DCloud社区论坛(含实战案例) 3. 第三方组件市场(扩展功能模块) ### 六、实战建议 从创建简单页面开始,逐步实现以下功能: 1. 页面路由跳转(`uni.navigateTo`) 2. 本地数据缓存(`uni.setStorage`) 3. 表单数据绑定(`v-model`)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值