zoukankan      html  css  js  c++  java
  • 移动端开发基础【16】使用代码块直接创建组件模板

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

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

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

     

    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的平台判断

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

    官网:http://www.lenbor.com
  • 相关阅读:
    测试用户网速办法
    JS 判断后端返回的对象是否为空
    优美地低于生活——读书笔记
    vue login.js登录逻辑
    vuex store index.js配置登录
    vue router的 index.js设置
    css 添加校验时的必填项前面的红色的*
    vue 的 main.js 设置
    vue.config.js配置
    vim的使用
  • 原文地址:https://www.cnblogs.com/lenbor/p/13330488.html
Copyright © 2011-2022 走看看