uniapp – web百事通 https://www.askme-121.pw web互联网之家 Sun, 17 Mar 2024 06:45:40 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.5.2 https://www.askme-121.pw/wp-content/uploads/2023/12/cropped-05ee702f-4b38-40f3-915f-c8fc68b10a91-32x32.png uniapp – web百事通 https://www.askme-121.pw 32 32 uniapp中easycom用法详解 https://www.askme-121.pw/uniapp-easycom/ https://www.askme-121.pw/uniapp-easycom/#respond Sun, 17 Mar 2024 06:45:19 +0000 https://www.askme-121.pw/?p=513 Uniapp中的easycom是一种组件自动注册机制,可以让开发者更加方便地使用和管理组件。下面详细介绍下关于easycom使用方法。

什么是easycom

easycom是Uniapp框架提供的一种组件自动注册机制,它可以自动扫描指定目录下的所有组件,并注册到全局组件中。这意味着我们无需手动在components中引入组件,也无需在每个页面中单独引入组件,只需要在组件的目录下创建一个index.vue文件,就可以自动注册组件并在全局中使用了。

如何使用easycom?

使用easycom非常简单,只需要在项目根目录下的pages.json中配置easycom属性即可。例如:

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^cu-": "@/components/cu/"
    }
  }
}

其中,autoscan表示是否启用自动扫描功能,如果设置为true,则会自动扫描项目中所有符合规则的组件并注册到全局中。如果设置为false,则需要手动在components中引入组件。

custom是自定义规则,可以根据规则自动注册组件。例如上面的例子中,以cu-开头的组件会被自动注册到@/components/cu/目录下。

除了在pages.json中配置easycom属性外,还可以在单个页面的json文件中配置usingComponents属性来引用组件。例如:

{
  "usingComponents": {
    "cu-btn": "@/components/cu-btn/index"
  }
}

上面的例子中,cu-btn组件会被自动引入到当前页面中,无需手动在components中引入。

easycom的规则

easycom支持多种规则,可以自定义组件的目录和组件名。以下是常见的规则:

  • 目录规则:将组件放在components目录下,文件名为index.vue,则组件会自动注册到全局中。例如:components/my-component/index.vue会被自动注册为my-component组件。
  • 前缀规则:将组件放在任意目录下,文件名为index.vue,文件名以指定前缀开头,例如my-,则组件会自动注册到全局中。例如:components/my-component/index.vue会被自动注册为my-component组件。
  • 全路径规则:将组件放在任意目录下,文件名为index.vue,则可以在页面中使用全路径来引用组件,例如:@/components/my-component/index

easycom的注意事项

虽然easycom提供了方便的组件自动注册机制,但在使用easycom时,也有一些需要注意的事项:

  1. 组件命名必须是小写字母,使用短横线连接单词。例如:my-component
  2. 不同平台的组件可能有不同的实现方式,因此需要在pages.json中配置easycom属性时,需要根据平台分别配置。例如:
    {
    "easycom": {
    “nvue”: {
    “autoscan” true
    } ,
    “h5”: {
    “autoscan”: true
    }
    }
    }
  3.  如果有一些组件不需要自动注册,可以在组件目录下创建一个.easycomignore文件来忽略该组件的自动注册。例如:
    # 忽略my-component组件
    my-component/

    如果需要忽略某个目录下的所有组件,可以在.easycomignore文件中输入目录名即可。
  4. 如果需要自定义规则,可以在pages.json中配置custom属性。例如:
    {
    "easycom": {
    “autoscan”: true,
    “custom”: {
    “^my-“: “@/components/my/”
    }
    }
    }

    上面的例子中,以my-开头的组件会被自动注册到@/components/my/目录下。
  5. 如果需要在某个页面中引用组件,可以在页面的json文件中配置usingComponents属性。例如:
    { "usingComponents": { "my-component": "@/components/my-component/index" } }
    上面的例子中,my-component组件会被自动引入到当前页面中。

总的来说,easycom是Uniapp框架中非常方便的组件自动注册机制,可以大大简化组件的使用和管理。但是在使用时需要注意一些规则和注意事项,以保证组件能够正常注册和使用。

]]>
https://www.askme-121.pw/uniapp-easycom/feed/ 0
uniapp-x uts 介绍 https://www.askme-121.pw/uniapp-x-uts/ https://www.askme-121.pw/uniapp-x-uts/#respond Wed, 06 Mar 2024 12:55:38 +0000 https://www.askme-121.pw/?p=506 uts 是什么

uts,全称 uni type script,是一门跨平台的、高性能的、强类型的现代编程语言。

它可以被编译为不同平台的编程语言,如:

  • web平台,编译为JavaScript
  • Android平台,编译为Kotlin
  • iOS平台,编译Swift

uts 采用了与 ts 基本一致的语法规范,支持绝大部分 ES6 API。但为了跨端,uts进行了一些约束和特定平台的增补。

过去在js引擎下运行支持的语法,大部分在uts的处理下也可以平滑的在kotlin和swift中使用。但有一些无法抹平,需要使用条件编译。和uni-app的条件编译类似,uts也支持条件编译。写在条件编译里的,可以调用平台特有的扩展语法。

用途和关系

uts是一门语言。也仅是一门语言,不包含ui框架。uvue是DCloud提供的跨平台的、基于vue语法的ui框架。uts相当于js,uvue相当于html和css。它们类似于v8和webkit的关系、类似于dart和flutter的关系。

uts这门语言,有2个用途:

  • 开发uni-app 和 uni-app x 的原生扩展插件:因为uts可以调用所有原生能力。
  • uts和uvue一起组合,开发原生级的项目,也就是 uni-app x 项目

uni-app x 开发App时,输出的是纯原生的App(Android上就是kotlin的app),里面没有js引擎和webview。也就是说,uts可以在uni-app中使用,也可以在uni-app x中使用。

在uni-app中,主编程语言是js。uts可以开发原生插件,包括API插件和组件插件。
在uni-app x中,主编程语言是uts。不管是应用逻辑还是扩展插件,均使用uts编程,没有js。

]]>
https://www.askme-121.pw/uniapp-x-uts/feed/ 0