uniapp文档常用整理
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文档常用整理相关推荐
- python批量提取word指定内容_使用python批量读取word文档并整理关键信息到excel表格的实例...
目标 最近实验室里成立了一个计算机兴趣小组 倡议大家多把自己解决问题的经验记录并分享 就像在CSDN写博客一样 虽然刚刚起步 但考虑到后面此类经验记录的资料会越来越多 所以一开始就要做好模板设计(如下 ...
- Servlet中文API文档-个人整理版
Servlet中文API文档-个人整理版 一.Servlet 说明:servlet抽象集是javax.servlet.Servlet接口,它规定了必须由Servlet类实现由servlet引擎识别和管 ...
- 工作模板文档实践整理
学习上要善于积累人非生而知之,而是学而知之,行而知之.学习,实践是获取知识的唯一途径,是成才的必由之路.学习是个日积月累的过程.善于积累,是提高个人素质的重要环节.古人说:"积土成山,风雨兴 ...
- mes项目 组态开发项目reademe文档 待整理
vue2 项目 ========= vue cmd命令所包含知识点: 当npm install无效,需要进行npm cache clean --force命令操作, 如果这样操作不成功的话,去C盘清空 ...
- GIT用SSH链接的相关文档的整理与补充
SSH简介:SSH链接方式是啥? ssh是一种安全的传输模式 git要求推送代码的用户是合法的,所以每次推送时候都要输入密码, 用以验证你是否为合法用户,为了省去每次都要输入密码的步骤,采用ssh公钥 ...
- 帮助指令 man ,help及文档常用管理指令
帮助指令 man,help 1. man 当我们想要了解某个命令如何使用,及选项的含义是什么以及配置文件的帮助信息时,可以使用 man [命令或配置文件],这样便可以获得到帮助提示信息了. 语法格式: ...
- Mac Office文档常用快捷键
最常用的剪切.拷贝.粘贴等快捷键 对应windows就是ctrl替换成command Command-X:剪切 Command-C:拷贝 Command-V:粘贴 Command-Z:撤销 Comma ...
- python批量提取word指定内容到excel_(转)用python批量读取word文档并整理关键信息到excel表格...
目标 最近实验室里成立了一个计算机兴趣小组 倡议大家多把自己解决问题的经验记录并分享 就像在CSDN写博客一样 虽然刚刚起步 但考虑到后面此类经验记录的资料会越来越多 所以一开始就要做好模板设计(如下 ...
- openstack ice版文档horizon整理(页面resize)
2019独角兽企业重金招聘Python工程师标准>>> 感谢朋友支持本博客,欢迎共同探讨交流,由于能力和时间有限,错误之处在所难免,欢迎指正! 如有转载,请保留源作者博客信息. Be ...
最新文章
- 【Ant Design Pro 一】 环境搭建,创建一个demo
- mysql======基本的数据查询(1)
- 数字图像处理7:图像增强之灰度变换
- 改善代码设计 —— 组织好你的数“.NET研究”据(Composing Data)
- 使用 NOR Flash 中的supervivi 下载裸机程序到NandFlash
- linux常用核心命令大全(只写程序员常用的)
- Java调用跟踪系统_Tracer:在分布式系统中的调用跟踪和日志相关
- 华为手机使用应用沙盒动态修改分辨率参数
- python大作业数独_python做一个数独小游戏
- JSF 中使用自定义Navigation
- JSON-lib框架,转换JSON、XML不再困难
- 单元测试的目的及使用
- 微信活码系统源码/微信群二维码/活码生成网站系统/生成微信活码
- 我的计算机制作幻灯片在哪,如何制作幻灯片呢?具体的步骤能教教我嘛?
- [经验教程]2022微信怎么给微信好友批量群发消息?
- python合并word表格_python docx处理word文档中表格合并问题
- sdnu oj 1228 Overwatch 互素
- Error 0x80240017: Failed to execute MSU package.
- Mysql 给表添加字段
- Imageproplus识别孔隙