微信小程序(三)--小程序UI开发

一.UI介绍
　　所谓的UI(user Interface)开发指的就是小程序应用界面的开发,在小程序开发框架中会为我们提供一系列的基础组件,例如HTML开发中为我们所提供的一些最基础的标签.需要注意的是微信小程序的标签所遵循的方式是严格的XML语法.
二.基础内容组件

   <!-- 微信基础内容组件 -->
   <view>
     <!-- icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel,
     download, search, clear;
     1. 除了以上内置图标,其他图标必须通过图片的方式来进行加载-->
     <icon type="success" color="red"></icon>
     <icon type="success_no_circle"></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>
     <!-- progress 进度条组件 -->
     <progress percent="100" active="true" duration="100" show-info="true" border-radius="50" activeColor="pink"></progress>
   </view>

   <!-- 表单组件 -->
   <view>
     <!-- type是用来控制按钮的类型的,只有三种类型:default primary warn
         size默认也只有两种类型:default mini
         plain属性可以将按钮设置为背景镂空
         loading 可以设置加载图标
         form-type 表单属性:submit 提交表单 reset 重置表单
         hover-class 设置按下去的样式 只有在type设置为default的时候才能生效-->
     <button type="default" size="mini" hover-class="btn-active">这是一个按钮</button>
     <!-- checkBox 复选框
     checkbox-group:给这些复选框编组,用于绑定change事件,可以得知当前是哪些CheckBox被选中了-->
     <checkbox-group bindchange="checkbox_action">
       <label class="checkbox" wx:for="{{ checkbox_items }}" wx:key="{{ item.name }}">
         <checkbox value="{{ item.name }}" checked="{{ item.checked }}">{{ item.name }}</checkbox>
       </label>
     </checkbox-group>
     <!-- input 输入框
     placeholder 设置提示文本-->
     <input class="input_demo1" placeholder="提示文本" placeholder-class="input_demo1_palceholder"></input>
     <!-- pick 从底部弹起的选择器 -->
     <view>
       <picker value="{{ picker_1_data_index }}" range="{{ picker_1_data }}" bindchange="picker_1_action">
         <view>
           当前的选择:{{ picker_1_data[picker_1_data_index] }}
         </view>
       </picker>
     </view>
   </view>

   <!-- 操作反馈组件 这些组件时不需要通过页面标签来使用的.而是用过调用一些方法来使用显示这个组件 -->
   <view>
     <button type="primary" bindtap="button_1_action" class="action_button">actionSheet</button>
     <button type="primary" bindtap="button_2_action" class="action_button">modal</button>
     <button type="primary" bindtap="button_3_action" class="action_button">taost</button>
     <button type="primary" bindtap="button_4_action" class="action_button">loading</button>
   </view>

   <!-- 微信小程序基本组件总结
     组件的基本用法
       语法问题
         1.组件使用的是类似于HTML的方式(有不同),组件使用的是严格的XML 标准(必须存在结束标签)
         2.组件的分类
           功能性的组件:具有具体功能的组件,例如button,checkbox;
           布局类型的组件:用来完成页面结构(DIV);
           API类型的组件:从使用的角度来讲,需要通过调用WX API来完成组件的使用-->

 // pages/ui/ui.js
 Page({

   /**
    * 页面的初始数据
    */
   data: {
     checkbox_items: [{
         name: "Java",
         checked: true
       },
       {
         name: "HTML",
         checked: false
       },
       {
         name: "JavaScript",
         checked: true
       }
     ],
     picker_1_data: ['Java', 'HTML', 'JavaScritp'],
     picker_1_data_index: 1,
     actionSheet_data: ['AAAA', 'B', 'C']
   },
   // 当当前checkbox-group中的内容发生改变时,将会获取到当前被选中的数组列表
   checkbox_action: function(e) {
     console.log(e.detail);
   },
   //picker组件的触发事件
   picker_1_action: function(e) {
     console.log(this);
     this.setData({
       picker_1_data_index: e.detail.value
     })
   },
   //操作反馈组件,必须通过调用API的方法来进行调用
   button_1_action: function() {
     //action-sheet
     wx.showActionSheet({
       //显示出来的项目列表
       itemList: this.data.actionSheet_data,
       //点击其中任一项的回调(取消项除外)
       success: function(res) {
         console.log("用户选择了: " + getCurrentPages()[0].data.actionSheet_data[res.tapIndex]);
       },
       //点击取消
       fail: function(res) {
         console.log("用户点击了取消");
       }
     })
   },
   button_2_action: function() {
     wx.showModal({
       title: '提示',
       content: '是否删除当前内容',
     })
   },
   button_3_action: function() {
     var flag = false;
     wx.showToast({
       title: '正在获取数据',
       icon: "none",
       success: function() {
         if (flag == true) {
           wx.hideToast();
         }
       },
     })
   },
   button_4_action: function() {
     var now = new Date();
     var exitTime = now.getTime() + 2000;
     console.log(now.getTime() + " " + exitTime);
     wx: wx.showLoading({
       title: '加载中',
       mask: true,
       success: function(res) {
         //使加载弹窗在两秒后消失
         while (true) {
           now = new Date();
           if (now.getTime() == exitTime) {
             wx.hideLoading();
             break;
           }
         }
       },
       fail: function(res) {},
       complete: function(res) {
         console.log("在最终会执行该函数");
       },
     })
   }

 })