高效的开发技巧

为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：

<uni-list>
	<uni-list-item title="" note=""></uni-list-item>
	<uni-list-item title="" note=""></uni-list-item>
</uni-list>

注意：需确保uni-list组件已保存在项目的components目录下。比较简单的方式，是新建项目时，选uni-ui项目模板，在里面即可随便敲所有u开头的代码块。如果你的项目不是uni-ui项目模板，那么你需要去插件市场手动把uni ui组件下载到工程里。

代码块分为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
• ......

几乎各种组件不管是内置组件还是uni-ui的组件，均已封装为代码块；使用HBuilderX打开uni-app项目中的.vue文件，在template区域敲u，代码助手会提示所有可见代码块列表。

你也可以在HBuilderX菜单-工具-代码块设置-vue代码块的左侧列表查阅所有已支持的代码块。

除组件外，其他常用代码块包括：

• viewfor：生成一段带有v-for循环结构的视图代码块
• vbase：生成一段基本的vue代码结构

#JS代码块

#uni api代码块

• uRequest
• uGetLocation
• uShowToast
• uShowLoading
• uHideLoading
• uShowModal
• uShowActionSheet
• uNavigateTo
• uNavigateBack
• uRedirectTo
• uStartPullDownRefresh
• uStopPullDownRefresh
• uLogin
• uShare
• uPay
• ......

几乎各种常用js api，均已封装为代码块，在HBuilderX的js代码中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单-工具-代码块设置-js代码块的左侧列表查阅所有。

#vue js代码块

• vImport：导入文件
• ed：export default
• vData：输出 data(){return{}}
• vMethod：输出 methods:{}
• vComponents：输出 components: {}

#其他常用js代码块

• iff：简单if
• forr：for循环结构体
• fori：for循环结构体并包含i
• funn：函数
• funa：匿名函数
• rt：return true
• clog：输出："console.log()"
• clogvar：增强的日志输出，可同时把变量的名字打印出来
• varcw：输出："var currentWebview = this.$scope.page.$getAppWebview()"
• ifios：iOS的平台判断
• ifAndroid：Android的平台判断

预置代码块不满足需求的话，可以自定义代码块，教程参考https://ask.dcloud.net.cn/article/35924