Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
22a8480b
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
22a8480b
编写于
7月 12, 2022
作者:
hbcui1984
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
优化代码块描述
上级
9bfa1992
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
14 addition
and
12 deletion
+14
-12
docs/tutorial/snippet.md
docs/tutorial/snippet.md
+14
-12
未找到文件。
docs/tutorial/snippet.md
浏览文件 @
22a8480b
### 使用代码块直接创建组件模板
为提升开发效率,HBuilderX将
`
``uni-app```
常用代码封装成了以
```u```
开头的代码块,如在
```template```
标签内输入
```ulist``
`
回车,会自动生成如下代码:
为提升开发效率,HBuilderX将
`
uni-app`
常用代码封装成了以
`u`
开头的代码块,如在
`template`
标签内输入
`ulist
`
回车,会自动生成如下代码:
```
html
<uni-list>
...
...
@@ -9,10 +8,11 @@
<uni-list-item
title=
""
note=
""
></uni-list-item>
</uni-list>
```
注意需保障uni-list组件在项目的components目录下。比较简单的方式,是新建项目时,选 uni ui项目模板,在里面即可随便敲所有u开头的代码块。如果不是 uni ui项目模板,那么需要去插件市场手动把
[
uni ui组件
](
https://ext.dcloud.net.cn/plugin?id=55
)
下载到工程里。
注意:需确保
`uni-list`
组件已保存在项目的
`components`
目录下。比较简单的方式,是新建项目时,选
`uni-ui`
项目模板,在里面即可随便敲所有u开头的代码块。如果你的项目不是
`uni-ui`
项目模板,那么你需要去插件市场手动把
[
uni ui组件
](
https://ext.dcloud.net.cn/plugin?id=55
)
下载到工程里。
代码块分为Tag代码块、JS代码块,如在
```script```
标签内输入
```uShowToast```
回车,会自动生成如下代码:
代码块分为
`Tag`
代码块、
`JS`
代码块,如在
`script`
标签内输入
`uShowToast`
回车,会自动生成如下代码:
```
js
uni
.
showToast
({
...
...
@@ -22,10 +22,10 @@ uni.showToast({
});
```
`
``
uni-app``
`已支持代码块见下方列表。
`
uni-app
`
已支持代码块见下方列表。
###
#
Tag代码块
### Tag代码块
-
uButton
-
uCheckbox
...
...
@@ -36,16 +36,18 @@ uni.showToast({
-
uSwiper
-
......
几乎各种组件不管是内置组件还是uni ui的组件,均已封装为代码块,在HBuilderX的vue代码template区域中敲u,代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-vue代码块的左侧列表查阅所有。
几乎各种组件不管是内置组件还是
`uni-ui`
的组件,均已封装为代码块;使用
`HBuilderX`
打开
`uni-app`
项目中的
`.vue`
文件,在
`template`
区域敲
`u`
,代码助手会提示所有可见代码块列表。
你也可以在HBuilderX菜单-工具-代码块设置-vue代码块的左侧列表查阅所有已支持的代码块。
除组件外,其他常用代码块包括:
-
viewfor:生成一段带有v-for循环结构的视图代码块
-
vbase:生成一段基本的vue代码结构
###
#
JS代码块
### JS代码块
####
#
uni api代码块
#### uni api代码块
-
uRequest
-
uGetLocation
-
uShowToast
...
...
@@ -63,16 +65,16 @@ uni.showToast({
-
uPay
-
......
几乎各种常用js api,均已封装为代码块,在HBuilderX的js代码中敲u,代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-js代码块的左侧列表查阅所有。
几乎各种常用js api,均已封装为代码块,在HBuilderX的js代码中敲u,代码助手会提示所有可见列表。也可在HBuilderX菜单
-
工具-代码块设置-js代码块的左侧列表查阅所有。
####
#
vue js代码块
#### vue js代码块
-
vImport:导入文件
-
ed:export default
-
vData:输出 data(){return{}}
-
vMethod:输出 methods:{}
-
vComponents:输出 components: {}
####
#
其他常用js代码块
#### 其他常用js代码块
-
iff:简单if
-
forr:for循环结构体
-
fori:for循环结构体并包含i
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录