微信小程序--界面结构

学习之路

微信小程序--界面结构

参照微信小程序开发文档

开始学习

UI组件

基本组件

1. icon 图标
   type 用于指定类型 success, success_no_circle, info, warn, waiting, cancel, download, search, clear size 用于指定大小 默认20 color 用于指定颜色 与css一样

 <!-- icon text progress -->
  <!-- success success_no_circle -->
  <!-- type用来定义图标类型 -->
  <icon type="success_no_circle"></icon>
  <!-- size 用于指定图标大小  默认是23 单位是px -->
  <icon type="success_no_circle" size="60"></icon>
  <!-- color 用于指定图标颜色 -->
  <icon type="info " size="60" color="blue"></icon>

2. text 文本 相当于css里面的p标签，主要为了可以加class样式 不同：可以嵌套，可以换行

 <!-- text 类似于HTML中的a标签，但是p标签不能嵌套  text主要是为了可以很好的控制页面上的内容 text还支持换行 -->
  <text>这是一段<text>文
 本</text></text>

3. progress 进度条 percent 百分比0~100 show-info 在进度条右侧显示百分比 border-radius 显示圆角大小 font-size 显示右侧百分比字体大小 strok-width 进度条线的宽度 active 进度条从左往右的动画

<progress percent="20" show-info active="true"></progress>

表单组件

4. button 按钮 size 大小 mini type 类型 warn 红色 primary 绿色 default 白色 loading 等待

 <button type="warn" size="mini" plain loading>这是一个按钮</button>

5. checkbox 复选框 value 值 disabled 禁用 checked 选中 color 颜色
6. input 输入框 type 类型 placeholder 输入框为空时的占位符

操作反馈组件

7. wx.showActionSheet 下拉菜单

 wx.showActionSheet({
      // 显示出来的项目列表
      itemList: ['A','B','C'],
      // 点击其中任一项的回调
      success:function (res){
        // res.cancel 指的是是否点击了取消
        if(!res.cancel){
          // tapIndex指的是点击的下标
          console.log(res.tapIndex)
        }
      }
    })

8. wx.showModal 模拟弹窗

    wx.showModal({
      title: '提示',
      content: '这是一个模拟弹窗',
      success:function (res){
        if(res.confirm){
          console.log('用户点击确定')
        }
      }
    })

9. wx.showToast() 模拟成功层

wx.showToast({
      title: '成功',
      // 只支持loading和success   loading（废弃）
      icon: 'success',
      duration: 2000
    })