怎么建设一个开源平台网站,app怎么做需要多少钱,西宁做网站的网络公司,网站自适应源码导语#xff1a;最近开发了一个基于 uniapp 框架的项目#xff0c;有一些感触和体会#xff0c;所以想记录以下一些技术和经验#xff0c;在这里做一个系列总结#xff0c;算是对自己做一个交代吧。 目录
简介全局文件全局组件常用 API条件编译插件开发
简介
uniapp 是… 导语最近开发了一个基于 uniapp 框架的项目有一些感触和体会所以想记录以下一些技术和经验在这里做一个系列总结算是对自己做一个交代吧。 目录
简介全局文件全局组件常用 API条件编译插件开发
简介
uniapp 是 DCloud 公司于 2015 年开发的一款基于 vue 的跨端框架编写一套代码就可以运行到 web、小程序各种小程序和 appAndroid 和 iOS端使得开发一个项目的成本很小效率很高方便快捷。
uniapp 官网
功能框架图 各端运行效果 全局文件
这里主要是两个文件pages.json管理页面路由、和manifest.json管理应用配置。
pages.json
pages.json 文件是进行全局配置包括页面文件路径、样式、原生导航栏等内容。
以下是官网给出的配置示例
{pages: [{path: pages/component/index,style: {navigationBarTitleText: 组件}},{path: pages/API/index,style: {navigationBarTitleText: 接口}},{path: pages/component/view/index,style: {navigationBarTitleText: view}}],condition: {//模式配置仅开发期间生效current: 0, //当前激活的模式list 的索引项list: [{name: test, //模式名称path: pages/component/view/index //启动页面必选}]},globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: 演示,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8,usingComponents: {collapse-tree-item: /components/collapse-tree-item},renderingMode: seperated, // 仅微信小程序webrtc 无法正常时尝试强制关闭同层渲染pageOrientation: portrait, //横屏配置全局屏幕旋转设置(仅 APP/微信/QQ小程序)支持 auto / portrait / landscaperpxCalcMaxDeviceWidth: 960,rpxCalcBaseDeviceWidth: 375,rpxCalcIncludeWidth: 750},tabBar: {color: #7A7E83,selectedColor: #3cc51f,borderStyle: black,backgroundColor: #ffffff,height: 50px,fontSize: 10px,iconWidth: 24px,spacing: 3px,iconfontSrc: static/iconfont.ttf, // app tabbar 字体.ttf文件路径 app 3.4.4list: [{pagePath: pages/component/index,iconPath: static/image/icon_component.png,selectedIconPath: static/image/icon_component_HL.png,text: 组件,iconfont: {// 优先级高于 iconPath该属性依赖 tabbar 根节点的 iconfontSrctext: \ue102,selectedText: \ue103,fontSize: 17px,color: #000000,selectedColor: #0000ff}},{pagePath: pages/API/index,iconPath: static/image/icon_API.png,selectedIconPath: static/image/icon_API_HL.png,text: 接口}],midButton: {width: 80px,height: 50px,text: 文字,iconPath: static/image/midButton_iconPath.png,iconWidth: 24px,backgroundImage: static/image/midButton_backgroundImage.png}},easycom: {autoscan: true, //是否自动扫描组件custom: {//自定义扫描规则^uni-(.*): /components/uni-$1.vue}},topWindow: {path: responsive/top-window.vue,style: {height: 44px}},leftWindow: {path: responsive/left-window.vue,style: {width: 300px}},rightWindow: {path: responsive/right-window.vue,style: {width: 300px},matchMedia: {minWidth: 768}}
}manifest.json
manifest.json 文件是应用的配置文件用于指定应用的名称、图标、权限等内容。
以下是官网给出的配置示例
{appid: __UNI__XXXXXX创建应用时云端分配的不要修改。,name: 应用名称如uni-app,description: 应用描述,versionName: 1.0.0,versionCode: 100,uniStatistics: {enable: false},app-plus: {allowsInlineMediaPlayback: true, //可选Boolean类型, 是否允许 h5 中视频非全屏播放3.8.5版本开始默认值为 true 仅iOS生效mediaPlaybackRequiresUserAction: false, //可选Boolean类型,可通过此属性配置 h5中的音视频是否可通过API自动播放注意当设置为 false 时允许API控制自动播放3.8.5版本开始默认值为 false仅iOS生效 3.0.1 版本支持nvueCompiler: weex, //可选字符串类型nvue页面编译模式可取值uni-app、weex参考https://ask.dcloud.net.cn/article/36074nvueStyleCompiler: weex, //可选字符串类型nvue页面样式编译模式可取值uni-app、weex参考https://ask.dcloud.net.cn/article/38751renderer: native, //可选字符串类型可不加载基于 webview 的运行框架可取值nativecompilerVersion: 2, //可选数字类型编译器版本可取值2、3参考https://ask.dcloud.net.cn/article/36599nvueLaunchMode: normal, //可选字符串类型nvue首页启动模式compilerVersion值为3时生效可取值normal、fast参考https://ask.dcloud.net.cn/article/36749nvue: {//可选JSON对象nvue页面相关配置flex-direction: row //可选字符串类型nvue页面的flex-direction默认值可取值row、row-reverse、column、column-reverse},optimization: {//可选JSON对象分包配置subPackages: true //可选Boolean类型是否开启分包优化参考https://uniapp.dcloud.io/collocation/pages.html#subpackages},uniStatistics: {//可选JSON对象uni统计配置enable: true //可选Boolean类型是否开启uni统计},screenOrientation: [//可选字符串数组类型应用支持的横竖屏portrait-primary, //可选字符串类型支持竖屏portrait-secondary, //可选字符串类型支持反向竖屏landscape-primary, //可选字符串类型支持横屏landscape-secondary //可选字符串类型支持反向横屏],splashscreen: {//可选JSON对象splash界面配置alwaysShowBeforeRender: true, //可选Boolean类型是否等待首页渲染完毕后再关闭启动界面autoclose: true, //可选Boolean类型是否自动关闭启动界面waiting: true, //可选Boolean类型是否在程序启动界面显示等待雪花event: loaded, //可选字符串类型可取值titleUpdate、rendering、loadeduni-app项目已废弃target: defalt, //可选字符串类型可取值default、seconduni-app项目已废弃dealy: 0, //可选数字类型延迟自动关闭启动时间单位为毫秒uni-app项目已废弃ads: {//可选JSON对象开屏广告配置backaground: #RRGGBB, //可选字符串类型格式为#RRGGBB开屏广告背景颜色image: //可选字符串类型底部图片地址相对应用资源目录路径},androidTranslucent: false //可选Boolean类型使用“自定义启动图”启动界面时是否显示透明过渡界面可解决点击桌面图标延时启动应用的效果},modules: {//可选JSON对象使用的模块Bluetooth: {//可选JSON对象Bluetooth(低功耗蓝牙)description: 低功耗蓝牙},Contacts: {//可选JSON对象Contact(通讯录)description: 通讯录},FaceID: {//可选JSON对象FaceID(人脸识别)仅iOS支持description: 人脸识别},Fingerprint: {//可选JSON对象Fingerprint(指纹识别)description: 指纹识别},Geolocation: {//可选JSON对象Geolocation(定位)description: 定位},iBeacon: {//可选JSON对象iBeacondescription: iBeacon},LivePusher: {//可选JSON对象LivePusher(直播推流)description: 直播推流},Maps: {//可选JSON对象Maps(地图)description: 地图},Messaging: {//可选JSON对象Messaging(短彩邮件消息)description: 短彩邮件消息},OAuth: {//可选JSON对象OAuth(登录鉴权)description: 登录鉴权},Payment: {//可选JSON对象Payment(支付)description: iBeacon},Push: {//可选JSON对象Push(消息推送)description: iBeacon},Share: {//可选JSON对象Share(分享)description: iBeacon},Speech: {//可选JSON对象Speech(语音输入)description: iBeacon},Statistic: {//可选JSON对象Statistic(统计)description: iBeacon},SQLite: {//可选JSON对象SQLite(统计)description: iBeacon},VideoPlayer: {//可选JSON对象VideoPlayer(视频播放)description: iBeacon},Webview-x5: {//可选JSON对象Android X5 Webview(腾讯TBS)仅Android支持description: iBeacon},UIWebview: {//可选JSON对象UIWebview仅iOS支持description: iBeacon}},webView: {// 3.5.0 当系统webview低于指定版本时会弹出提示。或者下载x5内核后继续启动仅Android支持minUserAgentVersion: 95.0.4638.75, // 最小webview版本x5: {// 此属性需要勾选 Android X5 Webview 模块详细参见下面的说明timeOut: 3000, // 超时时间showTipsWithoutWifi: true, // 是否在非WiFi网络环境时显示用户确认下载x5内核的弹窗。allowDownloadWithoutWiFi: false // 是否允许用户在非WiFi网络时进行x5内核的下载。如果为true就不会显示用户确认的弹窗。}},checkPermissionDenied: false, // 是否校验已拒绝权限 如果拒绝则不会再申请 默认false 不校验已拒绝权限distribute: {//必选JSON对象云端打包配置android: {//可选JSON对象Android平台云端打包配置packagename: , //必填字符串类型Android包名keystore: , //必填字符串类型Android签名证书文件路径password: , //必填字符串类型Android签名证书文件的密码aliasname: , //必填字符串类型Android签名证书别名schemes: , //可选字符串类型参考https://uniapp.dcloud.io/tutorial/app-android-schemesabiFilters: [//可选字符串数组类型参考https://uniapp.dcloud.io/tutorial/app-android-abifiltersarmeabi-v7a,arm64-v8a,x86,x86_64],permissions: [//可选字符串数组类型Android权限配置uses-feature android:name\android.hardware.camera\/],custompermissions: false, //可选Boolean类型是否自定义Android权限配置permissionExternalStorage: {//可选JSON对象Android平台应用启动时申请读写手机存储权限策略request: always, //必填字符串类型申请读写手机存储权限策略可取值none、once、alwaysprompt: //可选字符串类型当request设置为always值用户拒绝时弹出提示框上的内容},permissionPhoneState: {//可选JSON对象Android平台应用启动时申请读取设备信息权限配置request: always, //必填字符串类型申请读取设备信息权限策略可取值none、once、alwaysprompt: //可选字符串类型当request设置为always值用户拒绝时弹出提示框上的内容},minSdkVersion: 21, //可选数字类型Android平台最低支持版本参考https://uniapp.dcloud.io/tutorial/app-android-minsdkversiontargetSdkVersion: 30, //可选数字类型Android平台目标版本参考https://uniapp.dcloud.io/tutorial/app-android-targetsdkversionpackagingOptions: [//可选字符串数组类型Android平台云端打包时build.gradle的packagingOptions配置项doNotStrip */armeabi-v7a/*.so,merge **/LICENSE.txt],jsEngine: v8, //可选字符串类型uni-app使用的JS引擎可取值v8、jscdebuggable: false, //可选Boolean类型是否开启Android调试开关locale: default, //可选应用的语言forceDarkAllowed: false, //可选Boolean类型是否强制允许暗黑模式resizeableActivity: false, //可选Boolean类型是否支持分屏调整窗口大小hasTaskAffinity: false, //可选Boolean类型是否设置androidtaskAffinitybuildFeatures: {//HBuilderX3.5.0版本支持可选JSON对象Android平台云端打包时build.gradle的buildFeatures配置项dataBinding: false, //可选Boolean类型是否设置dataBindingviewBinding: false //可选Boolean类型是否设置viewBinding}},ios: {//可选JSON对象iOS平台云端打包配置appid: , //必填字符串类型iOS平台Bundle IDmobileprovision: , //必填字符串类型iOS打包使用的profile文件路径p12: , //必填字符串类型iOS打包使用的证书文件路径password: , //必填字符串类型iOS打包使用的证书密码devices: iphone, //必填字符串类型iOS支持的设备类型可取值iphone、ipad、universalurlschemewhitelist: baidumap, //可选字符串类型应用访问白名单列表参考https://uniapp.dcloud.io/tutorial/app-ios-schemewhitelisturltypes: , //可选字符串类型参考https://uniapp.dcloud.io/tutorial/app-ios-schemesUIBackgroundModes: audio, //可选字符串类型应用后台运行模式参考https://uniapp.dcloud.io/tutorial/app-ios-uibackgroundmodesframeworks: [//可选字符串数组类型依赖的系统库已废弃推荐使用uni原生插件扩展使用系统依赖库CoreLocation.framework],deploymentTarget: 10.0, //可选字符串类型iOS支持的最低版本privacyDescription: {//可选JSON对象iOS隐私信息访问的许可描述NSPhotoLibraryUsageDescription: , //可选字符串类型系统相册读取权限描述NSPhotoLibraryAddUsageDescription: , //可选字符串类型系统相册写入权限描述NSCameraUsageDescription: , //可选字符串类型摄像头使用权限描述NSMicrophoneUsageDescription: , //可选字符串类型麦克风使用权限描述NSLocationWhenInUseUsageDescription: , //可选字符串类型运行期访问位置权限描述NSLocationAlwaysUsageDescription: , //可选字符串类型后台运行访问位置权限描述NSLocationAlwaysAndWhenInUseUsageDescription: , //可选字符串类型运行期后后台访问位置权限描述NSCalendarsUsageDescription: , //可选字符串类型使用日历权限描述NSContactsUsageDescription: , //可选字符串类型使用通讯录权限描述NSBluetoothPeripheralUsageDescription: , //可选字符串类型使用蓝牙权限描述NSBluetoothAlwaysUsageDescription: , //可选字符串类型后台使用蓝牙权限描述NSSpeechRecognitionUsageDescription: , //可选字符串类型系统语音识别权限描述NSRemindersUsageDescription: , //可选字符串类型系统提醒事项权限描述NSMotionUsageDescription: , //可选字符串类型使用运动与健康权限描述NSHealthUpdateUsageDescription: , //可选字符串类型使用健康更新权限描述NSHealthShareUsageDescription: , //可选字符串类型使用健康分享权限描述NSAppleMusicUsageDescription: , //可选字符串类型使用媒体资料库权限描述NFCReaderUsageDescription: , //可选字符串类型使用NFC权限描述NSHealthClinicalHealthRecordsShareUsageDescription: , //可选字符串类型访问临床记录权限描述NSHomeKitUsageDescription: , //可选字符串类型访问HomeKit权限描述NSSiriUsageDescription: , //可选字符串类型访问Siri权限描述NSFaceIDUsageDescription: , //可选字符串类型使用FaceID权限描述NSLocalNetworkUsageDescription: , //可选字符串类型访问本地网络权限描述NSUserTrackingUsageDescription: //可选字符串类型跟踪用户活动权限描述},idfa: true, //可选Boolean类型是否使用广告标识capabilities: {//可选JSON对象应用的能力配置Capabilities},CFBundleName: HBuilder, //可选字符串类型CFBundleName名称validArchitectures: [//可选字符串数组类型编译时支持的CPU指令可取值arm64、arm64e、armv7、armv7s、x86_64arm64],pushRegisterMode: manual, //可选使用“Push(消息推送)”模块时申请系统推送权限模式manual表示调用push相关API时申请其它值表示应用启动时自动申请privacyRegisterMode: manual //可选仅iOS有效设置为manual表示用户同意隐私政策后才获取idfv设置为其它值表示应用启动时自动获取},sdkConfigs: {//可选JSON对象三方SDK相关配置geolocation: {//可选JSON对象Geolocation(定位)模块三方SDK配置system: {//可选JSON对象使用系统定位__platform__: [ios, android] //可选字符串数组类型支持的平台},amap: {//可选JSON对象使用高德定位SDK配置__platform__: [ios, android], //可选字符串数组类型支持的平台appkey_ios: , //必填字符串类型iOS平台高德定位appkeyappkey_android: //必填字符串类型Android平台高德定位appkey},baidu: {//可选JSON对象使用百度定位SDK配置__platform__: [ios, android], //可选字符串数组类型支持的平台appkey_ios: , //必填字符串类型iOS平台百度定位appkeyappkey_android: //必填字符串类型Android平台百度定位appkey}},maps: {//可选JSON对象Maps(地图)模块三方SDK配置amap: {//可选JSON对象使用高德地图SDK配置appkey_ios: , //必填字符串类型iOS平台高德地图appkeyappkey_android: //必填字符串类型Android平台高德地图appkey},baidu: {//可选JSON对象使用百度地图SDK配置appkey_ios: , //必填字符串类型iOS平台百度地图appkeyappkey_android: //必填字符串类型Android平台百度地图appkey},google: {//可选JSON对象使用Google地图SDK配置APIKey_ios: , //必填字符串类型iOS平台Google地图APIKeyAPIKey_android: //必填字符串类型Android平台Google地图APIKey}},oauth: {//可选JSON对象OAuth(登录鉴权)模块三方SDK配置univerify: {//可选JSON对象使用一键登录(univerify)SDK配置无需手动配置参数云端打包自动获取配置参数},apple: {//可选JSON对象使用苹果登录(Sign in with Apple)SDK配置无配置参数仅iOS平台支持},weixin: {//可选JSON对象使用微信登录SDK配置appid: , //必填字符串类型微信开放平台申请的appidappsecret: , //必填字符串类型微信开放平台申请的appsecretUniversalLinks: //可选字符串类型微信开放平台配置的iOS平台通用链接},qq: {//可选JSON对象使用QQ登录SDK配置appid: , //必填字符串类型QQ开放平台申请的appidUniversalLinks: //可选字符串类型QQ开放平台配置的iOS平台通用链接},sina: {//可选JSON对象使用新浪微博登录SDK配置appkey: , //必填字符串类型新浪微博开放平台申请的appidredirect_uri: , //必填字符串类型新浪微博开放平台配置的redirect_uriUniversalLinks: //可选字符串类型新浪微博开放平台配置的iOS平台通用链接},google: {//可选JSON对象使用Google登录SDK配置clientid: //必填字符串类型Google开发者后台申请的clientid},facebook: {//可选JSON对象使用Facebook登录SDK配置appid: //必填字符串类型Facebook开发者后台申请的appid}},payment: {//可选JSON对象Payment(支付)模块三方SDK配置appleiap: {//可选JSON对象使用Apple应用内支付配置无配置参数仅iOS平台支持},alipay: {//可选JSON对象使用支付宝支付SDK配置__platform__: [ios, android] //可选字符串数组类型支持的平台},weixin: {//可选JSON对象使用微信支付SDK配置__platform__: [ios, android], //可选字符串数组类型支持的平台appid: , //必填字符串类型微信开放平台申请的appidUniversalLinks: //可选字符串类型微信开放平台配置的iOS平台通用链接},paypal: {//可选JSON对象使用paypal支付SDK配置__platform__: [ios, android], //可选字符串数组类型支持的平台returnURL_ios: , //必填字符串类型paypa开发者者后台配置的iOS平台returnURLreturnURL_android: //必填字符串类型paypa开发者者后台配置的Android平台returnURL},stripe: {//可选JSON对象使用stripe支付SDK配置__platform__: [ios, android], //可选字符串数组类型支持的平台returnURL_ios: //必填字符串类型stripe开发者者后台配置的iOS平台returnURL},google: {//可选JSON对象使用google支付SDK配置无配置参数仅Android平台支持}},push: {//可选JSON对象Push(消息推送)模块三方SDK配置unipush: {//可选JSON对象使用UniPush SDK配置无需手动配置参数云端打包自动获取配置参数icons: {//可选JSON对象推送图标配置push: {//可选JSON对象Push图标配置ldpi: , //可选字符串类型普通屏设备推送图标路径分辨率要求48x48mdpi: , //可选字符串类型大屏设备设备推送图标路径分辨率要求48x48hdpi: , //可选字符串类型高分屏设备推送图标路径分辨率要求72x72xdpi: , //可选字符串类型720P高分屏设备推送图标路径分辨率要求96x96xxdpi: , //可选字符串类型1080P高密度屏幕推送图标路径分辨率要求144x144xxxdpi: //可选字符串类型4K屏设备推送图标路径分辨率要求192x192},smal: {//可选JSON对象Push小图标配置ldpi: , //可选字符串类型普通屏设备推送小图标路径分辨率要求18x18mdpi: , //可选字符串类型大屏设备设备推送小图标路径分辨率要求24x24hdpi: , //可选字符串类型高分屏设备推送小图标路径分辨率要求36x36xdpi: , //可选字符串类型720P高分屏设备推送小图标路径分辨率要求48x48xxdpi: , //可选字符串类型1080P高密度屏幕推送小图标路径分辨率要求72x72xxxdpi: //可选字符串类型4K屏设备推送小图标路径分辨率要求96x96}}},igexin: {//可选JSON对象使用个推推送SDK配置**已废弃推荐使用UniPushUniPush是个推推送VIP版功能更强大**appid: , //必填字符串类型个推开放平台申请的appidappkey: , //必填字符串类型个推开放平台申请的appkeyappsecret: , //必填字符串类型个推开放平台申请的appsecreticons: {//可选JSON对象推送图标配置push: {//可选JSON对象Push图标配置ldpi: , //可选字符串类型普通屏设备推送图标路径分辨率要求48x48mdpi: , //可选字符串类型大屏设备设备推送图标路径分辨率要求48x48hdpi: , //可选字符串类型高分屏设备推送图标路径分辨率要求72x72xdpi: , //可选字符串类型720P高分屏设备推送图标路径分辨率要求96x96xxdpi: , //可选字符串类型1080P高密度屏幕推送图标路径分辨率要求144x144xxxdpi: //可选字符串类型4K屏设备推送图标路径分辨率要求192x192},smal: {//可选JSON对象Push小图标配置ldpi: , //可选字符串类型普通屏设备推送小图标路径分辨率要求18x18mdpi: , //可选字符串类型大屏设备设备推送小图标路径分辨率要求24x24hdpi: , //可选字符串类型高分屏设备推送小图标路径分辨率要求36x36xdpi: , //可选字符串类型720P高分屏设备推送小图标路径分辨率要求48x48xxdpi: , //可选字符串类型1080P高密度屏幕推送小图标路径分辨率要求72x72xxxdpi: //可选字符串类型4K屏设备推送小图标路径分辨率要求96x96}}}},share: {//可选JSON对象Share(分享)模块三方SDK配置weixin: {//可选JSON对象使用微信分享SDK配置appid: , //必填字符串类型微信开放平台申请的appidUniversalLinks: //可选字符串类型微信开放平台配置的iOS平台通用链接},qq: {//可选JSON对象使用QQ分享SDK配置appid: , //必填字符串类型QQ开放平台申请的appidUniversalLinks: //可选字符串类型QQ开放平台配置的iOS平台通用链接},sina: {//可选JSON对象使用新浪微博分享SDK配置appkey: , //必填字符串类型新浪微博开放平台申请的appidredirect_uri: , //必填字符串类型新浪微博开放平台配置的redirect_uriUniversalLinks: //可选字符串类型新浪微博开放平台配置的iOS平台通用链接}},speech: {//可选JSON对象Speech(语音识别)模块三方SDK配置baidu: {//可选JSON对象使用百度语音识别SDK配置appid: , //必填字符串类型百度开放平台申请的appidapikey: , //必填字符串类型百度开放平台申请的apikeysecretkey: //必填字符串类型百度开放平台申请的secretkey}},statics: {//可选JSON对象Statistic(统计)模块三方SDK配置umeng: {//可选JSON对象使用友盟统计SDK配置appkey_ios: , //必填字符串类型友盟统计开放平台申请的iOS平台appkeychannelid_ios: , //可选字符串类型友盟统计iOS平台的渠道标识appkey_android: , //必填字符串类型友盟统计开放平台申请的Android平台appkeychannelid_android: //可选字符串类型友盟统计Android平台的渠道标识},google: {//可选JSON对象使用Google Analytics for Firebase配置config_ios: , //必填字符串类型Google Firebase统计开发者后台获取的iOS平台配置文件路径config_android: //必填字符串类型Google Firebase统计开发者后台获取的Android平台配置文件路径}},ad: {//可选JSON对象uni-AD配置360: {//可选JSON对象使用360广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},csj: {//可选JSON对象使用今日头条穿山甲广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},gdt: {//可选JSON对象使用腾讯优量汇广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},ks: {//可选JSON对象使用快手广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},ks-content: {//可选JSON对象使用快手内容联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},sigmob: {//可选JSON对象使用Sigmob广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},hw: {//可选JSON对象使用华为广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},bd: {//可选JSON对象使用百度百青藤广告联盟SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数},BXM-AD: {//可选JSON对象使用互动游戏(变现猫)SDK无需手动配置在uni-AD后台申请开通后自动获取配置参数}}},icons: {//可选JSON对象应用图标相关配置ios: {//可选JSON对象iOS平台图标配置appstore: , //必填字符串类型分辨率1024x1024, 提交app sotre使用的图标路径iphone: {//可选JSON对象iPhone设备图标配置app2x: , //可选字符串类型分辨率120x120程序图标路径app3x: , //可选字符串类型分辨率180x180程序图标路径spotlight2x: , //可选字符串类型分辨率80x80Spotlight搜索图标路径spotlight3x: , //可选字符串类型分辨率120x120Spotlight搜索图标路径settings2x: , //可选字符串类型分辨率58x58Settings设置图标路径settings3x: , //可选字符串类型分辨率87x87Settings设置图标路径notification2x: , //可选字符串类型分辨率40x40通知栏图标路径notification3x: //可选字符串类型分辨率60x60通知栏图标路径},ipad: {//可选JSON对象iPad设备图标配置app: , //可选字符串类型分辨率76x76程序图标图标路径app2x: , //可选字符串类型分辨率152x152程序图标图标路径proapp2x: , //可选字符串类型分辨率167x167程序图标图标路径spotlight: , //可选字符串类型分辨率40x40Spotlight搜索图标路径spotlight2x: , //可选字符串类型分辨率80x80Spotlight搜索图标路径settings: , //可选字符串类型分辨率29x29Settings设置图标路径settings2x: , //可选字符串类型分辨率58x58Settings设置图标路径notification: , //可选字符串类型分辨率20x20通知栏图标路径notification2x: //可选字符串类型分辨率740x40通知栏图标路径}},android: {//可选JSON对象Android平台图标配置ldpi: , //可选字符串类型普通屏设备程序图标分辨率要求48x48已废弃mdpi: , //可选字符串类型大屏设备程序图标分辨率要求48x48已废弃hdpi: , //可选字符串类型高分屏设备程序图标分辨率要求72x72xhdpi: , //可选字符串类型720P高分屏设备程序图标分辨率要求96x96xxhdpi: , //可选字符串类型1080P高分屏设备程序图标分辨率要求144x144xxxhdpi: //可选字符串类型2K屏设备程序图标分辨率要求192x192}},splashscreen: {//可选JSON对象启动界面配置iosStyle: common, //可选字符串类型iOS平台启动界面样式可取值common、default、storyboardios: {//可选JSON对象iOS平台启动界面配置storyboard: , //可选字符串类型自定义storyboard启动界面文件路径iosStyle值为storyboard时生效iphone: {//可选JSON对象iPhone设备启动图配置iosStyle值为default时生效default: , //可选字符串类型分辨率320x480iPhone3G/GS启动图片路径已废弃retina35: , //可选字符串类型分辨率640x9603.5英寸设备(iPhone4/4S)启动图片路径已废弃retina40: , //可选字符串类型分辨率640x11364.0英寸设备(iPhone5/5S)启动图片路径retina40l: , //可选字符串类型分辨率1136x6404.0英寸设备(iPhone5/5S)横屏启动图片路径retina47: , //可选字符串类型分辨率750x13344.7英寸设备iPhone6/7/8启动图片路径retina47l: , //可选字符串类型分辨率1334x7504.7英寸设备iPhone6/7/8横屏启动图片路径retina55: , //可选字符串类型分辨率1242x22085.5英寸设备iPhone6/7/8Plus启动图片路径retina55l: , //可选字符串类型分辨率2208x12425.5英寸设备iPhone6/7/8Plus横屏启动图片路径iphonex: , //可选字符串类型分辨率1125x24365.8英寸设备iPhoneX/XS启动图片路径iphonexl: , //可选字符串类型分辨率2436x11255.8英寸设备iPhoneX/XS横屏启动图片路径portrait-896h2x: , //可选字符串类型分辨率828x17926.1英寸设备iPhoneXR启动图片路径landscape-896h2x: , //可选字符串类型分辨率1792x8286.1英寸设备iPhoneXRiPhoneXR横屏启动图片路径portrait-896h3x: , //可选字符串类型分辨率1242x26886.5英寸设备iPhoneXS Max启动图片路径landscape-896h3x: //可选字符串类型分辨率2688x12426.5英寸设备iPhoneXS Max横屏启动图片路径},ipad: {//可选JSON对象iPad设备启动图配置iosStyle值为default时生效portrait: , //可选字符串类型分辨率768x1004iPad竖屏启动图片路径已废弃portrait-retina: , //可选字符串类型分辨率1536x2008iPad高分屏竖屏启动图片路径已废弃landscape: , //可选字符串类型分辨率1024x748iPad横屏启动图片路径已废弃landscape-retina: , //可选字符串类型分辨率2048x1496iPad高分屏横屏启动图片路径已废弃portrait7: , //可选字符串类型分辨率768x10249.7/7.9英寸iPad/mini竖屏启动图片路径landscape7: , //可选字符串类型分辨率1024x7689.7/7.9英寸iPad/mini横屏启动图片路径portrait-retina7: , //可选字符串类型分辨率1536x20489.7/7.9英寸iPad/mini高分屏竖屏图片路径landscape-retina7: , //可选字符串类型分辨率2048x15369.7/7.9英寸iPad/mini高分屏横屏启动图片路径portrait-1112h2x: , //可选字符串类型分辨率1668x222410.5英寸iPad Pro竖屏启动图片路径landscape-1112h2x: , //可选字符串类型分辨率2224x166810.5英寸iPad Pro横屏启动图片路径portrait-1194h2x: , //可选字符串类型分辨率1668x238811英寸iPad Pro竖屏启动图片路径landscape-1194h2x: , //可选字符串类型分辨率2388x166811英寸iPad Pro横屏启动图片路径portrait-1366h2x: , //可选字符串类型分辨率2048x273212.9英寸iPad Pro竖屏启动图片路径landscape-1366h2x: //可选字符串类型分辨率2732x204812.9英寸iPad Pro横屏启动图片路径}},androidStyle: common, //可选字符串类型Android平台启动界面样式可取值common、defaultandroid: {//可选JSON对象Android平台启动图片配置 androidStyle值为default时生效ldpi: , //可选字符串类型分辨率320x442低密度屏幕启动图片路径已废弃mdpi: , //可选字符串类型分辨率240x282中密度屏幕启动图片路径已废弃hdpi: , //可选字符串类型分辨率480x762高密度屏幕启动图片路径xhdpi: , //可选字符串类型分辨率720x1242720P高密度屏幕启动图片路径xxhdpi: //可选字符串类型分辨率1080x18821080P高密度屏幕启动图片路径}},orientation: [//可选字符串数组类型应用支持的横竖屏**已废弃使用screenOrientation配置**portrait-primary,portrait-secondary,landscape-primary,landscape-secondary]},compatible: {//可选JSON对象uni-app兼容模式ignoreVersion: false, //可选Boolean类型是否忽略版本兼容检查提示runtimeVersion: , //可选字符串类型兼容的uni-app运行环境版本号多个版本使用,分割compilerVersion: //可选字符串类型兼容的编译器版本号},confusion: {//可选JSON对象原生混淆加密配置参考https://uniapp.dcloud.io/tutorial/app-sec-confusiondescription: , //可选字符串类型原生混淆描述resources: {//必填JSON对象原生混淆文件配置js/common.js: {//可选JSON对象键名为需要原生混淆的文件路径}}},channel: , //可选字符串类型渠道标识cers: {//可选JSON对象应用的异常崩溃与错误报告系统配置crash: true //可选Boolean类型是否提交应用异常崩溃信息},cache: {//可选JSON对象Webview窗口默认使用的缓存模式uni-app项目已废弃mode: default //可选字符串类型可取值default、cacheElseNetwork、noCache、cacheOnly},error: {//可选JSON对象页面加载错误配置uni-app项目仅对webview组件有效参考https://uniapp.dcloud.io/tutorial/app-webview-errorurl: //必填字符串类型webview页面错误是跳转的页面地址},kernel: {//可选JSON对象webview内核配置ios: WKWebview, //可选iOS平台使用的webview类型可取值WKWebview、UIWebviewrecovery: reload //可选iOS平台使用WKWebview时内核崩溃后的处理逻辑可取值restart、reload、none},launchwebview: {//可选JSON对象应用首页相关配置uni-app项目不建议手动修改plusrequire: normal, //可选字符串类型加载plus API时机可取值ahead、normal、later、noneinjection: false, //可选Boolean类型是否提前注入plus APIoverrideresource: [//可选JSON对象数组应用首页的拦截资源相关配置{match: , //可选字符串类型匹配拦截的资源url地址的正则表达式redirect: , //可选字符串类型拦截资源的重定向地址mime: , //可选字符串类型拦截资源的数据类型mimeencoding: , //可选字符串类型拦截资源的数据编码header: {//可选JSON对象拦截资源的http头数据}}],overrideurl: {//可选JSON对象应用首页的拦截链接请求处理逻辑mode: reject, //可选字符串类型拦截模式可取值allow、rejectmatch: , //可选字符串类型匹配拦截规则支持正则表达式exclude: none //可选字符串类型排除拦截理规则可取值none、redirect},replacewebapi: {//可选JSON对象是否重写Web API实现相关配置geolocation: none //可选字符串类型重写标准定位API可取值none、alldevice、auto},subNViews: [//可选JSON对象数组首页原生View相关配置已废弃{id: , //可选字符串类型原生View标识styles: {//可选JSON对象原生View样式},tags: [//可选JSON对象数组原生View中包含的tag标签列表{}]}],titleNView: {//可选JSON对象标题栏相关配置backgroundColor: #RRGGBB, //可选字符串类型#RRGGBB格式标题栏背景颜色titleText: , //可选字符串类型标题栏标题文字内容titleColor: #RRGGBB, //可选字符串类型#RRGGBB格式标题栏标题文字颜色titleSize: 17px, //可选字符串类型标题字体大小默认大小为17pxautoBackButton: true, //可选Boolean类型是否显示标题栏上返回键backButton: {//可选JSON对象返回键样式backgournd: #RRGGBB, //可选字符串类型#RRGGBB格式返回按钮背景颜色color: #RRGGBB, //可选字符串类型#RRGGBB格式返回图标颜色colorPressed: #RRGGBB //可选字符串类型#RRGGBB返回图标按下时的颜色},buttons: [//可选JSON对象数组标题栏按钮配置{color: #RRGGBB, //可选字符串类型#RRGGBB格式按钮上的文字颜色colorPressed: #RRGGBB, //可选字符串类型#RRGGBB格式按钮按下状态的文字颜色float: right, //可选字符串类型按钮显示位置可取值left、rightfontWeight: normal, //可选字符串类型按钮上文字的粗细可取值normal、boldfontSize: 22px, //可选字符串类型按钮上文字的大小fontSrc: , //可选字符串类型按钮上文字使用的字体文件路径text: //可选字符串类型按钮上显示的文字}],splitLine: {//可选JSON对象标题栏分割线样式color: #RRGGBB, //可选字符串类型#RRGGBB格式分割线颜色height: 1px //可选字符串类型分割线高度}},statusbar: {//可选JSON对象状态栏配置background: #RRGGBB //可选字符串类型#RRGGBB格式沉浸式状态栏样式下系统状态栏背景颜色},top: 0px, //可选字符串类型Webview的顶部偏移量支持px、%单位height: 100%, //可选字符串类型Webview窗口高度支持px、%单位bottom: 0px, //可选字符串类型Webview的底部偏移量仅在未同时设置top和height属性时生效backButtonAutoControl: none, //可选字符串类型运行环境自动处理返回键的控制逻辑可取值none、hide、closeadditionalHttpHeaders: {//可选JSON对象额外添加HTTP请求头数据}},nativePlugins: {//可选JSON数组对象uni原生插件配置参考https://nativesupport.dcloud.net.cn/NativePlugin/use/use_local_plugin%UniPlugin-ID%: {//可选JSON对象键名为插件标识值为插件配置参数}},popGesture: none, //可选字符串类型窗口侧滑返回默认效果可取值none、close、hiderunmode: liberate, //可选字符串类型应用资源运行模式可取值normal、liberatesafearea: {//可选JSON对象安全区域配置background: #RRGGBB, //可选字符串类型#RRGGBB格式安全区域背景颜色backgroundDark: #RRGGBB, //可选字符串类型#RRGGBB格式暗黑模式安全区域背景颜色bottom: {//可选JSON对象底部安全区域配置offset: none //可选字符串类型安全区域偏移值可取值auto、none},left: {//可选JSON对象左侧安全区域配置offset: none //可选字符串类型安全区域偏移值可取值auto、none},right: {//可选JSON对象左侧安全区域配置offset: none //可选字符串类型安全区域偏移值可取值auto、none}},softinput: {//可选JSON对象软键盘相关配置navBar: auto, //可选字符串类型iOS平台软键盘上导航条的显示模式可取值auto、noneauxiliary: false, //可选Boolean类型是否开启辅助输入功能mode: adjustResize //可选字符串类型弹出系统软键盘模式可取值adjustResize、adjustPan},ssl: {//可选JSON对象ssl相关设置untrustedca: accept //可选字符串类型https请求时服务器非受信证书的处理逻辑可取值accept、refuse、warning},statusbar: {//可选JSON对象应用启动后的系统状态栏相关配置immersed: none, //可选字符串类型沉浸式状态栏样式可取值none、suggestedDevice、supportedDevicestyle: light, //可选字符串类型系统状态栏样式前景颜色可取值dark、lightbackground: #RRGGBB //可选字符串类型#RRGGBB格式系统状态栏背景颜色},useragent: {//可选JSON对象应用UserAgent相关配置默认值为系统UserAgent并添加 uni-app Html5Plus/1.0value: , //可选字符串类型设置的默认userAgent值concatenate: false //可选Boolean类型是否将value值作为追加值连接到系统默认userAgent值之后},useragent_android: {//可选JSON对象Android平台应用UserAgent相关配置优先级高于useragent配置value: , //可选字符串类型设置的默认userAgent值concatenate: false //可选Boolean类型是否将value值作为追加值连接到系统默认userAgent值之后},useragent_ios: {//可选JSON对象iOS平台应用UserAgent相关配置优先级高于useragent配置value: , //可选字符串类型设置的默认userAgent值concatenate: false //可选Boolean类型是否将value值作为追加值连接到系统默认userAgent值之后}},quickapp: {},mp-weixin: {appid: wx开头的微信小程序appid,uniStatistics: {enable: false}},mp-baidu: {appid: 百度小程序appid},mp-toutiao: {appid: 抖音小程序appid},mp-lark: {appid: 飞书小程序appid},h5: {title: 演示,template: index.html,router: {mode: history,base: /hello/},async: {loading: AsyncLoading,error: AsyncError,delay: 200,timeout: 3000}}
}uni.scss
这个是全局的样式文件官方预定了很多常用的样式规则和变量。
package.json
在 web 和小程序添加一些依赖包扩展其他的功能。
vite.config.js
vue3 项目生成的配置文件。
全局组件
全局组件主要是内置组件和扩展组件。
内置组件
所有的视图组件包括 view、swiper 等本身不显示任何可视化元素用途都是为了包裹其他真正显示的组件可以直接在 vue 页面中使用。
常见有
uniapp 组件vue 组件nvue 组件小程序组件
扩展组件
uni-ui 是 DCloud 提供的一个跨端 ui 库它是基于 vue 组件的、flex 布局的、无 dom 的跨全端 ui 框架不包括基础组件它是基础组件的补充有些组件需要到插件市场下载才可以使用。
常见有
列表组件表单组件表格组件加载更多组件自定义导航栏组件弹出层组件
常用 API
基础
onPageNotFound页面不存在事件onError错误事件onAppShow页面前台事件onAppHide页面后台事件addInterceptor拦截器
网络
request发起请求uploadFile上传文件downloadFile下载文件connectSocket创建一个 websocket 连接onSocketOpenws 打开事件onSocketError错误事件sendSocketMessage发送 ws 消息onSocketMessage接收 ws 消息closeSocket关闭 wsonSocketClose监听关闭 ws
页面路由
navigateTo保留当前页面跳转到其他页面redirectTo关闭当前页面跳转到其他页面reLaunch关闭所有页面跳转到其他页面switchTab跳转到 tabBar 底部导航页面navigateBack返回上一个页面或多级页面
数据缓存
setStorage将数据存储在本地缓存中的指定 key 中覆盖原来该 key 的内容getStorage从本地缓存中获取指定 key 的内容removeStorage从本地缓存中移除指定 key 及内容clearStorage清除本地缓存getStorageInfo获取本地缓存信息
界面
showToast显示消息提示框hideToast隐藏消息提示框showLoading显示加载提示框hideLoading隐藏加载提示框showModal显示模态弹出框showActionSheet从底部弹出操作菜单onPullDownRefresh下拉刷新createSelectorQuery节点信息
文件
chooseImage选择图片saveImageToPhotosAlbum保存图片到相册chooseFile选择文件saveFile保存文件到本地removeSavedFile删除本地保存的文件getSavedFileList获取本地保存的文件列表getFileInfo获取文件信息openDocument新页面打开文档
条件编译
概念
条件编译是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同平台。
写法以 #ifdef 或 #ifndef 加 %PLATFORM% 开头以 #endif 结尾。
#ifdefif defined 仅在某平台存在;#ifndefif not defined 除了某平台均存在;%PLATFORM%平台名称;
%PLATFORM%值
值生效条件VUE3HBuilderX 3.2.0 详情 uni-app js 引擎版APPAppAPP-PLUSAppuni-app js 引擎版APP-PLUS-NVUE 或 APP-NVUEApp nvue 页面APP-ANDROIDApp Android 平台 仅限 uts 文件APP-IOSApp iOS 平台 仅限 uts 文件H5H5MP-WEIXIN微信小程序MP-ALIPAY支付宝小程序MP-BAIDU百度小程序MP-TOUTIAO抖音小程序MP-LARK飞书小程序MP-QQQQ 小程序MP-KUAISHOU快手小程序MP-JD京东小程序MP-360360 小程序MP微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ 小程序/360 小程序QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)QUICKAPP-WEBVIEW-UNION快应用联盟QUICKAPP-WEBVIEW-HUAWEI快应用华为
支持的文件
.vue、.pug.css、.scss、.less、.stylus.js、.tspages.json
写法
vue/nvue 模板里使用 !-- 注释 --css 使用 /* 注释 */js 使用 // 注释。
模板写法
!-- #ifdef %PLATFORM% --
平台特有的组件
!-- #endif --css 样式写法
/* #ifdef %PLATFORM% */
平台特有样式
/* #endif */JS 写法
// #ifdef %PLATFORM%
平台特有的API实现;
// #endifpages.json
// #ifdef %PLATFORM%
{pagePath: pages/eg,text: 案例
}
// #endif插件开发
插件市场官网
有数千款插件支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。在生态建设上远远领先于竞品。
请注意尽量在官方市场寻找插件npm 等三方市场没有 uni-app 兼容性描述很容易下载到无法跨平台的、仅适配 web 的插件。
插件分类
DCloud 插件市场将插件分为前端组件、JS SDK、uni-app 前端模板、App 原生插件、uniCloud 等 7 大类、20 多个子类。
uni_modules
uni_modules 是 uni-app 的插件模块化规范HBuilderX 3.1.0支持通常是对一组 js sdk、组件、页面、uniCloud 云函数、公共模块等的封装用于嵌入到 uni-app 项目中使用也支持直接封装为项目模板。
好了以上就是 uniapp 的框架知识总结。
相关文章：
