Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3598
Star 108
Fork 921
unidocs-zh
unidocs-zh
提交 b33713c0 编写于 作者: W wanganxp
浏览文件
操作

更新教程

上级 38bfdc94
隐藏空白更改
内联 并排
Showing with 313 addition and 25 deletion
docs/collocation/pages.md
浏览文件 @ b33713c0
......@@ -898,14 +898,14 @@ h5 平台下拉刷新动画，只有 circle 类型。
> `HBuilderX 2.5.5`起支持`easycom`组件模式。
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
只要组件安装在项目根目录或uni_modules的components目录下，并符合`components/组件名称/组件名称.vue`或`uni_modules/插件ID/components/组件名称/组件名称.vue`目录结构。就可以不用引用、注册，直接在页面中使用。
如下：
只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用。如下：
```html
<template>
<view class="container">
<comp-a></comp-a>
<uni-list>
<uni-list-item title="第一行"></uni-list-item>
<uni-list-item title="第二行"></uni-list-item>
</uni-list>
</view>
</template>
......@@ -913,20 +913,40 @@ h5 平台下拉刷新动画，只有 circle 类型。
// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {
}
return {}
}
}
</script>
```
不管components目录下安装了多少组件，`easycom`打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
`路径规范`指：
1. 安装在项目根目录的components目录下，并符合`components/组件名称/组件名称.vue`
2. 安装在uni_modules下，路径为`uni_modules/插件ID/components/组件名称/组件名称.vue`
工程目录：
<pre v-pre="" data-lang="">
<code class="lang-" style="padding:0">
┌─components
│ └─comp-a
│ └─comp-a.vue 符合easycom规范的组件
└─uni_modules [uni_module](/uni_modules)中符合easycom规范的组件
└─uni_modules
└─uni-list
└─components
└─uni-list
└─ uni-list.vue
</code>
</pre>
不管components目录下安装了多少组件，`easycom`打包会自动剔除没有使用的组件，对组件库的使用尤为友好。
组件库批量安装，随意使用，自动按需打包。以官方的`uni-ui`为例，在HBuilderX新建项目界面选择`uni-ui`项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。
在[uni-app插件市场](https://ext.dcloud.net.cn/)下载符合`components/组件名称/组件名称.vue`目录结构的组件，均可直接使用。
**自定义easycom配置的示例**
`easycom`是自动开启的，不需要手动开启，有需求时可以在`pages.json`的`easycom`节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数如下：
|属性 |类型 |默认值 |描述 |
......@@ -934,7 +954,7 @@ h5 平台下拉刷新动画，只有 circle 类型。
|autoscan |Boolean|true |是否开启自动扫描，开启后将会自动扫描符合`components/组件名称/组件名称.vue`目录结构的组件 |
|custom |Object |- |以正则方式自定义组件匹配规则。如果`autoscan`不能满足需求，可以使用`custom`自定义匹配规则 |
**自定义easycom配置的示例**
如果你的组件，不符合easycom前述的`路径规范`。可以在pages.json的easycom节点中自行定义路径规范。
如果需要匹配node_modules内的vue文件，需要使用`packageName/path/to/vue-file-$1.vue`形式的匹配规则，其中`packageName`为安装的包名，`/path/to/vue-file-$1.vue`为vue文件在包内的路径。
......@@ -953,7 +973,7 @@ h5 平台下拉刷新动画，只有 circle 类型。
- `easycom`方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
- 在组件名完全一致的情况下，`easycom`引入的优先级低于手动引入（区分连字符形式与驼峰形式）
- 考虑到编译速度，直接在`pages.json`内修改`easycom`不会触发重新编译，需要改动页面内容触发。
- `easycom`只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
- `easycom`只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
- `nvue`页面里引用`.vue`后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持`easycom`
## tabBar
......
docs/tutorial/page.md
浏览文件 @ b33713c0
## 页面简介
uni-app项目中，一个页面就是一个符合`Vue SFC规范`的`.vue`文件或`.nvue`文件。
uni-app项目中，一个页面就是一个符合`Vue SFC规范`的 vue 文件。
`.vue`页面和`.nvue`页面，均全平台支持，差异在于当uni-app发行到App平台时，`.vue`文件会使用webview进行渲染，`.nvue`会使用原生进行渲染，详见：[nvue原生渲染](/tutorial/nvue-outline)。
- 在 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`中的页面，通常会保存在工程根目录下的`pages`目录下。
`uni-app`中的页面，默认保存在工程根目录下的`pages`目录下。
每次新建页面，均需在`pages.json`中配置`pages`列表；未在`pages.json -> pages` 中配置的页面，`uni-app`会在编译阶段进行忽略。pages.json的完整配置参考：[全局文件](/collocation/pages)。
每次新建页面，均需在`pages.json`中配置`pages`列表；未在`pages.json -> pages` 中注册的页面，`uni-app`会在编译阶段进行忽略。pages.json的完整配置参考：[页面配置](../collocation/pages.md)。
通过HBuilderX开发 `uni-app` 项目时，在 `uni-app` 项目上右键“新建页面”，HBuilderX会自动在`pages.json`中完成页面注册，开发更方便。
......@@ -18,17 +25,206 @@ 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、组件等文件，则使用目录归纳比较合适。如果只有一个页面文件，大可不必多放一层目录。
## 删除页面
删除页面时，需做两件工作：
- 删除`.vue`文件或`.nvue`文件
- 删除`pages.json -> pages`列表项中的配置
- 删除`pages.json -> pages`列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容）
## pages.json
pages.json是工程的页面管理配置文件，包括：页面路由注册、页面参数配置（原生标题栏、下拉刷新...）、首页tabbar等众多功能。
其篇幅较长，另见 [pages.json](../collocation/pages.md)
## 应用首页
`uni-app`会将`pages.json -> pages`配置项中的第一个页面，作为当前工程的首页（启动页）。
`pages.json -> pages`配置项中的第一个页面，作为当前工程的首页（启动页）。
```json
{
"pages": [
{
"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
"style": {
"navigationBarTitleText": "首页" //页面标题
}
},
{
"path": "pages/my",
"style": {
"navigationBarTitleText": "我的"
}
},
]
}
```
## 页面内容构成
uni-app 页面基于 vue 规范。一个页面内，有3个根节点标签 `<template>`、`<script>`、`<style>`，分别是模板组件区、脚本区、样式区。
```html
<template>
<view class="content">
<button @click="buttonClick">{{title}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title: "Hello world", // 定义绑定在页面上的data数据
}
},
onLoad() {
// 页面启动的生命周期，这里编写页面加载时的逻辑
},
methods: {
buttonClick: function () {
console.log("按钮被点了")
},
}
}
</script>
<style>
.content {
width: 750rpx;
background-color: white;
}
</style>
```
### template模板区
template中文名为`模板`，它类似html的标签。但有2个区别：
1. html中script和style是html的二级节点。但在vue文件中，template、script、style这3个是平级关系。
2. html中写的是web标签，但vue的template中写的全都是vue组件，每个组件支持属性、事件、vue指令，还可以绑定vue的data数据。
在vue2中，template的二级节点只能有一个节点，一般是在一个根view下继续写页面组件（如上示例代码）。
但在vue3中，template可以有多个二级节点，省去一个层级，如下：
```html
<template>
<view>
<text>标题</text>
</view>
<scroll-view>
</scroll-view>
</template>
```
可以在manifest中切换使用vue2还是vue3（uni-app x中只支持vue3）
### script脚本区
script中编写脚本，可以通过lang属性指定脚本语言。
- 在vue和nvue中，默认是js，可以指定ts
- 在uvue中，仅支持uts。
```html
<script lang="ts">
</script>
```
在vue的选项式（option）规范中，script下包含`export default {}`。（除了选项式，还有[组合式](vue3-composition-api.md)）
页面级的代码大多写在`export default {}`中。写在里面的代码，会随着页面关闭而关闭。
#### export default 外的代码
先来介绍写在`export default {}`外面的代码，一般有几种情况：
1. import三方js/ts模块
2. import非easycom的组件（一般组件推荐使用[easycom](../collocation/pages.md#easycom)，无需导入注册）
3. 在ts/uts中，对data的类型进行type定义
4. 定义作用域更大的变量，注意外层的静态变量不会跟随页面关闭而回收
```html
<script lang="ts">
const TAB_OFFSET = 1; // 外层静态变量不会跟随页面关闭而回收
import charts from 'charts.ts'; // 导入外部js/ts模块
import swiperPage from 'swiper-page.vue'; //导入非easycom的组件
type GroupType = {
id : number,
title : string
} // 在ts中，为下面data数据的 groupList 定义类型
export default {
components: {
swiperPage
}, // 注册非easycom组件
data() {
return {
groupList: [
{ id: 1, title: "第一组" },
{ id: 2, title: "第二组" },
] as GroupType[], // 为数据groupList定义ts类型
}
},
onLoad() {},
methods: {}
}
</script>
```
#### export default 里的代码
`export default {}` 里的内容，是页面的主要逻辑代码。包括几部分：
1. data：template模板中需要使用的数据。具体[另见](vue-basics.md#data)
2. 页面生命周期：如页面加载、隐藏、关闭，具体[见下](#lifecycle)
3. methods方法，如按钮点击、屏幕滚动
如下页面代码的逻辑是：
1. 在data中定义了`title`，初始值是"点我"
2. 在页面中放置了一个button组件，按钮文字区使用`{{}}`模板写法，里面写`title`，把data里的`title`绑定到按钮的文字区，即按钮的初始文字是"点我"
3. 按钮的点击事件`@click`，指向了methods里的一个方法`buttonClick`，点击按钮即触发这个方法的执行
4. buttonClick方法里通过`this.title`的方式，访问data数据，并重新赋值为"被点了"。由于vue中data和界面是双向绑定，修改data中的`title`后，因为按钮文字绑定了`title`，会自动更新按钮的文字。
整体效果就是，刚开始按钮文字是"点我"，点一下后按钮文字变成了"被点了"
```html
<template>
<view>
<button @click="buttonClick">{{title}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title: "点我", // 定义绑定在页面上的data数据
// 多个data在这里继续定义。逗号分隔
}
},
onLoad() {
// 页面启动的生命周期，这里编写页面加载时的逻辑
},
// 多个页面生命周期监听，在这里继续写。逗号分隔
methods: {
buttonClick: function () {
this.title = "被点了"
},
// 多个方法，在这里继续写。逗号分隔
}
}
</script>
```
本章节为页面代码介绍，并非vue教程，了解data数据需[详见](vue-basics.md#data)
### style样式区
style的写法与web的css基本相同。
如果页面是nvue或uvue，使用原生渲染而不是webview渲染，那么它们支持的css是有限的。
详见[css文档](syntax-css.md)
## 页面生命周期 @lifecycle
## 页面生命周期@lifecycle
``uni-app`` 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：[Vue2 组合式 API 使用文档](/tutorial/vue-composition-api.html) 和 [Vue3 组合式 API 使用文档](/tutorial/vue3-composition-api.html)。
......
docs/tutorial/vue-basics.md
浏览文件 @ b33713c0
......@@ -471,7 +471,7 @@ v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称
## data 属性
## data 属性@data
data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
......@@ -499,8 +499,80 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
}
```
return 外可以写一些复杂计算：
```ts
<script lang="ts">
export default {
data() {
const date = new Date()
return {
year: date.getFullYear() as number
}
}
}
</script>
```
data数据在template中有2种绑定方式：
1. text区域使用`{{}}`。详见[插值](#插值)
2. 属性区域通过:属性名称，在属性值里直接写变量。详见[v-bind](#v-bind)
```html
<template>
<view class="content">
<button @click="buttonClick" :disabled="buttonEnable">{{title}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title: "点我",
buttonEnable: false
}
},
methods: {
buttonClick: function () {
this.buttonEnable = true
this.title = "被点了，不能再点了"
},
}
}
</script>
```
data数据在script中引用，通过`this.`的方式。如果在某些methods中this被指向了其他内容，则需要提前把this赋值给另一个变量，比如`let that = this`。
```html
<script>
export default {
data() {
return {
connectedWifi:""
}
},
methods: {
buttonClick: function () {
const that = this // 下面的this指向会变化，另存一下
uni.startWifi({
success: function() {
uni.getConnectedWifi({
success: function(res) {
const { wifi } = res
that.connectedWifi = JSON.stringify(wifi)
},
fail: function(res) {
}
})
},
fail: function(res) {
}
})
},
}
}
</script>
```
## Class 与 Style 绑定
......
docs/uni-app-x/readme.md
浏览文件 @ b33713c0
# `uni-app x 并未发布，本文档为内部使用`
# uni-app x 是什么？
uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。
......
docs/uts/function.md
浏览文件 @ b33713c0
......@@ -165,20 +165,18 @@ const myPet = pet("Vivie");
myPet(); // 返回结果 "Vivie"
```
### 函数参数
### 函数默认参数
#### 默认参数
函数参数可以有默认值，当省略相应的参数时使用默认值。
函数参数可以设默认值，当省略相应的参数时使用默认值。此时该参数也就成了可选参数。
```ts
function multiply(a:number, b:number = 1):number {
return a*b;
}
multiply(5); // 5
multiply(5); // a为5，未传b的值，b默认为1，结果为5
```
我们可以在能够使用常规的函数定义的场景下使用默认参数，例如：
可以在常规的函数定义的场景下使用默认参数，例如：
```ts
function print(msg:string = "") {
console.log(msg)
......@@ -187,7 +185,7 @@ print(); // ""
class Persion {
test(msg: string | null = null) {
test(msg: string | null = null) { // 默认值可以为null
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或