.UIは紹介
いわゆるUI（ユーザーインターフェース）の開発は、小さなプログラム・インターフェース・アプリケーションの開発を意味し、私たちが提供するとして、アプレット開発フレームワークは、最も基本的なHTMLのいくつかの開発などの基本的なコンポーネント、一連のを私たちに提供しますラベルは、マイクロチャネル・アプレットタグがアプローチに従っていることに留意すべきである厳密なXML構文。ある
II。基本的なコンテンツ・コンポーネント
1 <！ - マイクロチャネルアセンブリベースのコンテンツ- >
2 < 表示>
3 <！ - アイコンの種類、有効な値：成功、success_no_circle、情報、キャンセル、待機を警告
4件の。 ダウンロード、検索、クリア;
5。 1。これらのアイコンを内蔵しており、他のアイコンに加えて、絵の道によってロードされなければならない- >
6 < アイコンタイプの=「成功」色=「赤」> </ アイコン>
7 < アイコンタイプの=「success_no_circle」> </ アイコン>
8 < アイコンタイプ= "情報" > </ アイコン>
9 <アイコンの種類= "警告" > </ アイコン>
10 < アイコンの種類= "待機中" > </ アイコン>
11 < アイコンタイプ= "キャンセル" > </ アイコン>
12 < アイコンの種類= "ダウンロード" > </ アイコン>
13 < アイコンのタイプ= "検索" > </ アイコン>
14 < アイコンのタイプ= "クリア" > </ アイコン>
15 <！ - プログレスプログレスバーコンポーネント- >
16 < 進捗パーセント= "100" アクティブ= "true"の期間= "100" ショー情報= "真" ボーダー半径= "50" activeColor = "ピンク" > </ 進行>
17 </ ビュー>
1 <！ - フォームコンポーネント- >
2 < 表示>
3。 <！ - タイプは、3種類のみをボタンの種類を制御するために使用されます。プライマリザ・デフォルトを警告する
。4 サイズのデフォルトの2種類のみ：ミニデフォルトに
。5 平原プロパティを設定することができ、ボタンの背景が空洞
6 ロードがアイコン負荷に設定することができます
7 フォーム型のフォームプロパティ：リセットは、フォームのリセットフォームに提出提出
8 デフォルトは有効になるように設定されているだけなスタイルのタイプによってホバークラスのセットをダウン- >
9 < ボタンタイプ=「デフォルト」サイズ=「ミニ」ホバークラス=「BTN-アクティブ」>これはボタンである</ ボタン>
10 <！ - チェックボックスのチェックボックス
。11 チェックボックスグループ：これらのボックスが構成されると、変更イベントを結合するために、現在は、チェックボックスを選択したものを知ることができる- >
12である < CheckBoxの-グループbindchange =「checkbox_action」>
13である < ラベルクラス= "チェックボックス" WXのための：= "{} {} checkbox_items" WX：キー= "{} {} item.name用" >
14 < チェックボックスの値= "{} {} item.nameは、" チェック=「{{アイテム}} ".checkedを> {{}} item.name用</ チェックボックス>
15 </ ラベル>
16 </ チェックボックスグループ>
17 <！ - INPUT入力ボックス
18れる プレースホルダは、プロンプトテキスト設け- >
19。 < INPUT クラス= "input_demo1" プレースホルダ= "プロンプトテキスト" プレースホルダクラスを"input_demo1_palceholder" = </> INPUT >
20 <！ - 底から選択バウンスセレクタ- >
21である < 表示>
22である < ピッカー値= "{} {} picker_1_data_index" 範囲= "{} {} picker_1_data" bindchange = "picker_1_action" >
23れる < 表示>
24 現在の選択：{{picker_1_data [picker_1_data_index]}}
25 </ 表示>
26である </ ピッカー>
27 </ 表示>
28 </ 表示>
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 })