微信小程序开发概念与总结03

组件介绍以及应用

用户UI开发
    User Interface
    组件是视图层的最近本单元
        UI界面库http://weui.io
        组件的使用和语法
            严格的xml语法

基础内容组件

icon text process

<!-- item text icon -->
<!-- icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear -->
<!-- type用于定义图标类型，除了这些内置图标，其他必须通过图片使用 -->
<!-- size 用于设置大小 默认是23px -->
<!-- color设置图标的颜色 -->
<icon type="success" size="60"></icon>
<icon type="success_no_circle" color="#eee"></icon>
<icon type="info"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="cancel"></icon>
<icon type="download"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<!-- text定义一段文本，类似于html 的p标签 -->
<!-- 使用text为了方便控制文本的样式 -->
<!-- text控制的文本，支持换行 -->
<text>这是一段文本 <text>可以嵌套使用</text></text>
这是一段没有text的文本

<!-- 进度条 -->
<!-- show-info是用来控制是否显示具体数值的属性 -->
<!-- stroke-width线宽 -->
<progress percent="20" show-info />
<!-- active显示的时候会有一个动画效果 -->
<progress percent="10" active></progress>	

表单组件

<!-- 表单组件 -->
<!-- button的基本使用 -->
<!-- primary warn default -->
<button type="primary">这是一个按钮</button>
<button type="warn">这是一个按钮</button>
<!-- 默认如下 -->
<button type="default">这是一个按钮</button>
<!-- size用于设置按钮大小 取值 mini default -->
<button type="default" size="mini">这是一个按钮</button>
<button type="default" size="default" plain loading>这是一个按钮</button>
<!-- hover-class点击的颜色 -->
<button hover-class="btn-active">hover class</button>

<checkbox>复选框</checkbox>
<!-- 选中 -->
<checkbox checked="{{ true }}">选中</checkbox>

<!-- input输入框 -->
<input class="input1" placeholder="请输入内容" placeholder-class="" />

<label></label>
<picker></picker>
<textarea></textarea>
<switch></switch>

操作反馈组件

action-sheet modal toast loading

//通过按钮点击触发
// 点击按钮触发
// console.log('clicke me....');
// 交互操作组件，必须通过调用API的方式进行使用
// wx.showActionSheet({
//   itemList: ["A","B","C"],
//   // 点击其中一项的回调
//   success: function(res){
//     if(!res.cancel){
//       // tapIndex点击的下标
//       console.log(res.tapIndex);
//     }
//   }
// })
// wx.showModal({
//   title: '提示',
//   content: '这是一个模态框',
//   success: function(res){
//     if(res.confirm){
//       console.log('用户点击确定了');
//     }
//   }
// })  
// wx.showToast({
//   title: '成功',
//   // 只支持loading和success
//   icon: 'success',
//   duration: 2000
// })	

总结 

    语法问题
        组件使用的是类似于html格式，但有不同，组件使用的是严格的xml标准（开闭标签问题）
    组件分类：
        功能型组件
        布局类型组件，用来完成页面结构
        API类型的，使用的角度，通过调用一个方法来使用的

以上是此次相关代码和知识点的总结。