提交 dc9d544e 编写于 作者: W wanganxp

x

上级 bf7f91f7
......@@ -41,7 +41,7 @@ export function createApp() {
}
```
> uni-app x 的 app.uvue
> uni-app x 的 main.uts
```ts
import App from './App'
......@@ -58,6 +58,8 @@ export function createApp() {
}
```
一般情况下,使用easycom比全局组件更常用,easycom按需应用更节省资源。
## 代码时序
开发者写的代码,在应用启动时,按如下时序加载:
......
......@@ -975,7 +975,7 @@ h5 平台下拉刷新动画,只有 circle 类型。
- 考虑到编译速度,直接在`pages.json`内修改`easycom`不会触发重新编译,需要改动页面内容触发。
- `easycom`只处理vue组件,不处理小程序专用组件(如微信的wxml格式组件)。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui,使用vue后缀,同时兼容nvue页面。
- `nvue`页面里引用`.vue`后缀的组件,会按照nvue方式使用原生渲染,其中不支持的css会被忽略掉。这种情况同样支持`easycom`
- `vue``uvue` 组件优先级,[详见](https://zh.uniapp.dcloud.io/component/#priority)
- `vue``uvue` 组件优先级,[详见](/uni-app-x/component/readme.md#priority)
## tabBar
......
......@@ -19,7 +19,8 @@
下面是一个基本组件的实例,在一个vue页面的根`<view>`组件下插入一个`<button>`组件。给这个组件的内容区写上文字“按钮”,同时给这个组件设置了一个属性“size”,并且“size”属性的值设为了“mini”。
> 注:按照[vue单文件组件规范](https://cn.vuejs.org/v2/guide/single-file-components.html),每个vue文件的根节点必须为 `<template>`,且这个 `<template>` 下只能且必须有一个根 `<view>` 组件。
> 注:按照[vue单文件组件规范](https://cn.vuejs.org/v2/guide/single-file-components.html),每个vue文件的根节点必须为 `<template>`。
> vue2下,这个 `<template>` 下只能且必须有一个根 `<view>` 组件。vue3不限制。
```html
<template>
......@@ -71,11 +72,11 @@
除了上述公共属性,还有一类特殊属性以`v-`开头,称之为vue指令,如v-if、v-else、v-for、v-model。详见[vue指令](/tutorial/vue-api?id=%e6%a8%a1%e6%9d%bf%e6%8c%87%e4%bb%a4)
#### 在组件中使用js变量
#### 在组件中使用script的data变量
组件中可以使用script的data中定义的js变量,但组件的属性中使用和内容区使用的用法不一样。
组件中可以使用script的data中定义的变量,但组件的属性中使用和内容区使用的用法不一样。
- 在内容区使用时,使用两个花括号来包裹,如下面的`buttonText`
-text内容区使用时,使用两个花括号来包裹,如下面的`buttonText`
- 在属性值中使用时,属性名的前面要加冒号前缀
下面的button组件示例,等价于上一个的示例。只不过静态内容改成动态js。
......@@ -304,7 +305,7 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
接下来一一讲解。
### easycom组件规范
### easycom组件规范@easycom
> `HBuilderX 2.5.5`起支持
......@@ -428,19 +429,3 @@ datacom组件是一种数据驱动的、可云端一体的组件。
### 扩展组件(uni-ui)@uniui
详见: [uni-ui介绍](/component/uniui/uni-ui.md)
### vue 与 uvue 组件优先级 @priority
组件开发过程中,存在未明确指定组件后缀名的情况,例如:
1. 使用 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom) 时。
2.`import` 语句中未指定后缀名时,例如: `import PageHead from '@/components/page-head';`
此时 `vue` 组件和 `uvue` 组件的优先级如下:
-`uni-app x` 中,优先使用 `uvue` 组件,如果不存在 `uvue` 组件,则使用 `vue` 组件。
-`uni-app` 中,只支持使用 `vue` 组件。
**更多组件**
除了基础组件、uni-ui,插件市场还有更多扩展组件、模板,包括前端组件和原生扩展组件,具体见[插件市场](https://ext.dcloud.net.cn/)
关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题,参考[https://ask.dcloud.net.cn/article/35489](https://ask.dcloud.net.cn/article/35489)
......@@ -2,7 +2,7 @@
> 需HBuilderX 3.6.18 及之后版本
> app平台目前仅支持nvue
> app平台目前支持nvue/uvue,暂不支持vue
UTS组件,是UTS插件的一个分支。UTS插件提供了原生API的扩展,而UTS组件提供了原生UI组件的开发模式。
......
......@@ -191,13 +191,13 @@ uni-app 已将常用的组件、API封装到框架中,开发者按照 uni-app
json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。
### static 目录的条件编译
### static 目录的条件编译@static
在不同平台,引用的静态资源可能也存在差异,通过 static 的条件编译可以解决此问题,static 目录下新建不同平台的专有目录,
|目录名称|说明|
|:-:|:-:|
|app-plus|App|
|app|App|
|h5|H5|
|mp-weixin|微信小程序|
|mp-alipay|支付宝小程序|
......@@ -231,11 +231,13 @@ json的条件编译,如不同平台的key名称相同,cli项目下开发者
**注意**
- `platforms`目录下只支持放置页面文件(即页面vue文件),如果需要对其他资源条件编译,建议使用[static 目录的条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html#static-%E7%9B%AE%E5%BD%95%E7%9A%84%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)
- `platforms`目录下只支持放置页面文件(即页面vue文件),如果需要对其他资源条件编译,建议使用[static 目录的条件编译](#static)
### uts 的条件编译@UTS
对于`APP-ANDROID``APP-IOS`两个平台,在uni-app项目中,仅uts文件中支持(通常是uts插件里使用);在uni-app x项目中,只要是条件编译支持的文件,均可以使用。
对于`APP-ANDROID``APP-IOS`两个平台,
- 在uni-app项目中,仅uts文件中支持(通常是uts插件里使用)
- 在uni-app x项目中,只要是条件编译支持的文件,均可以使用
<pre v-pre="" data-lang="javascript"><code class="lang-javascript code"><span class="token comment">//<span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM%</b></span>
平台特有的API实现
......
......@@ -21,6 +21,7 @@
* [组件](/tutorial/vue3-components.md)
* [API](/tutorial/vue3-api.md)
* 组件
* [概述](component/readme.md)
* [公共属性和事件](component/common.md)
* [view](component/view.md)
* [scroll-view](component/scroll-view.md)
......@@ -42,8 +43,8 @@
* [video](component/video.md)
* [web-view](component/web-view.md)
* [animation-view](component/animation-view.md)
* [vue 与 uvue 组件优先级](/component/README.md#priority)
* API
* [概述](api/readme.md)
* 全局
* [getApp](api/getApp.md)
* [getCurrentPages](api/getCurrentPages.md)
......
# API概述
uni-app x支持的API包括:
uni-app x项目的uts代码中可以使用很多API。包括:
- uts的api [详见](/uts/buildin-object-api/global.md)
- 全局api,前面不需要加`uni.`。如`getApp`
- uni.xxx的内置api。见左侧
- uniCloud.xxx的内置api。见左侧
- Dom的api [详见](dom/README.md)
- 原生API
* 由于uts可以直接调用Android和iOS的API,所以os和三方sdk的能力都可以在uts中调用。
- dom的api [详见](dom/README.md)
- vue的api [详见](/tutorial/vue3-api.md)
- 原生api
* 由于uts可以直接调用Android和iOS的api,所以os和三方sdk的能力都可以在uts中调用。
* 一般原生能力建议封装为[uni_modules](/plugin/uni_modules.md)形式的[uts插件](/plugin/uts-plugin.md)
\ No newline at end of file
# uvue组件概述
uni-app x支持vue组件,不支持小程序wxml组件。
支持[easycom](/component/README.md#easycom)
uvue的组件,可以使用前端技术编写,也可以使用原生技术编写。
- 前端技术即新建一个vue或uvue文件,按vue组件规范编写代码。
- 原生的uts组件插件,指把原生的、需要在界面上显示的组件,编写uts代码,通过uni_modules插件的方式集成到uni-app项目中。比如
* lottie组件,使用uts调用原生的lottie sdk来开发组件,再引入页面中。[详见](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)
* video组件,其实官方的video,也是用uts组件插件实现的
之所以称之为`uts组件插件`,是相对于另一个分类`uts api插件`
uts组件插件的开发教程,[详见](/plugin/uts-component.md)
## vue 与 uvue 不同文件后缀的优先级 @priority
新建组件时,默认组件的后缀名为.vue。而不是.uvue。
.vue里面写uvue的语法,可以正常被.uvue页面引用和编译。
.vue里写条件编译,可以制作同时满足uni-app和uni-app x的组件。
但是uni-app x也支持.uvue文件的组件。
当你手动import或easycom手动配置规则,可以指定文件名后缀。比如`import PageHead from '@/components/page-head.uvue'`
但如果未明确指定组件后缀名的情况,且同一个组件目录下即存在.vue文件、又存在.uvue文件,
此时 `vue` 组件和 `uvue` 组件的优先级如下:
-`uni-app x` 中,优先使用 `uvue` 组件,如果不存在 `uvue` 组件,则使用 `vue` 组件。
-`uni-app` 中,只支持使用 `vue` 组件。
......@@ -5,11 +5,3 @@ uni-app x的vue语法,是按vue3规范实现的,但一期uvue不支持setup
目前也不支持vue插件,比如pinia、vuex、i18n、router。简单的状态管理可以参考文档[全局变量和状态管理](tutorial/store.md)
还有一些支持差异,在左侧文档点开后搜索“uni-app x”可见。
- 组件使用注意
默认组件的后缀名为.vue。而不是.uvue。
.vue里面写uvue的语法,可以正常被.uvue页面引用和编译。
如果使用.uvue的组件,则需要手动import,包括easycom也必须配规则才能识别。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册