Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
anyefeiyu
uni-app
提交
fb9d1d34
U
uni-app
项目概览
anyefeiyu
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fb9d1d34
编写于
3月 22, 2021
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
大更组件介绍文档
上级
89de2964
变更
4
展开全部
隐藏空白更改
内联
并排
Showing
4 changed file
with
395 addition
and
123 deletion
+395
-123
docs/component/README.md
docs/component/README.md
+346
-76
docs/component/_sidebar.md
docs/component/_sidebar.md
+8
-7
docs/frame.md
docs/frame.md
+19
-12
docs/vue-components.md
docs/vue-components.md
+22
-28
未找到文件。
docs/component/README.md
浏览文件 @
fb9d1d34
此差异已折叠。
点击以展开。
docs/component/_sidebar.md
浏览文件 @
fb9d1d34
*
[
组件概述
](
component/
)
*
视图容器
*
[
view
](
component/view.md
)
*
[
scroll-view
](
component/scroll-view.md
)
...
...
@@ -27,7 +28,6 @@
*
[
textarea
](
component/textarea.md
)
*
路由与页面跳转
*
[
navigator
](
component/navigator.md
)
*
[
custom-tab-bar
](
component/custom-tab-bar.md
)
*
媒体组件
*
[
audio
](
component/audio.md
)
*
[
camera
](
component/camera.md
)
...
...
@@ -44,11 +44,10 @@
*
广告
*
[
ad
](
component/ad.md
)
*
[
ad-draw
](
component/ad-draw.md
)
*
导航类组件
*
[
navigation-bar
](
component/navigation-bar.md
)
*
[
custom-tab-bar
](
component/custom-tab-bar.md
)
*
页面属性配置节点
*
[
page-meta
](
component/page-meta.md
)
*
[
navigation-bar
](
component/navigation-bar.md
)
*
[
custom-tab-bar
](
component/custom-tab-bar.md
)
*
小程序开放能力组件
*
[
official-account
](
component/official-account.md
)
*
[
open-data
](
component/open-data.md
)
...
...
@@ -59,6 +58,9 @@
*
[
recycle-list
](
component/recycle-list.md
)
*
[
waterfall
](
component/waterfall.md
)
*
[
refresh
](
component/refresh.md
)
*
uniCloud专用组件
*
[
unicloud-db
](
uniCloud/unicloud-db
)
*
[
基础组件中原生组件说明
](
component/native-component.md
)
*
扩展组件(uni ui)
*
[
uni-ui整体介绍
](
component/README?id=uniui
)
*
[
Badge 数字角标
](
https://ext.dcloud.net.cn/plugin?id=21
)
...
...
@@ -89,10 +91,9 @@
*
[
SwiperDot 轮播图指示点
](
https://ext.dcloud.net.cn/plugin?id=284
)
*
[
Tag 标签
](
https://ext.dcloud.net.cn/plugin?id=35
)
*
[
更多插件市场的组件
](
https://ext.dcloud.net.cn/?cat1=2
)
*
[
uniCloud组件
](
uniCloud/unicloud-db
)
*
[
datacom组件规范
](
component/datacom
)
*
[
配置小程序插件
](
component/mp-weixin-plugin.md
)
*
[
原生组件说明
](
component/native-component
.md
)
*
[
App原生插件
](
https://nativesupport.dcloud.net.cn/NativePlugin/README
)
*
[
小程序插件
](
component/mp-weixin-plugin
.md
)
<li></li>
<div
class=
"contact-box"
>
<a
href=
"//unicloud.dcloud.net.cn"
target=
"_blank"
class=
"contact-item"
>
...
...
docs/frame.md
浏览文件 @
fb9d1d34
...
...
@@ -17,17 +17,18 @@
<pre v-pre="" data-lang="">
<code class="lang-" style="padding:0">
┌─uniCloud
-aliyun
云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见<a href="https://uniapp.dcloud.io/uniCloud/quickstart?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84">uniCloud</a>)
┌─uniCloud
云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见<a href="https://uniapp.dcloud.io/uniCloud/quickstart?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84">uniCloud</a>)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid
存放本地网页
的目录,<a href="/component/web-view">详见</a>
├─hybrid
App端存放本地html文件
的目录,<a href="/component/web-view">详见</a>
├─platforms 存放各平台专用页面的目录,<a href="/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91">详见</a>
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,<b>注意:</b>静态资源只能存放于此
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,<b>注意:</b>静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents 存放小程序组件的目录,<a href="/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81">详见</a>
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/collocation/frame/lifecycle?id=应用生命周期">应用生命周期</a>
...
...
@@ -37,10 +38,10 @@
</pre>
**Tips**
- 编译到任意平台时,`static` 目录下的文件均会被
打包进去,非 `static` 目录下的文件(vue、js、css 等)被引用到才会被包含
进去。
- 编译到任意平台时,`static` 目录下的文件均会被
完整打包进去,且不会编译。非 `static` 目录下的文件(vue、js、css 等)只有被引用到才会被打包编译
进去。
- `static` 目录下的 `js` 文件不会被编译,如果里面有 `es6` 的代码,不经过转换直接运行,在手机设备上会报错。
- `css`、`less/scss` 等资源
同样不要放在 `static` 目录下,建议这些公用的资源放在
`common` 目录下。
- HbuilderX 1.9.0+ 支持在根目录创建 `ext.json`
`sitemap.json` 文件。
- `css`、`less/scss` 等资源
不要放在 `static` 目录下,建议这些公用的资源放在自建的
`common` 目录下。
- HbuilderX 1.9.0+ 支持在根目录创建 `ext.json`
、`sitemap.json` 等小程序需要的文件。
|有效目录|说明|
|:-:|:-:|
...
...
@@ -71,8 +72,8 @@
- `@`开头的绝对路径以及相对路径会经过base64转换规则校验
- 引入的静态资源在非h5平台,均不转为base64。
- H5平台,小于4kb的资源会被转换成base64,其余不转。
- 自`HBuilderX 2.6.6
-alpha
`起`template`内支持`@`开头路径引入静态资源,旧版本不支持此方式
- App平台自`HBuilderX 2.6.9
-alpha
`起`template`节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致
- 自`HBuilderX 2.6.6`起`template`内支持`@`开头路径引入静态资源,旧版本不支持此方式
- App平台自`HBuilderX 2.6.9`起`template`节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致
- 支付宝小程序组件内 image 标签不可使用相对路径
### js文件引入
...
...
@@ -92,7 +93,7 @@ import add from '../../common/add.js'
### css引入静态资源
> `css`文件或`style标签`内引入`css`文件时(scss、less文件同理),可以使用相对路径或绝对路径(`HBuilderX 2.6.6
-alpha
`)
> `css`文件或`style标签`内引入`css`文件时(scss、less文件同理),可以使用相对路径或绝对路径(`HBuilderX 2.6.6`)
```
css
/
* 绝对路径 *
/
...
...
@@ -104,7 +105,7 @@ import add from '../../common/add.js'
**注意**
- 自`HBuilderX 2.6.6
-alpha
`起支持绝对路径引入静态资源,旧版本不支持此方式
- 自`HBuilderX 2.6.6`起支持绝对路径引入静态资源,旧版本不支持此方式
> `css`文件或`style标签`内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,有些小程序端css文件不允许引用本地文件(请看注意事项)。
...
...
@@ -225,6 +226,12 @@ switch(uni.getSystemInfoSync().platform){
## 页面样式与布局
uni-app的css与web的css基本一致。本文没有讲解css的用法。在你了解web的css的基础之上,本文讲述一些样式相关的注意事项。
uni-app有vue页面和nvue页面。vue页面是webview渲染的、app端的nvue页面是原生渲染的。在nvue页面里样式比web会限制更多,另见[nvue样式专项文档](/nvue-css)
本文重点介绍vue页面的样式注意事项。
### 尺寸单位
`uni-app` 支持的通用 css 单位包括 px、rpx
...
...
@@ -232,7 +239,7 @@ switch(uni.getSystemInfoSync().platform){
- px 即屏幕像素
- rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大,但在 App 端和 H5 端屏幕宽度达到 960px 时,默认将按照 375px 的屏幕宽度进行计算,具体配置参考:[rpx计算配置](https://uniapp.dcloud.io/collocation/pages?id=globalstyle) 。
vue页面支持普通H5单位,但在nvue里不支持:
vue页面支持
下面这些
普通H5单位,但在nvue里不支持:
- rem 根字体大小可以通过 [page-meta](/component/page-meta?id=page-meta) 配置<span style="display:none">字节跳动小程序:屏幕宽度/20、百度小程序:16px、支付宝小程序:50px</span>
- vh viewpoint height,视窗高度,1vh等于视窗高度的1%
- vw viewpoint width,视窗宽度,1vw等于视窗宽度的1%
...
...
@@ -751,7 +758,7 @@ const package = require('packageName')
});
</script>
```
## 小程序组件支持
## 小程序
自定义
组件支持
``uni-app`` 支持在 App 和 小程序 中使用**小程序自定义组件**,从HBuilderX2.4.7起,H5端也可以运行微信小程序组件。
...
...
docs/vue-components.md
浏览文件 @
fb9d1d34
[
观看本节视频讲解
](
https://learning.dcloud.io/#/?vid=12
)
## 概念
-
组件是视图层的基本组成单元。
-
组件是一个单独功能模块的封装。
-
组件是一个单独
且可复用的
功能模块的封装。
-
一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。内容则写在两个标签之内。
-
根节点为
`<template>`
,这个
`<template>`
下只能且必须有一个根
`<view>`
组件。这是
[
vue单文件组件规范
](
https://cn.vuejs.org/v2/guide/single-file-components.html
)
。
-
一个组件的 data 选项必须是一个函数。
```
html
<!-- 在index.vue页面引用 user-info组件-->
<template>
<view>
<user-info></user-info>
</view>
</template>
```
下面是一个基本组件示例,在根
`<view>`
组件下再次引入一个
`<view>`
组件,并给组件的text区绑定一个data。
```
html
<!-- 我是组件 user-info -->
<template>
<view>
<view>
{{userName}}
</view>
...
...
@@ -38,6 +26,24 @@
</script>
```
基础组件是内置在uni-app框架中的,包括view、text、input、button、video等几十个基础组件,列表详见:
[
uni-app基础组件
](
https://uniapp.dcloud.net.cn/component/README?id=%e5%9f%ba%e7%a1%80%e7%bb%84%e4%bb%b6
)
但仅有基础组件是不够用的,实际开发中会有很多封装的组件。
比如我们需要一个五角星点击评分的组件,在DCloud的插件市场里可以获取到:
[
https://ext.dcloud.net.cn/plugin?id=33
](
https://ext.dcloud.net.cn/plugin?id=33
)
把这个uni-rate组件导入到你的uni-app项目下,在需要的vue页面里引用它,就可以在指定的地方显示出这个五角星组件。
```
html
<!-- 在index.vue页面引用 uni-rate 组件-->
<template>
<view>
<uni-rate></uni-rate>
<!-- 这里会显示一个五角星,并且点击后会自动亮星 -->
</view>
</template>
```
## 优势
...
...
@@ -50,6 +56,7 @@
## 注册
在注册一个组件的时候,我们始终需要给它一个名字。
...
...
@@ -834,20 +841,6 @@ Vue 实现了一套内容分发的 API,将 `slot` 元素作为承载分发内
## uni-app内置基础组件
`uni-app`
内置了小程序的所有
[
组件
](
https://uniapp.dcloud.io/component/
)
,比如:
`picker`
,
`map`
等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成
`@change="eventName"`
```
html
<picker
mode=
"date"
:value=
"date"
start=
"2015-09-01"
end=
"2020-09-01"
@
change=
"bindDateChange"
>
<view
class=
"picker"
>
当前选择: {{date}}
</view>
</picker>
```
## 命名限制
在 uni-app 中以下这些作为保留关键字,不可作为组件名。
...
...
@@ -911,3 +904,4 @@ Tips
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录