Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3216
Star 106
Fork 815
unidocs-zh
unidocs-zh
提交 16d01e11 编写于 作者: W wanganxp
浏览文件
操作

x

上级 fdd72714
隐藏空白更改
内联 并排
Showing with 90 addition and 43 deletion
docs/tutorial/page.md
浏览文件 @ 16d01e11
......@@ -3,13 +3,17 @@
uni-app项目中，一个页面就是一个符合`Vue SFC规范`的 vue 文件。
- 在 uni-app js 引擎版中，后缀名是`.vue`文件或`.nvue`文件。
- 在 uni-app x 中，后缀名是`.uvue`文件
这些页面均全平台支持，差异在于当 uni-app 发行到App平台时，`.vue`文件会使用webview进行渲染，`.nvue`会使用原生进行渲染，详见：[nvue原生渲染](/tutorial/nvue-outline)。
一个页面可以同时存在vue和nvue，在[pages.json](../collocation/pages.md)的路由注册中不包含页面文件名后缀，同一个页面可以对应2个文件名。重名时优先级如下：
- 在非app平台，先使用vue，忽略nvue
- 在app平台，使用nvue，忽略vue
这些页面均全平台支持，差异在于当 uni-app 发行到App平台时，`.vue`文件会使用webview进行渲染，`.nvue`会使用原生进行渲染，详见：[nvue原生渲染](/tutorial/nvue-outline)。
- 在 uni-app x 中，后缀名是`.uvue`文件
一个页面可以同时存在vue和nvue，在[pages.json](../collocation/pages.md)的路由注册中不包含页面文件名后缀，同一个页面可以对应2个文件名。重名时优先级如下：
- 在非app平台，先使用vue，忽略nvue
- 在app平台，使用nvue，忽略vue
uni-app x 中没有js引擎和webview，不支持和vue页面并存。
uni-app x 在app-android上，每个页面都是一个全屏activity，不支持透明。
## 新建页面
......@@ -25,13 +29,17 @@ uni-app项目中，一个页面就是一个符合`Vue SFC规范`的 vue 文件
<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/pages-add-02.png" style="max-width:450px"></img>
</div>
新建页面时，可以选择vue或nvue，还可以选择`是否创建同名目录`。创建目录的意义在于，如果你的页面较复杂，需要拆分多个附属的js、css、组件等文件，则使用目录归纳比较合适。如果只有一个页面文件，大可不必多放一层目录。
新建页面时，可以选择`是否创建同名目录`。创建目录的意义在于，
- 如果你的页面较复杂，需要拆分多个附属的js、css、组件等文件，则使用目录归纳比较合适。
- 如果只有一个页面文件，大可不必多放一层目录。
## 删除页面
删除页面时，需做两件工作：
- 删除`.vue`文件或`.nvue`文件
- 删除`pages.json -> pages`列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容）
- 删除`.vue`文件、`.nvue`、`.uvue`文件
- 删除`pages.json -> pages`列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）
页面改名同理。
## pages.json
......@@ -125,8 +133,8 @@ template中文名为`模板`，它类似html的标签。但有2个区别：
script中编写脚本，可以通过lang属性指定脚本语言。
- 在vue和nvue中，默认是js，可以指定ts
- 在uvue中，仅支持uts。
- 在vue和nvue中，默认是js，可以指定ts。
- 在uvue中，仅支持uts，不管script的lang属性写成什么，都按uts编译。
```html
<script lang="ts">
......@@ -247,7 +255,7 @@ style的写法与web的css基本相同。
|onReachBottom|页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项|||
|onTabItemTap|点击 tab 时触发，参数为Object，具体见下方注意事项|微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序||
|onShareAppMessage|用户点击右上角分享|微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序||
|onPageScroll|监听页面滚动，参数为Object|nvue暂不支持||
|onPageScroll|监听页面滚动，参数为Object|nvue不支持||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件，参数为Object|App、H5||
|onBackPress|监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；[详见](#onbackpress)|app、H5、支付宝小程序||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
......@@ -347,6 +355,14 @@ a页面刚进入时，会触发a页面的onShow。
### onReachBottom
可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages#globalstyle)，
比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。
### onPageScroll
**参数说明**
|属性|类型|说明|
......@@ -360,12 +376,10 @@ onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代
**注意**
- 可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages#globalstyle)，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
- 如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档
- `onPageScroll`里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
- 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，[参考](https://uniapp.dcloud.io/collocation/pages?id=app-titlenview)。
- 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考[插件市场](https://ext.dcloud.net.cn/plugin?id=715)。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
- 在App、微信小程序、H5中，也可以使用wxs监听滚动，[参考](https://uniapp.dcloud.io/tutorial/miniprogram-subject#wxs)；在app-nvue中，可以使用bindingx监听滚动，[参考](https://uniapp.dcloud.io/tutorial/nvue-api#nvue-里使用-bindingx)。
- `onPageScroll`里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。（uvue在app端无此限制）
- 在webview渲染时，比如app-vue、微信小程序、H5中，也可以使用wxs监听滚动，[参考](https://uniapp.dcloud.io/tutorial/miniprogram-subject#wxs)；在app-nvue中，可以使用bindingx监听滚动，[参考](https://uniapp.dcloud.io/tutorial/nvue-api#nvue-里使用-bindingx)。
- 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，[参考](https://uniapp.dcloud.io/collocation/pages?id=app-titlenview)。(uni-app x不支持)
- 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考[插件市场](https://ext.dcloud.net.cn/plugin?id=715)。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。（uni-app x可自由在uts中设置固定位置）
### onBackPress
......
docs/tutorial/syntax-css.md
浏览文件 @ 16d01e11
## CSS 支持
- [nvue样式](/tutorial/nvue-css)
- [css预处理器](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_preprocessor)
# 页面样式与布局
uni-app 有 vue 页面、nvue 页面、uvue页面。
- vue 页面是 webview 渲染的
- app-nvue 页面是原生渲染的，其样式比 web 会限制更多，另见[nvue的css](/tutorial/nvue-css)
- app-uvue 页面是原生渲染的，是 web 的css子集，另见[uvue的css](../uni-app-x/css/readme.md)
uni-app 的 css 与 web 的 css 基本一致。本文没有讲解 css 的用法。在你了解 web 的 css 的基础之上，本文讲述一些样式相关的注意事项。
uni-app 有 vue 页面和 nvue 页面。vue 页面是 webview 渲染的、app 端的 nvue 页面是原生渲染的。在 nvue 页面里样式比 web 会限制更多，另见[nvue 样式专项文档](/tutorial/nvue-css)
本文重点介绍 vue 页面，也就是webview中的样式注意事项。
## css预处理器支持
uni-app 支持less、sass、scss、stylus等预处理器。
参考： [css预处理器](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_preprocessor)
本文重点介绍 vue 页面的样式注意事项。
## 尺寸单位
......
docs/uni-app-x/_sidebar.md
浏览文件 @ 16d01e11
......@@ -7,7 +7,7 @@
* 编译器
* [概述](compiler/README.md)
* [条件编译](/tutorial/platform.md)
* [运行环境管理](/worktile/running-env.md)
* [编译运行环境](/worktile/running-env.md)
* 全局文件
* [main.uts](/collocation/main.md)
* [app.uvue](/collocation/App.md)
......
docs/uni-app-x/component/video.md
浏览文件 @ 16d01e11
......@@ -11,9 +11,13 @@
#### App平台
- App-Android平台video组件使用ijkplayer库实现：[https://github.com/bilibili/ijkplayer](https://github.com/bilibili/ijkplayer)；弹幕功能使用DanmakuFlameMaster库实现：[https://github.com/bilibili/DanmakuFlameMaster](https://github.com/bilibili/DanmakuFlameMaster)
### bug@tips
- 暂不支持全屏后放置子组件
- video组件的API目前只支持ref方式，详见[示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/video/video.uvue)
- 暂不支持横屏全屏后放置子组件
<!-- UTSCOMJSON.video.reference -->
### API
video的操作api为uni.createVideoContext()。
给video组件设一个id属性，将id的值传入uni.createVideoContext()，即可得到video组件的上下文对象，进一步可使用`.play()`、`.stop()`等方法。
\ No newline at end of file
docs/uni-app-x/readme.md
浏览文件 @ 16d01e11
# `uni-app x 并未发布，本文档为内部使用`
# uni-app x 是什么？
uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。
在App端，uni-app x 在iOS编译为swift、在Android编译为kotlin。没有使用js引擎、webview，完全达到了原生应用的功能、性能。
uni-app x需HBuilderX3.9起支持，该版本处于公测状态，需单独邀请下载。正式版和alpha用户暂时无法升级到3.9。
uni-app x 是一个庞大的工程，它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。
## 1. uts语言
......@@ -92,6 +92,8 @@ uvue支持的css语法，是web的子集，类似于nvue的css。仅支持flex
更多示例代码参考：[hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x)
这里是打包后的[hello uni-app x的apk](https://uniapp.dcloud.net.cn/uni-app-x/static/hello-uniapp-x.apk)
## 3. uni的组件
uni-app x 一期，只包括基本的组件和API。
......@@ -117,17 +119,17 @@ uni-app x 一期，只包括基本的组件和API。
- [x] navigator
- [x] progress
- [x] webview
- [x] video 暂不支持全屏后放置子组件
- [x] video
- [x] animation-view // 已有uts插件
不支持的组件及替代方案
- movable-view：没有ui层和逻辑层的通信阻塞，开发者可自己写uts拖动view
- picker：可改用picker-view
- canvas：目前没有完整的canvas组件，但每个view，都提供了draw API，可以高性能的画各种形状、贴图、写字。关于截图，无需像webview那样通过canvas中转。view会直接提供截图方案。当然后期会补充完整canvas
- canvas：目前没有完整的canvas组件，但每个view，都提供了[draw API](dom/drawablecontext.md)，可以高性能的画各种形状、贴图、写字。关于截图，无需像webview那样通过canvas中转。view会直接提供截图方案。当然后期会补充完整canvas
- waterfall/grid-view：会补充
- uniCloud-db：会补充
- ad：会补充
- editor：只能用web-view来加载
- editor：用web-view来加载
- map：需开发uts组件。或使用web-view中的地图
- live-pusher：需开发uts组件
- form
......@@ -296,7 +298,7 @@ uni-app x 毕竟是原生应用，内嵌flutter、rn这些没有任何问题，
## FAQ
- uni-app x 支持uvue页面和vue页面混写吗？
仅支持uvue页面。后期考虑中。历史vue页面也可以通过 uni小程序sdk 嵌入到uni-app x中。
仅支持uvue页面。历史vue页面也可以通过 uni小程序sdk 嵌入到uni-app x中。
- uni-app x 的app端能离线打包吗？
初期不能，后期会提供
......
docs/uts/README.md
浏览文件 @ 16d01e11
......@@ -15,13 +15,33 @@ uts 采用了与 ts 基本一致的语法规范，支持绝大部分 ES6 API。
过去在js引擎下运行支持的语法，大部分在uts的处理下也可以平滑的在kotlin和swift中使用。但有一些无法抹平，需要使用条件编译。和uni-app的条件编译类似，uts也支持条件编译。写在条件编译里的，可以调用平台特有的扩展语法。
### 现状说明
### 用途和关系
uts是一门语言。目前DCloud还未发布基于uts的ui开发框架。所以现阶段使用uts开发ui是不方便的（就像没有组件和css，拿js开发界面，还不能跨端）。
uts是一门语言。也仅是一门语言，不包含ui框架。
现阶段uts适合的场景是开发uni-app的原生插件。因为uts可以直接调用Android和iOS的原生API或jar等库。
uvue是DCloud提供的跨平台的、基于vue语法的ui框架。
很快DCloud会推出基于uts的跨平台响应式ui框架`uvue`，届时开发者可使用vue语法、uni-app的组件和api，来开发纯原生应用，因为它们都被编译为kotlin和swift，不再有js和webview。未来大概的写法参考[hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x) （此项目还未正式发布，公开版的HBuilderX不能编译此项目，仅供参考写法）
uts相当于js，uvue相当于html和css。它们类似于v8和webkit的关系、类似于dart和flutter的关系。
uts这门语言，有2个用途：
1. 开发uni-app 和 uni-app x 的原生扩展插件：因为uts可以调用所有原生能力。
2. uts和uvue一起组合，开发原生级的项目，也就是 uni-app x 项目
从HBuilderX 3.9起，支持uni-app x项目。
uni-app x 开发App时，输出的是纯原生的App（Android上就是kotlin的app），里面没有js引擎和webview。详见[uni-app x](../uni-app-x/)
也就是说，uts可以在uni-app中使用，也可以在uni-app x中使用。
- 在uni-app中，主编程语言是js。uts可以开发原生插件，包括API插件和组件插件。
- 在uni-app x中，主编程语言是uts。不管是应用逻辑还是扩展插件，均使用uts编程，没有js。
如果插件作者，开发了uts插件，也可以同时在uni-app和uni-app x中使用。比如这2个uts插件：
- 电量：[https://ext.dcloud.net.cn/plugin?id=9295](https://ext.dcloud.net.cn/plugin?id=9295)
- lottie组件：[https://ext.dcloud.net.cn/plugin?id=10674](https://ext.dcloud.net.cn/plugin?id=10674)
这2个uts插件，一个是api插件，一个是组件插件，它们同时兼容uni-app和uni-app x。
本文是 uts 的基本语法介绍。如想了解 uni-app 下如何开发 uts插件，另见文档[https://uniapp.dcloud.net.cn/plugin/uts-plugin.html](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)。
......@@ -150,7 +170,7 @@ let b2 : boolean = true
```
目前 uts 未对字面量赋值类型推导做统一处理，编译到 kotlin 和 swift 时，由这2个语言自行做类型推导。
在HBuilderX 3.9以前， uts 未对字面量赋值类型推导做统一处理，编译到 kotlin 和 swift 时，由这2个语言自行做类型推导。
但 kotlin 和 swift 的自动推导，在某些地方有细节差异。尤其是[数字字面量](data-type.md#autotypefornumber)和[数组字面量](data-type.md#autotypeforarray)。在这2个场景下，建议显式声明类型，不使用自动推导。
......@@ -163,15 +183,13 @@ let a1:Array<string> = ["uni-app", "uniCloud", "HBuilder"]
let a1:Array<number> = [1,2,3,4]
```
后续 uts 将统一字面量自动类型推导。
HBuilderX 3.9+， uts 统一了字面量自动类型推导。
目前建议开发者，除了boolean和string外，其他包括数字和数组在内的类型，尽量不使用字面量自动类型推导，而是显式声明类型。避免 uts 统一自动类型推导时引发的向下兼容问题。
建议插件作者，除了boolean和string外，其他包括数字和数组在内的类型，尽量不使用字面量自动类型推导，而是显式声明类型。避免 uts 统一自动类型推导时引发的向下兼容问题。
### 类型判断
> 注意：isArray 需要HX 3.9.0之后版本才会支持
判断类型，有好几种方案：typeof、instanceof、isArray。
判断类型，有好几种方案：[typeof](operator.md#typeof)、[instanceof](operator.md#instanceof)、[isArray](buildin-object-api/array.md#isarray)。
使用 typeof 可以判断布尔值、数字、字符串、函数。
```ts
......@@ -211,6 +229,8 @@ uni.request({
});
```
详见：[typeof](operator.md#typeof)、[instanceof](operator.md#instanceof)
### 安全调用
js没有类型检查。而uts和ts都有严格的类型检查。
......
docs/worktile/_sidebar.md
浏览文件 @ 16d01e11
* [Git/SVN](/worktile/git-svn.md)
* [cli 脚手架](/worktile/CLI.md)
* [运行环境管理](/worktile/running-env.md)
* [编译运行环境](/worktile/running-env.md)
* [自动化测试](/worktile/auto/quick-start.md)
* [快速开始](/worktile/auto/quick-start.md)
* [API](/worktile/auto/api.md)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或