uni-app进阶之样式框架/生产环境【day10】

简介: uni-app进阶之样式框架/生产环境【day10】

样式框架

在这里插入图片描述

uni-UI扩展组件符合easycom组件规范,可以直接应用。
如果组件不符合easycom规范,则需要在使用之前在代码中手动导入并注册组件。

uni app的JS

uni app的JS代码在H5端的浏览器中运行。非H5端(包括小程序和应用程序),Android平台运行在V8引擎中,IOS平台运行在IOS的jscore引擎中,没有一个运行在浏览器或WebView中。
非h5端不支持windows、documents、navigator等浏览器的JS API,但也支持标准ECMAScript。
不要将浏览器的JS扩展对象等同于标准JS。
uni app的非h5端还支持标准JS、if、for等语法、字符串、数字、时间、布尔值、数组、自定义对象等变量类型和各种处理方法。仅支持特定于浏览器的对象,如窗口、文档和导航器。

Promise

对于异步方法,如果没有传入回调参数,如success、fail和complete,那么数据将作为promise返回。例如:uni getImageInfo()
该方法是异步的,并且有一个返回对象。如果要获取返回对象,必须传入至少一个回调参数,如success、fail、complete等。

    // 正常使用
    const task = uni.connectSocket(
        success(res){
            console.log(res)
        }
    )

    // Promise 化
    uni.connectSocket().then(res => {
            // 此处即为 success 回调的 res
            // 如果想获取 task ,则不要使用 Promise 化
            console.log(res)
    })

Uni app页面路由均由框架管理。开发人员需要使用JSON来配置每个路由页面的路径和页面样式(类似于app.JSON中配置页面路由的小程序)。

"pages": [
    {
      "path": "pages/index",
      "style": {
        "navigationBarTitleText": "金迅教育 · 路由配置",
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black",
        "backgroundColor": "#FFFFFF",
        "enablePullDownRefresh": true
      }
    },
    {
      "path": "pages/user",
      "style": {
        "navigationBarTitleText": "金迅教育 · 路由配置",
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black",
        "backgroundColor": "#FFFFFF",
        "enablePullDownRefresh": true
      }
    }
]

由于小程序的大小和资源加载限制,每个小程序平台都提供了一种分包方法来优化小程序的下载和启动速度。
所谓主包就是放置默认的启动页面/tabbar页面,所有分包都需要一些公共资源/js脚本;分包基于页面JSON配置。

生产环境

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}
相关文章
|
1月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
95 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
3月前
|
移动开发 小程序 前端开发
uni-app组件样式修改不生效
uni-app组件样式修改不生效
|
3月前
|
开发框架 JavaScript 前端开发
uni-app x 跨平台开发框架
uni-app x 是一个强大的跨平台开发框架 uni-app x 是一个庞大的工程,它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。
102 1
|
6月前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
248 60
|
4月前
|
Python Windows 内存技术
【Azure 应用服务】Azure App Service (Windows) 使用Flask框架部署Python应用,如何在代码中访问静态文件呢?如何设置文件路径?是相对路径还是绝对路径呢?
【Azure 应用服务】Azure App Service (Windows) 使用Flask框架部署Python应用,如何在代码中访问静态文件呢?如何设置文件路径?是相对路径还是绝对路径呢?
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
|
6月前
|
开发框架 小程序 前端开发
uni-app前端应用开发框架
uni-app对做移动端开发的来说应该无人不知、无人不晓了吧?!从名字就能看出来这个框架要干啥,unify app——没错,就是统一前端应用开发,不管你是小程序、app、还是H5、公众号,用这个框架都能做。uni-app让开发者编写一套代码,就可以编译为安卓app、ios app、微信小程序、抖音小程序、支付宝小程序等十几个平台,而且马上支持纯血鸿蒙了,这简直是个人、开发工作室、小型开发公司的福音,开发一些常规的app、小程序,用这个框架足够了。
74 7
|
6月前
|
安全 测试技术 网络安全
APP攻防-资产收集篇&反证书检验&XP框架&反代理VPN&数据转发&反模拟器
APP攻防-资产收集篇&反证书检验&XP框架&反代理VPN&数据转发&反模拟器
|
6月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
6月前
|
缓存 Android开发 Kotlin
【安卓app开发】kotlin Jetpack Compose框架 | 先用OKhttp下载远程音频文件再使用ExoPlayer播放
使用 Kotlin 的 Jetpack Compose 开发安卓应用时,可以结合 OkHttp 下载远程音频文件和 ExoPlayer 进行播放。在 `build.gradle` 添加相关依赖后,示例代码展示了如何下载音频并用 ExoPlayer 播放。代码包括添加依赖、下载文件、播放文件及简单的 Compose UI。注意,示例未包含完整错误处理和资源释放,实际应用需补充这些内容。

热门文章

最新文章

下一篇
DataWorks