移动端开发基础【16】使用代码块直接创建组件模板

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

移动端开发基础【16】使用代码块直接创建组件模板

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

代码块分为Tag代码块、JS代码块,如在 script 标签内输入 uShowToast 回车,会自动生成如下代码:

 移动端开发基础【16】使用代码块直接创建组件模板

uni-app已支持Tag代码块:

(1) uButton:按钮

(2) uCheckbox:复选框

(3) uGrid:宫格,需引用uni ui

(4) uList:列表,需引用uni ui

(5) uRadio:单选框

(6) uSwiper:滑块视图

(7) uCard:卡片

(8) uImage:图片

(9) uIcons:图标

(10)uMap:地图

……

几乎各种组件不管是内置组件还是uni ui的组件,均已封装为代码块,在HBuilderXvue代码template区域中敲u,代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-vue代码块的左侧列表查阅所有。

除组件外,其他常用代码块包括:

viewfor:生成一段带有v-for循环结构的视图代码块

vbase:生成一段基本的vue代码结构

uniapp支持的JS代码块

(1)  uRequest:发起网络请求

(2)  uGetLocation:获取当前的地理位置、速度

(3)  uShowToast:显示提示框

(4)  uShowLoading:显示加载提示框

(5)  uHideLoading:隐藏提示框

(6)   uShowModal:显示模态弹窗

(7)   uShowActionSheet:显示菜单列表

(8)   uNavigateTo:打开新页面

(9)   uNavigateBack:页面返回

(10) uRedirectTo:页面重定向

(11) uStartPullDownRefresh:触发下拉刷新

(12) uStopPullDownRefresh:停止当前页面下拉刷新

(13) uLogin:登录

(14) uShare:分享

(15) uPay:支付

......

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

uniapp支持的vue js代码块

(1) vImport:导入文件

(2) edexport default

(3) vData:输出 data(){return{}}

(4) vMethod:输出 methods:{}

(5) vComponents:输出 components: {}

uniapp支持的其他常用js代码块

(1) iff:简单if

(2) forrfor循环结构体

(3) forifor循环结构体并包含i

(4) funn:函数

(5) funa:匿名函数

(6) rtreturn true

(7) clog:输出:"console.log()"

(8) clogvar:增强的日志输出,可同时把变量的名字打印出来

(9) varcw:输出:"var currentWebview = this.$mp.page.$getAppWebview()"

(10) ifiosiOS的平台判断

(11) ifAndroidAndroid的平台判断

预置代码块不满足需求的话,可以自定义代码块

移动端开发基础【16】使用代码块直接创建组件模板

上一篇:经典软件测试面试题目:Android 和 ios 测试区别?这样回答:稳!


下一篇:tensorRT工程实践