1.环境判断

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

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

2.判断平台

  • 编译期判断 编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码
// #ifdef H5alert("只有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": {},"Speech": {},"Statistic": {},"VideoPlayer": {},"LivePusher": {}},"distribute": {// Android 与 iOS 证书相关信息均在打包时完成配置"android": {"packagename": "Android应用包名,如io.dcloud.uniapp","keystore": "Android应用打包使用的密钥库文件","password": "Android应用打包使用密钥库中证书的密码","aliasname": "Android应用打包使用密钥库中证书的别名","schemes": ["应用支持的scheme,大小写相关,推荐使用小写"],"theme": "程序使用的主题","android:name": "自定义程序入口类名","custompermissions": "Boolean类型,是否自定义android权限,true表示自定义权限,只使用permissions下指定的android权限,不根据用户使用的5+模块自动添加android权限,false表示自动根据用户使用的5+模块自动添加android权限","permissions": ["要添加的额外的android权限,如<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\" />","<uses-permission android:name=\"com.android.launcher.permission.UNINSTALL_SHORTCUT\" />"],"minSdkVersion": "apk支持的最低版本,默认值为14","targetSdkVersion": "apk的目标版本,默认值为21"},"ios": {"appid": "iOS应用标识,苹果开发网站申请的appid,如io.dcloud.uniapp","mobileprovision": "iOS应用打包配置文件","password": "iOS应用打包个人证书导入密码","p12": "iOS应用打包个人证书,打包配置文件关联的个人证书","devices": "iOS应用支持的设备类型,可取值iphone/ipad/universal","urltypes": [{"urlidentifier": "com.xxx.test","urlschemes": ["hbuilder"// 必选,程序所支持的自定义协议名称]}],"frameworks": ["使用native.js调用API要引用的库文件名称,如CoreLocation.framework", "QuartzCore.framework"],"idfa": "true|false,是否使用广告标识符,默认值为false","plistcmds": ["Set :权限 使用权限的原因","Set :NSCameraUsageDescription 说明使用用户相机的原因"]},// HBuilderX->manifest.json->SDK配置"sdkConfigs": {"maps": {// 地图只能选一个,这里选的是百度。"baidu": {"appkey_ios": "","appkey_android": ""}},"oauth": {// 微信登录"weixin": {"appid": "","appsecret": ""},// QQ登录"qq": {"appid": ""},// 新浪微博登录"sina": {"appkey": "","appsecret": "","redirect_uri": ""},// 小米登录"xiaomi": {"appid_ios": "","appsecret_ios": "","redirect_uri_ios": "","appid_android": "","appsecret_android": "","redirect_uri_android": ""}},"payment": {// Apple应用内支付"appleiap": {},// 支付宝支付"alipay": {"scheme": ""},// 微信支付"weixin": {"appid": ""}},"push": {// 推送只能选择一个,这里选的是个推。"igexin": {"appid": "","appkey": "","appsecret": ""}},"share": {// 微信分享"weixin": {"appid": ""},// 新浪微博分享"sina": {"appkey": "","appsecret": "","redirect_uri": ""},// 分享到QQ"qq": {"appid": ""}},"statics": {// 友盟统计"umeng": {"appkey_ios": "","channelid_ios": "","appkey_android": "","channelid_android": ""}}},// HBuilderX->manifest.json->图标配置"icons": {"ios": {"appstore": "必选, 1024x1024, 提交app sotre使用的图标","iphone": {"app@2x": "可选,120x120,iOS7-11程序图标(iPhone4S/5/6/7/8)","app@3x": "可选,180x180,iOS7-11程序图标(iPhone6plus/7plus/8plus/X)","spotlight@2x": "可选,80x80,iOS7-11 Spotlight搜索图标(iPhone5/6/7/8)","spotlight@3x": "可选,120x120,iOS7-11 Spotlight搜索图标(iPhone6plus/7plus/8plus/X)","settings@2x": "可选,58x58,iOS5-11 Settings设置图标(iPhone5/6/7/8)","settings@3x": "可选,87x87,iOS5-11 Settings设置图标(iPhone6plus/7plus/8plus/X)","notification@2x": "可选,40x40,iOS7-11 通知栏图标(iPhone5/6/7/8)","notification@3x": "可选,60x60,iOS7-11 通知栏图标(iPhone6plus/7plus/8plus/X)"},"ipad": {"app": "可选,76x76,iOS7-11程序图标","app@2x": "可选,152x152,iOS7-11程序图标(高分屏)","proapp@2x": "可选,167x167,iOS9-11程序图标(iPad Pro)","spotlight": "可选,40x40,iOS7-11 Spotlight搜索图标","spotlight@2x": "可选,80x80,iOS7-11 Spotlight搜索图标(高分屏)","settings": "可选,29x29,iOS5-11 设置图标","settings@2x": "可选,58x58,iOS5-11 设置图标(高分屏)","notification": "可选,20x20,iOS7-11 通知栏图标","notification@2x": "可选,40x40,iOS7-11 通知栏图标(高分屏)"}},"android": {"mdpi": "必选,48x48,普通屏程序图标","ldpi": "必选,48x48,大屏程序图标","hdpi": "必选,72x72,高分屏程序图标","xhdpi": "必选,96x96,720P高分屏程序图标","xxhdpi": "必选,144x144,1080P高分屏程序图标","xxxhdpi": "可选,192x192"}},// HBuilderX->manifest.json->启动图配置"splashscreen": {"ios": {"iphone": {"retina35": "可选,640x960,3.5英寸设备(iPhone4)启动图片","retina40": "可选,640x1136,4.0英寸设备(iPhone5)启动图片","retina40l": "可选,1136x640,4.0英寸设备(iPhone5)横屏启动图片","retina47": "可选,750x1334,4.7英寸设备(iPhone6)启动图片","retina47l": "可选,1334x750,4.7英寸设备(iPhone6)横屏启动图片","retina55": "可选,1242x2208,5.5英寸设备(iPhone6Plus)启动图片","retina55l": "可选,2208x1242,5.5英寸设备(iPhone6Plus)横屏启动图片","iphonex": "可选,1125x2436,iPhoneX启动图片","iphonexl": "可选,2436x1125,iPhoneX横屏启动图片"},"ipad": {"portrait": "可选,768x1004,需支持iPad时必选,iPad竖屏启动图片","portrait-retina": "可选,1536x2008,需支持iPad时必选,iPad高分屏竖屏图片","landscape": "可选,1024x748,需支持iPad时必选,iPad横屏启动图片","landscape-retina": "可选,2048x1496,需支持iPad时必选,iPad高分屏横屏启动图片","portrait7": "可选,768x1024,需支持iPad iOS7时必选,iPad竖屏启动图片","portrait-retina7": "可选,1536x2048,需支持iPad iOS7时必选,iPad高分屏竖屏图片","landscape7": "可选,1024x768,需支持iPad iOS7时必选,iPad横屏启动图片","landscape-retina7": "可选,2048x1536,需支持iPad iOS7时必选,iPad高分屏横屏启动图片"}},"android": {"mdpi": "必选,240x282,普通屏启动图片","ldpi": "必选,320x442,大屏启动图片","hdpi": "必选,480x762,高分屏启动图片","xhdpi": "必选,720x1242,720P高分屏启动图片","xxhdpi": "必选,1080x1882,1080P高分屏启动图片"}}},// HBuilderX->manifest.json->启动图配置->启动界面选项"splashscreen": {"waiting": true,"autoclose": true},"error": {"url": "页面加载错误时打开的页面地址,可以是网络地址,也可以是本地地址"},"useragent": {"value": "自定义ua字符串","concatenate": "是否为追加模式"},"useragent_ios": {"value": "与useragent的value一致,仅在iOS平台生效,当useragent和useragent_ios同时存在时优先级useragent_ios>useragent","concatenate": "与useragent的concatenate一致,仅iOS平台生效"},"useragent_android": {"value": "与useragent的value一致,仅在Android平台生效,当useragent和useragent_android同时存在时优先级useragent_android>useragent","concatenate": "与useragent的concatenate一致,仅Android平台生效"},"ssl": "accept|refuse|warning,访问https网络时对非受信证书的处理逻辑","runmode": "normal","appWhitelist": ["Android平台下载apk地址白名单列表","iOS平台跳转appstore地址白名单列表"],"schemeWhitelist": ["URL Scheme白名单列表,如:mqq" //iOS要求预先指定要打开的App名单,不能随意调用任何App],"channel": "渠道标记,可在DCloud开发者中心查看各渠道应用的统计数据","adid": "广告联盟会员id,在DCloud开发者中心申请后填写","safearea": { //安全区域配置,仅iOS平台生效  "background": "#CCCCCC", //安全区域外的背景颜色,默认值为"#FFFFFF"  "bottom": { // 底部安全区域配置  "offset": "none|auto" // 底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"  },"left": { //左侧安全区域配置(横屏显示时有效)  "offset": "none|auto"},"right": { //右侧安全区域配置(横屏显示时有效)  "offset": "none|auto"}},"softinput": {"navBar": "auto", //是否显示iOS软键盘上的“完成”导航条"mode": "adjustResize|adjustPan" //软键盘弹出模式,},"popGesture": "none" //iOS上是否支持屏幕左边滑动关闭当前页面。默认是可关闭。设为none则不响应左滑动画。},// 快应用特有配置"quickapp": {},// 微信小程序特有配置"mp-weixin": {"appid": "wx开头的微信小程序appid","uniStatistics": {"enable": false//仅微信小程序关闭uni统计},},// 百度小程序特有配置"mp-baidu": {"appid": "百度小程序appid"},// 字节跳动小程序特有配置"mp-toutiao": {"appid": "字节跳动小程序appid"},"h5": {"title": "演示", //页面标题,默认使用 manifest.json 的 name"template": "index.html", //index.html模板路径,相对于应用根目录,可定制生成的 html 代码"router": {"mode": "history", //路由跳转模式,支持 hash|history ,默认 hash"base": "/hello/" //应用基础路径,例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"},"async": { //页面js异步加载配置"loading": "AsyncLoading", //页面js加载时使用的组件(需注册为全局组件)"error": "AsyncError", //页面js加载失败时使用的组件(需注册为全局组件)"delay": 200, //展示 loading 加载组件的延时时间(页面 js 若在 delay 时间内加载完成,则不会显示 loading 组件)"timeout": 3000 //页面js加载超时时间(超时后展示 error 对应的组件)}}
}

8.getApp()

getApp() 函数用于获取当前应用实例,一般用于获取globalData 。

const app = getApp()
console.log(app.globalData)

注意:

  • 不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,可以通过 this.$scope 获取对应的app实例
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数。
  • v3模式加速了首页nvue的启动速度,当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此v3版本提供了const app = getApp({allowDefault: true})用来获取原始的App对象,可以用来在首页对globalData等初始化

9.getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
每个页面实例的方法属性列表:

方法 描述 平台说明
page.$getAppWebview() 获取当前页面的webview对象实例 App
page.route 获取当前页面的路由
  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 不能在 App.vue 里面进行页面跳转。

uniapp文档常用整理相关推荐

  1. python批量提取word指定内容_使用python批量读取word文档并整理关键信息到excel表格的实例...

    目标 最近实验室里成立了一个计算机兴趣小组 倡议大家多把自己解决问题的经验记录并分享 就像在CSDN写博客一样 虽然刚刚起步 但考虑到后面此类经验记录的资料会越来越多 所以一开始就要做好模板设计(如下 ...

  2. Servlet中文API文档-个人整理版

    Servlet中文API文档-个人整理版 一.Servlet 说明:servlet抽象集是javax.servlet.Servlet接口,它规定了必须由Servlet类实现由servlet引擎识别和管 ...

  3. 工作模板文档实践整理

    学习上要善于积累人非生而知之,而是学而知之,行而知之.学习,实践是获取知识的唯一途径,是成才的必由之路.学习是个日积月累的过程.善于积累,是提高个人素质的重要环节.古人说:"积土成山,风雨兴 ...

  4. mes项目 组态开发项目reademe文档 待整理

    vue2 项目 ========= vue cmd命令所包含知识点: 当npm install无效,需要进行npm cache clean --force命令操作, 如果这样操作不成功的话,去C盘清空 ...

  5. GIT用SSH链接的相关文档的整理与补充

    SSH简介:SSH链接方式是啥? ssh是一种安全的传输模式 git要求推送代码的用户是合法的,所以每次推送时候都要输入密码, 用以验证你是否为合法用户,为了省去每次都要输入密码的步骤,采用ssh公钥 ...

  6. 帮助指令 man ,help及文档常用管理指令

    帮助指令 man,help 1. man 当我们想要了解某个命令如何使用,及选项的含义是什么以及配置文件的帮助信息时,可以使用 man [命令或配置文件],这样便可以获得到帮助提示信息了. 语法格式: ...

  7. Mac Office文档常用快捷键

    最常用的剪切.拷贝.粘贴等快捷键 对应windows就是ctrl替换成command Command-X:剪切 Command-C:拷贝 Command-V:粘贴 Command-Z:撤销 Comma ...

  8. python批量提取word指定内容到excel_(转)用python批量读取word文档并整理关键信息到excel表格...

    目标 最近实验室里成立了一个计算机兴趣小组 倡议大家多把自己解决问题的经验记录并分享 就像在CSDN写博客一样 虽然刚刚起步 但考虑到后面此类经验记录的资料会越来越多 所以一开始就要做好模板设计(如下 ...

  9. openstack ice版文档horizon整理(页面resize)

    2019独角兽企业重金招聘Python工程师标准>>> 感谢朋友支持本博客,欢迎共同探讨交流,由于能力和时间有限,错误之处在所难免,欢迎指正! 如有转载,请保留源作者博客信息. Be ...

最新文章

  1. 【Ant Design Pro 一】 环境搭建,创建一个demo
  2. mysql======基本的数据查询(1)
  3. 数字图像处理7:图像增强之灰度变换
  4. 改善代码设计 —— 组织好你的数“.NET研究”据(Composing Data)
  5. 使用 NOR Flash 中的supervivi 下载裸机程序到NandFlash
  6. linux常用核心命令大全(只写程序员常用的)
  7. Java调用跟踪系统_Tracer:在分布式系统中的调用跟踪和日志相关
  8. 华为手机使用应用沙盒动态修改分辨率参数
  9. python大作业数独_python做一个数独小游戏
  10. JSF 中使用自定义Navigation
  11. JSON-lib框架,转换JSON、XML不再困难
  12. 单元测试的目的及使用
  13. 微信活码系统源码/微信群二维码/活码生成网站系统/生成微信活码
  14. 我的计算机制作幻灯片在哪,如何制作幻灯片呢?具体的步骤能教教我嘛?
  15. [经验教程]2022微信怎么给微信好友批量群发消息?
  16. python合并word表格_python docx处理word文档中表格合并问题
  17. sdnu oj 1228 Overwatch 互素
  18. Error 0x80240017: Failed to execute MSU package.
  19. Mysql 给表添加字段
  20. Imageproplus识别孔隙

热门文章

  1. AI智能车牌识别技术如何提升出行体验?
  2. sat数学可以用计算机吗,SAT考试数学是否可以使用计算器
  3. 吐血推荐 36招搞定电脑一切难题
  4. Speedoffice(word)如何生成目录
  5. 苏门答腊岛地震 苏门答腊9.1级地震 2004年苏门答腊地震 印尼苏门答腊地震 印尼苏门答腊岛地震
  6. 用C语言设计一个简易的选择题答题系统
  7. realme真我gt能升级鸿蒙系统吗,realme真我GT Neo闪速版曝光,换用双电芯电池
  8. 微信群机器人(仿真企业微信群机器人)
  9. Pytorch实现人脸多属性识别
  10. 创建微信小程序日期和时间的组件