# ScFrame-UniAppX-v3 **Repository Path**: sweet2o09_admin/ScFrame-UniAppX-v3 ## Basic Information - **Project Name**: ScFrame-UniAppX-v3 - **Description**: UniAppX学习资料 - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 3 - **Created**: 2024-10-08 - **Last Updated**: 2025-09-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README >ScFrame-UniAppX-v3项目说明 本项目使用 Vue3语法糖 + uts 方式编写代码,用于搭建一个基础项目框架 ## 入门教程 [uni-app x 是什么?](https://doc.dcloud.net.cn/uni-app-x/)
[uni-app x 全局文件](https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html)
[UTS 介绍](https://doc.dcloud.net.cn/uni-app-x/uts/)
[uvue概述](https://doc.dcloud.net.cn/uni-app-x/vue/)
[uvue css使用](https://doc.dcloud.net.cn/uni-app-x/css/)
[TypeScript 快速入门教程](https://www.lesscode.work/courses/info/970f0caee4a444b6336045dc9f8c39ef.html)
[hello uni-app x Demo源码](https://ext.dcloud.net.cn/plugin?id=14798)
## uni-app-x 结构说明(只展示基础目录) 目录|说明|备注 ---|----|---- components|自定组件目录|组件自动加载 [nativeResources](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.html)|应用原生资源目录|将需要添加的Android原生资源文件分别拷贝到assets、res目录,云端打包时将会合并到安装包中
注意
1.android目录下不支持放`java`/`kotlin`源码文件,需要开发源码建议使用`UTS插件`或`uni原生语言插件`
2.`assets`、`res`目录中的资源不能通过uni API使用,需通过 Android 原生 API 访问,参考[Android应用资源概览](https://developer.android.google.cn/guide/topics/resources/providing-resources?hl=zh-cn)。也就是在uni-app中,访问这些资源需要通过uts代码访问或编写`uni原生语言插件`
3.uni-app x项目assets目录中已经保留使用`apps`,`font`,`uniappx`,`uni-uts`文件,需注意避免冲突
4.`res`目录资源将合并到主项目中编译,会覆盖其它模块的资源
5.其它文件在云打包时将会拷贝到应用级根目录(app)下
6.应用资源目录配置需提交云端打包后才能生效,真机运行时请使用自定义调试基座 package|分包目录|小程序分包之间的资源无法相互引用 pages|主包目录|小程序分包可以引用主包资源,反过来不行 static|静态文件目录|- style|项目样式文件目录|- store|状态管理文件目录|- uni_modules|插件目录|- pages.json|页面管理配置文件|不再支持`uni-app`的`app-plus`专用配置以及`tabbar`的`midbutton` theme.json|暗黑模式/深色模式|[theme.json](https://doc.dcloud.net.cn/uni-app-x/collocation/themejson.html) main.uts|初始化vue实例|[main.js/main.uts](https://uniapp.dcloud.net.cn/collocation/main.html) App.uvue|应用入口文件,本身不是页面|1.监听应用生命周期
2.配置全局变量globalData
3.编写全局可用的method方法
4.配置全局样式 manifest.json|项目配置文件|[manifest.json](https://doc.dcloud.net.cn/uni-app-x/collocation/manifest.html#manifest-app) AndroidManifest.xml|Android原生应用清单文件和资源|[AndroidManifest.xml](https://doc.dcloud.net.cn/uni-app-x/collocation/manifest.html#manifest-app) Info.plist|iOS原生应用配置文件和资源|[Info.plist](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-ios.html) uni.scss|uni-app内置的常用样式变量|`uni.scss`中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中,造成微信程序包太大
故uni.scss只建议放scss变量名相关样式,其他的样式可以通过`main.uts`或者`App.nvue`引入 vue.config.js|webpack可选配置文件|仅 `vue` 页面生效 vite.config.js|vite编译可选配置文件|仅 `vue3` 项目生效 ## 三方插件说明 1. [路由 kux-autopages/kux-router](https://router.uvuejs.cn/introduction.html) 2. [网络请求 kux-request](https://ext.dcloud.net.cn/plugin?id=16177) 3. [日期工具 kux-dayjs](https://ext.dcloud.net.cn/plugin?id=15888) 4. [app自升级 uni-installApk/uts-openSchema/yq-update-x](https://ext.dcloud.net.cn/plugin?id=18131) 5. [全局监听权限的申请 uni-registerRequestPermissionTips](https://ext.dcloud.net.cn/plugin?id=16960) 6. [二维码生成 sn-e-qrcode](https://ext.dcloud.net.cn/plugin?id=20034) 7. [条形码生成 sn-e-barcode](https://ext.dcloud.net.cn/plugin?id=20035) 8. [华为ScanKit扫码 sn-e-scankit](https://ext.dcloud.net.cn/plugin?id=20035) 9. [下拉刷新 z-paging-x](https://ext.dcloud.net.cn/plugin?id=16045) *** ## 针对三方插件二开说明 #### 1. **样式二次开发** - 不要直接修改插件中的样式文件,可以通过`复写样式`,达到修改的目的,例如在`app.vue`中。 ``` /* 加载三方插件样式 */ @import "@/uni_modules/xxx.scss"; /* 加载自定义样式 */ @import "@/myStyle.scss"; ``` #### 2. 组件二次开发 - 不要直接修改`uni_modules`的插件源码,这样会导致每次更新插件都会不太顺利。 - 推荐使用复制组件的方式来修改组件 ## [uts for Android](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-android.html#uts-for-android) #### 1. Int 和 Number - 默认情况下 `UTS` 开发者可以使用 `Number` 覆盖 `android` 平台上使用 `Int` 的场景。 - 标准的 `TS` 环境中,只有 `Number` 类型而没有 `Int` 类型。 - 为了适应这种情况,`UTS` 允许开发者使用原生平台的数据类型 `Int` ,来满足原生API对数据类型的要求。 #### 2. MutableList - `MutableList` 是 `android` 平台 特有的数据类型,一般场景下,可以使用 `UTS` 中内置类型 `Array` 替代。 - 标准的 `TS` 环境中,没有 `MutableList` 类型,与之相近的数据类型是 `Array`。 - 为了适应这种情况,`UTS` 允许开发者使用原生平台的数据类型 `MutableList`,来满足原生API对数据类型的要求。 #### 3. String[] - 部分三方 `sdk` 使用 `java` 开发,要求继承/实现的方法参数为 `string[]`类型,这种情况比较特殊,需要将kotlin.Array先进行别名声明,再继续使用 ``` import KotlinArray from 'kotlin.Array'; class XXX{ override onCaptureFinish(p0: KotlinArray){ // do sth }; } ``` #### 4. 线程环境差异 - `UTS`语言本身没有线程的概念。 但在具体的运行平台上会有线程环境差异: - uni-app 平台:默认代码执行在 WeexJSBridgeThread - uni-app x 平台:默认代码执行在 `main` 线程 - `Android` 系统对线程操作存在较多的限制, `UTS` 内置了 `UTSAndroid.getDispatcher` 方法 用来屏蔽大多数底层细节,一般来说开发者只需要关心两种特殊情况: ``` // 如果需要执行耗时任务: UTSAndroid.getDispatcher("io").async(function(_){ // 执行耗时任务 },null) // 如果需要操作UI: UTSAndroid.getDispatcher("main").async(function(_){ // 执行界面修改,包括view添加移除等 },null) ``` #### 5. [Kotlin与UTS差异重点介绍](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-android.html#_6-kotlin%E4%B8%8Euts%E5%B7%AE%E5%BC%82%E9%87%8D%E7%82%B9%E4%BB%8B%E7%BB%8D-%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0) - 推荐使用 `let` 因为只会在作用域内生效,需要慎用 `var` ,因为它具备有更大的作用范围 - `uts`中,需要区分全局方法、成员方法 ``` // 成员方法 startListener():void{ } // 全局方法 function startListener():void{ } ``` - 匿名内部类 ``` // kotlin 新建事件监听 user.setListener(Listener(){//todo}); // 在UTS中这样使用 const myListener = new (class implements Listener {//todo}) user.setListener(myListener); ``` >欢迎大家帮忙补充。