Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
良好的行为成为习惯
uni-app
提交
aaf1e148
U
uni-app
项目概览
良好的行为成为习惯
/
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,发现更多精彩内容 >>
未验证
提交
aaf1e148
编写于
9月 21, 2019
作者:
W
wanganxp
提交者:
GitHub
9月 21, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update snippet.md
上级
cd534733
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
85 addition
and
85 deletion
+85
-85
docs/snippet.md
docs/snippet.md
+85
-85
未找到文件。
docs/snippet.md
浏览文件 @
aaf1e148
### 使用代码块直接创建组件模板
为提升开发效率,HBuilderX将
```uni-app```
常用代码封装成了以
```u```
开头的代码块,如在
```template```
标签内输入
```ulist```
回车,会自动生成如下代码:
```
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
{{item.value}}
</view>
</view>
</view>
```
代码块分为Tag代码块、JS代码块,如在
```script```
标签内输入
```uShowToast```
回车,会自动生成如下代码:
```
uni.showToast({
title: '',
mask: false
duration: 1500
});
```
```
uni-app```已支持代码块见下方列表。
#### Tag代码块
- uButton
- uCheckbox
- uGrid:宫格,需引用uni ui
- uList:列表,需引用uni ui
- uListMedia
- uRadio
为提升开发效率,HBuilderX将
```uni-app```
常用代码封装成了以
```u```
开头的代码块,如在
```template```
标签内输入
```ulist```
回车,会自动生成如下代码:
```
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
{{item.value}}
</view>
</view>
</view>
```
代码块分为Tag代码块、JS代码块,如在
```script```
标签内输入
```uShowToast```
回车,会自动生成如下代码:
```
uni.showToast({
title: '',
mask: false
duration: 1500
});
```
```
uni-app```已支持代码块见下方列表。
#### Tag代码块
- uButton
- uCheckbox
- uGrid:宫格,需引用uni ui
- uList:列表,需引用uni ui
- uListMedia
- uRadio
- uSwiper
- ......
...
...
@@ -42,25 +42,25 @@ uni.showToast({
除组件外,其他常用代码块包括:
- viewfor:生成一段带有v-for循环结构的视图代码块
- vbase:生成一段基本的vue代码结构
#### JS代码块
##### uni api代码块
- uRequest
- uGetLocation
- uShowToast
- uShowLoading
- uHideLoading
- uShowModal
- uShowActionSheet
- uNavigateTo
- uNavigateBack
- uRedirectTo
- uStartPullDownRefresh
- uStopPullDownRefresh
- uLogin
- uShare
- vbase:生成一段基本的vue代码结构
#### JS代码块
##### uni api代码块
- uRequest
- uGetLocation
- uShowToast
- uShowLoading
- uHideLoading
- uShowModal
- uShowActionSheet
- uNavigateTo
- uNavigateBack
- uRedirectTo
- uStartPullDownRefresh
- uStopPullDownRefresh
- uLogin
- uShare
- uPay
- ......
...
...
@@ -74,12 +74,12 @@ uni.showToast({
- vComponents:输出 components: {}
##### 其他常用js代码块
- iff:简单if
- forr:for循环结构体
- fori:for循环结构体并包含i
- funn:函数
- iff:简单if
- forr:for循环结构体
- fori:for循环结构体并包含i
- funn:函数
- funa:匿名函数
- rt:return true
- rt:return true
- clog:输出:"console.log()"
- clogvar:增强的日志输出,可同时把变量的名字打印出来
- varcw:输出:"var currentWebview = this.$mp.page.$getAppWebview()"
...
...
@@ -115,32 +115,32 @@ uni.showToast({
![uni-app](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug2.png)
### 关于 App 的调试
自 `HBuilderX 2.0.3+
Alpha` 版本起开始支持 `App` 端的调试
#### 打开调试窗口
在 `HBuilderX` 中,正确运行项目: `运行 --> 运行到手机或模拟器 --> 选择设备`,项目启动后,在下方的控制台选择 `debug` 图标。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-icon.png)
正确打开调试窗口后,显示如下:
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-window.png)
#### 调试页面
在调试窗口控制台的 Sources (图中指示1) 栏,可以给 js 打断点调试。
在 uniapp:// (图中指示2)下找到需要调试的页面,单击打开 ,在右侧可以看到我们需要调试的内容(图中指示3)。在需要调试的代码行号的位置,点击打上断点(图中指示4)。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-log.png)
之后,在设备上进行操作,进入断点位置,可以方便我们跟踪调试代码。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-breakpoint.png)
Tip
-
不支持非自定义组件模式
- `vue` 和 `nvue` 页面都能打断点调试
- 目前仅支持 `nvue` 页面
查看元素,`vue` 页面暂不支持,`Android` 暂不支持查看 `style`
自 `HBuilderX 2.0.3+
` 版本起开始支持 `App` 端的调试。
#### 打开调试窗口
在 `HBuilderX` 中,正确运行项目: `运行 --> 运行到手机或模拟器 --> 选择设备`,项目启动后,在下方的控制台选择 `debug` 图标。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-icon.png)
正确打开调试窗口后,显示如下:
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-window.png)
#### 调试页面
在调试窗口控制台的 Sources (图中指示1) 栏,可以给 js 打断点调试。
在 uniapp:// (图中指示2)下找到需要调试的页面,单击打开 ,在右侧可以看到我们需要调试的内容(图中指示3)。在需要调试的代码行号的位置,点击打上断点(图中指示4)。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-log.png)
之后,在设备上进行操作,进入断点位置,可以方便我们跟踪调试代码。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-breakpoint.png)
Tip
-
debug仅支持自定义组件模式。如果是非自定义组件模式,请在manifest里配置选为自定义组件模式。非自定义组件模式即将停止支持,[详见](https://ask.dcloud.net.cn/article/36385)
- `vue` 和 `nvue` 页面都能打断点调试
- 目前仅支持 `nvue` 页面
审查元素,`vue` 页面暂不支持,`Android` 暂不支持查看 `style`
<!-- uni-app的App端没有webview调试(即webkit remote debug)。
...
...
@@ -162,4 +162,4 @@ Tip
HBuilderX版与cli版互转指南参考:[https://ask.dcloud.net.cn/article/35750](https://ask.dcloud.net.cn/article/35750)
如果是发布App,则需要使用[离线打包](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/508),配置原生环境,来实现持续集成。(目前HBuilderX还不支持命令行生成wgt资源和云打包,欢迎到需求墙投票:[https://dev.dcloud.net.cn/wish/](https://dev.dcloud.net.cn/wish/))
\ No newline at end of file
如果是发布App,则需要使用[离线打包](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/508),配置原生环境,来实现持续集成。(目前HBuilderX还不支持命令行生成wgt资源和云打包,欢迎到需求墙投票:[https://dev.dcloud.net.cn/wish/](https://dev.dcloud.net.cn/wish/))
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录