资讯详情

资讯详情

HBuilderX高效开发UniApp的技巧

我们在用HBuilderX开发UniApp的时候需要去掌握一些输入的技巧才能事半功倍。为提升开发效率HBuilderX将uni-app常用代码封装成了以u开头的代码块如在template标签内输入ulist回车会自动生成如下代码注意需确保uni-list组件已保存在项目的components目录下。比较简单的方式是新建项目时选uni-ui项目模板在里面即可随便敲所有u开头的代码块。如果你的项目不是uni-ui项目模板那么你需要去插件市场手动把uni ui组件下载到工程里。代码块分为Tag代码块、JS代码块如在script标签内输入uShowToast回车会自动生成如下代码uni-app已支持代码块见下方列表。1、Tag代码块uButtonuCheckboxuGrid宫格需引用uni uiuList列表需引用uni uiuListMediauRadiouSwiper......几乎各种组件不管是内置组件还是uni-ui的组件均已封装为代码块使用HBuilderX打开uni-app项目中的.vue文件在template区域敲u代码助手会提示所有可见代码块列表。你也可以在HBuilderX菜单-工具-代码块设置-vue代码块的左侧列表查阅所有已支持的代码块。除组件外其他常用代码块包括viewfor生成一段带有v-for循环结构的视图代码块vbase生成一段基本的vue代码结构viewfor演示效果如下vbase演示效果如下2、JS代码块2.1 uni api代码块uRequestuGetLocationuShowToastuShowLoadinguHideLoadinguShowModaluShowActionSheetuNavigateTouNavigateBackuRedirectTouStartPullDownRefreshuStopPullDownRefreshuLoginuShareuPay......几乎各种常用js api均已封装为代码块在HBuilderX的js代码中敲u代码助手会提示所有可见列表。也可在HBuilderX菜单-工具-代码块设置-js代码块的左侧列表查阅所有。2.2 vue js代码块vImport导入文件edexport defaultvData输出 data(){return{}}vMethod输出 methods:{}vComponents输出 components: {}2.3 其他常用js代码块iff简单ifforrfor循环结构体forifor循环结构体并包含ifunn函数funa匿名函数rtreturn trueclog输出console.log()clogvar增强的日志输出可同时把变量的名字打印出来varcw输出var currentWebview this.$scope.page.$getAppWebview()ifiosiOS的平台判断ifAndroidAndroid的平台判断预置代码块不满足需求的话可以自定义代码块教程参考https://ask.dcloud.net.cn/article/35924
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →