微信小程序(三)--小程序UI开发
一.UI介绍
所谓的UI(user Interface)开发指的就是小程序应用界面的开发,在小程序开发框架中会为我们提供一系列的基础组件,例如HTML开发中为我们所提供的一些最基础的标签.需要注意的是微信小程序的标签所遵循的方式是严格的XML语法.
二.基础内容组件
1 <!-- 微信基础内容组件 -->
2 <view>
3 <!-- icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel,
4 download, search, clear;
5 1. 除了以上内置图标,其他图标必须通过图片的方式来进行加载-->
6 <icon type="success" color="red"></icon>
7 <icon type="success_no_circle"></icon>
8 <icon type="info"></icon>
9 <icon type="warn"></icon>
10 <icon type="waiting"></icon>
11 <icon type="cancel"></icon>
12 <icon type="download"></icon>
13 <icon type="search"></icon>
14 <icon type="clear"></icon>
15 <!-- progress 进度条组件 -->
16 <progress percent="100" active="true" duration="100" show-info="true" border-radius="50" activeColor="pink"></progress>
17 </view>
1 <!-- 表单组件 -->
2 <view>
3 <!-- type是用来控制按钮的类型的,只有三种类型:default primary warn
4 size默认也只有两种类型:default mini
5 plain属性可以将按钮设置为背景镂空
6 loading 可以设置加载图标
7 form-type 表单属性:submit 提交表单 reset 重置表单
8 hover-class 设置按下去的样式 只有在type设置为default的时候才能生效-->
9 <button type="default" size="mini" hover-class="btn-active">这是一个按钮</button>
10 <!-- checkBox 复选框
11 checkbox-group:给这些复选框编组,用于绑定change事件,可以得知当前是哪些CheckBox被选中了-->
12 <checkbox-group bindchange="checkbox_action">
13 <label class="checkbox" wx:for="{{ checkbox_items }}" wx:key="{{ item.name }}">
14 <checkbox value="{{ item.name }}" checked="{{ item.checked }}">{{ item.name }}</checkbox>
15 </label>
16 </checkbox-group>
17 <!-- input 输入框
18 placeholder 设置提示文本-->
19 <input class="input_demo1" placeholder="提示文本" placeholder-class="input_demo1_palceholder"></input>
20 <!-- pick 从底部弹起的选择器 -->
21 <view>
22 <picker value="{{ picker_1_data_index }}" range="{{ picker_1_data }}" bindchange="picker_1_action">
23 <view>
24 当前的选择:{{ picker_1_data[picker_1_data_index] }}
25 </view>
26 </picker>
27 </view>
28 </view>
1 <!-- 操作反馈组件 这些组件时不需要通过页面标签来使用的.而是用过调用一些方法来使用显示这个组件 -->
2 <view>
3 <button type="primary" bindtap="button_1_action" class="action_button">actionSheet</button>
4 <button type="primary" bindtap="button_2_action" class="action_button">modal</button>
5 <button type="primary" bindtap="button_3_action" class="action_button">taost</button>
6 <button type="primary" bindtap="button_4_action" class="action_button">loading</button>
7 </view>
8
9 <!-- 微信小程序基本组件总结
10 组件的基本用法
11 语法问题
12 1.组件使用的是类似于HTML的方式(有不同),组件使用的是严格的XML 标准(必须存在结束标签)
13 2.组件的分类
14 功能性的组件:具有具体功能的组件,例如button,checkbox;
15 布局类型的组件:用来完成页面结构(DIV);
16 API类型的组件:从使用的角度来讲,需要通过调用WX API来完成组件的使用-->
1 // pages/ui/ui.js
2 Page({
3
4 /**
5 * 页面的初始数据
6 */
7 data: {
8 checkbox_items: [{
9 name: "Java",
10 checked: true
11 },
12 {
13 name: "HTML",
14 checked: false
15 },
16 {
17 name: "JavaScript",
18 checked: true
19 }
20 ],
21 picker_1_data: ['Java', 'HTML', 'JavaScritp'],
22 picker_1_data_index: 1,
23 actionSheet_data: ['AAAA', 'B', 'C']
24 },
25 // 当当前checkbox-group中的内容发生改变时,将会获取到当前被选中的数组列表
26 checkbox_action: function(e) {
27 console.log(e.detail);
28 },
29 //picker组件的触发事件
30 picker_1_action: function(e) {
31 console.log(this);
32 this.setData({
33 picker_1_data_index: e.detail.value
34 })
35 },
36 //操作反馈组件,必须通过调用API的方法来进行调用
37 button_1_action: function() {
38 //action-sheet
39 wx.showActionSheet({
40 //显示出来的项目列表
41 itemList: this.data.actionSheet_data,
42 //点击其中任一项的回调(取消项除外)
43 success: function(res) {
44 console.log("用户选择了: " + getCurrentPages()[0].data.actionSheet_data[res.tapIndex]);
45 },
46 //点击取消
47 fail: function(res) {
48 console.log("用户点击了取消");
49 }
50 })
51 },
52 button_2_action: function() {
53 wx.showModal({
54 title: '提示',
55 content: '是否删除当前内容',
56 })
57 },
58 button_3_action: function() {
59 var flag = false;
60 wx.showToast({
61 title: '正在获取数据',
62 icon: "none",
63 success: function() {
64 if (flag == true) {
65 wx.hideToast();
66 }
67 },
68 })
69 },
70 button_4_action: function() {
71 var now = new Date();
72 var exitTime = now.getTime() + 2000;
73 console.log(now.getTime() + " " + exitTime);
74 wx: wx.showLoading({
75 title: '加载中',
76 mask: true,
77 success: function(res) {
78 //使加载弹窗在两秒后消失
79 while (true) {
80 now = new Date();
81 if (now.getTime() == exitTime) {
82 wx.hideLoading();
83 break;
84 }
85 }
86 },
87 fail: function(res) {},
88 complete: function(res) {
89 console.log("在最终会执行该函数");
90 },
91 })
92 }
93
94 })
