微信小程序--逻辑与界面分离结构

学习之路

微信小程序–界面结构

参照微信小程序开发文档

开始学习

UI组件

基本组件

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

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

 
  这是一段文
 本

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

表单组件

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

 这是一个按钮

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
    })