.UI introduce a
so-called UI (user Interface) development refers to a small program interface application development, applet development framework will provide us with a series of basic components, such as the development of some of the most basic HTML as we provide the label should be noted that the micro-channel applet tag followed approach is strict XML syntax.
II. basic content components
1 <! - micro-channel assembly based content ->
2 < View >
. 3 <-! Icon types, valid values: Success, success_no_circle, info, The warn, Waiting, Cancel,
. 4 downloads, Search, Clear;
. 5 1. in addition to these built-in icon and other icons must be loaded by way of pictures ->
6 < icon of the type = "Success" Color = "Red" > </ icon >
7 < icon of the 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>
->Progress progress bar component<-!15
16 <progress percent="100" active="true" duration="100" show-info="true" border-radius="50" activeColor="pink"></progress>
17 </view>
1 <! - form components ->
2 < View >
. 3 <! - type is used to control the type of buttons, only three types: Primary The warn default
. 4 size default only two types: Mini default
. 5 Plain properties can set the button background hollowed
6 loading can be set to load icon
7 form-type form properties: submit reset submit form reset form
8 hover-class set down by the type of style only when the default is set to take effect ->
. 9 < button type = "default" size = "Mini" hover-class = "BTN-Active" > this is a button </ button >
10 <!--checkBox checkbox
. 11 CheckBox-Group: these boxes to consist, for binding the change event, the current can be known what was selected CheckBox ->
12 is < CheckBox-Group bindchange = "checkbox_action" >
13 is < label class = "CheckBox" WX: for = "{} {} checkbox_items" WX: Key = "{} {} item.name, for" >
14 < CheckBox value = "{} {} item.name, for" the checked = "{{Item }} .checked " > {{}} item.name, for </ CheckBox >
15 </ label >
16 </checkbox-group>
. 17 <-! INPUT input box
18 is placeholder provided prompt text ->
. 19 < INPUT class = "input_demo1" placeholder = "prompt text" placeholder-class = "input_demo1_palceholder" > </ INPUT >
20 is <-! Pick from the bottom bounce selector ->
21 is < View >
22 is < Picker value = "{} {} picker_1_data_index" Range = "{} {} picker_1_data" bindchange = "picker_1_action" >
23 is < View >
24 The current selection: {{picker_1_data [picker_1_data_index]}}
25 </ View >
26 is </ 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 })