From 2144ab19d2cd26413479845d22fdaed338f64498 Mon Sep 17 00:00:00 2001
From: wuxiang <40336055@qq.com>
Date: Wed, 15 Dec 2021 22:09:57 +0800
Subject: [PATCH] 2021-12-15

---
 app.json                 |  7 ++-
 pages/index/index.js     | 10 +++++
 pages/index/index.wxss   |  3 ++
 pages/test/button.js     | 69 +++++++++++++++++++++++++++++
 pages/test/button.json   |  3 ++
 pages/test/button.wxml   | 16 +++++++
 pages/test/button.wxss   |  4 ++
 pages/test/checkbox.js   | 75 ++++++++++++++++++++++++++++++++
 pages/test/checkbox.json |  3 ++
 pages/test/checkbox.wxml | 10 +++++
 pages/test/checkbox.wxss |  1 +
 pages/test/form.js       | 72 ++++++++++++++++++++++++++++++
 pages/test/form.json     |  3 ++
 pages/test/form.wxml     | 11 +++++
 pages/test/form.wxss     |  1 +
 pages/test/input.js      | 71 ++++++++++++++++++++++++++++++
 pages/test/input.json    |  3 ++
 pages/test/input.wxml    | 14 ++++++
 pages/test/input.wxss    |  1 +
 pages/test/picker.js     | 94 ++++++++++++++++++++++++++++++++++++++++
 pages/test/picker.json   |  3 ++
 pages/test/picker.wxml   | 32 ++++++++++++++
 pages/test/picker.wxss   |  1 +
 23 files changed, 506 insertions(+), 1 deletion(-)
 create mode 100644 pages/test/button.js
 create mode 100644 pages/test/button.json
 create mode 100644 pages/test/button.wxml
 create mode 100644 pages/test/button.wxss
 create mode 100644 pages/test/checkbox.js
 create mode 100644 pages/test/checkbox.json
 create mode 100644 pages/test/checkbox.wxml
 create mode 100644 pages/test/checkbox.wxss
 create mode 100644 pages/test/form.js
 create mode 100644 pages/test/form.json
 create mode 100644 pages/test/form.wxml
 create mode 100644 pages/test/form.wxss
 create mode 100644 pages/test/input.js
 create mode 100644 pages/test/input.json
 create mode 100644 pages/test/input.wxml
 create mode 100644 pages/test/input.wxss
 create mode 100644 pages/test/picker.js
 create mode 100644 pages/test/picker.json
 create mode 100644 pages/test/picker.wxml
 create mode 100644 pages/test/picker.wxss

diff --git a/app.json b/app.json
index cc111a9..ec9ca6c 100644
--- a/app.json
+++ b/app.json
@@ -10,7 +10,12 @@
     "pages/test/view",
     "pages/test/text",
     "pages/test/rich-text",
-    "pages/test/progress"
+    "pages/test/progress",
+    "pages/test/button",
+    "pages/test/checkbox",
+    "pages/test/input",
+    "pages/test/form",
+    "pages/test/picker"
   ],
   "window": {
     "backgroundTextStyle": "light",
diff --git a/pages/index/index.js b/pages/index/index.js
index 8389373..5717426 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -23,6 +23,16 @@ Page({
           {title:'icon组件',url: "../test/icon"},
           {title:'progress组件',url: "../test/progress"}
         ]
+      },
+      {
+        type:'表单',
+        pages:[
+          {title:'button组件',url: "../test/button"},
+          {title:'checkbox组件',url: "../test/checkbox"},
+          {title:'input组件',url: "../test/input"},
+          {title:'form组件',url: "../test/form"},
+          {title:'picker组件',url: "../test/picker"}
+        ]
       }
     ],
     motto: 'Hello World',
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index 00f77fd..b7f7507 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -21,3 +21,6 @@
   flex-direction: column;
   justify-content: space-between;
 }
+button{
+  margin:10rpx;
+}
\ No newline at end of file
diff --git a/pages/test/button.js b/pages/test/button.js
new file mode 100644
index 0000000..6e93452
--- /dev/null
+++ b/pages/test/button.js
@@ -0,0 +1,69 @@
+// pages/test/button.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  getUserDetail:function(e){
+    console.log(e.detail.userInfo)
+  }
+})
\ No newline at end of file
diff --git a/pages/test/button.json b/pages/test/button.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/test/button.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/test/button.wxml b/pages/test/button.wxml
new file mode 100644
index 0000000..8b954f9
--- /dev/null
+++ b/pages/test/button.wxml
@@ -0,0 +1,16 @@
+<!--pages/test/button.wxml-->
+<text>pages/test/button.wxml</text>
+<view class="demobox">
+  <view class="title">1.迷你按钮</view>
+  <button type="primary" size="mini">主要按钮</button>
+  <button type="default" size="mini">次要按钮</button>
+  <button type="warn" size="mini">警告按钮</button>
+  <view class="title">2.按钮状态</view>
+  <button>普通按钮</button>
+  <button disabled="ture">禁用按钮</button>
+  <button loading="true">加载按钮</button>
+  <view class="title">3.按钮单击监听</view>
+  <button type="primary" bindgetuserinfo="getUserDetail" open-type="getUserInfo">点我试试</button>
+  <button disabled="ture">禁用按钮</button>
+  <button loading="true">加载按钮</button>
+</view>
\ No newline at end of file
diff --git a/pages/test/button.wxss b/pages/test/button.wxss
new file mode 100644
index 0000000..c90785a
--- /dev/null
+++ b/pages/test/button.wxss
@@ -0,0 +1,4 @@
+/* pages/test/button.wxss */
+button{
+  margin: 10rpx;
+}
\ No newline at end of file
diff --git a/pages/test/checkbox.js b/pages/test/checkbox.js
new file mode 100644
index 0000000..4cc20b9
--- /dev/null
+++ b/pages/test/checkbox.js
@@ -0,0 +1,75 @@
+// pages/test/checkbox.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    checkboxItem:[
+      {name:'苹果', value:'Apple'},
+      {name:'橙子', value:'Orange', checked:true},
+      {name:'梨子', value:'Pear'},
+      {name:'草莓', value:'Strawberry'},
+      {name:'香蕉', value:'Banana'},
+      {name:'葡萄', value:'Grape'}
+    ]
+  },
+  onChange:function(e){
+    console.log(e.detail.value)
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/test/checkbox.json b/pages/test/checkbox.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/test/checkbox.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/test/checkbox.wxml b/pages/test/checkbox.wxml
new file mode 100644
index 0000000..2ce0207
--- /dev/null
+++ b/pages/test/checkbox.wxml
@@ -0,0 +1,10 @@
+<!--pages/test/checkbox.wxml-->
+<text>pages/test/checkbox.wxml</text>
+<view class="demobox">
+  <view class="title">使用数组批量生成选项</view>
+  <checkbox-group bindchange="onChange">
+    <view wx:for="{{checkboxItem}}" wx:key="index">
+      <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
+    </view>
+  </checkbox-group>
+</view>
\ No newline at end of file
diff --git a/pages/test/checkbox.wxss b/pages/test/checkbox.wxss
new file mode 100644
index 0000000..1730082
--- /dev/null
+++ b/pages/test/checkbox.wxss
@@ -0,0 +1 @@
+/* pages/test/checkbox.wxss */
\ No newline at end of file
diff --git a/pages/test/form.js b/pages/test/form.js
new file mode 100644
index 0000000..c4c38a6
--- /dev/null
+++ b/pages/test/form.js
@@ -0,0 +1,72 @@
+// pages/test/form.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+  onSubmit:function(e){
+    console.log('表单被提交');
+    console.log(e.detail.value);
+  },
+  onReset:function(e){
+    console.log('表单已被重置');
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/test/form.json b/pages/test/form.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/test/form.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/test/form.wxml b/pages/test/form.wxml
new file mode 100644
index 0000000..b44d11a
--- /dev/null
+++ b/pages/test/form.wxml
@@ -0,0 +1,11 @@
+<!--pages/test/form.wxml-->
+<text>pages/test/form.wxml</text>
+<view class="demobox">
+  <view class="title">模拟用户登录效果</view>
+  <form bindsubmit="onSubmit" bindreset="onReset">
+    <input name='username' type="text" placeholder="请输入用户名"/>
+    <input name="password" password="true" placeholder="请输入密码"/>
+    <button size="mini" form-type="submit">提交</button>
+    <button size="mini" form-type="reset">重置</button>
+  </form>
+</view>
\ No newline at end of file
diff --git a/pages/test/form.wxss b/pages/test/form.wxss
new file mode 100644
index 0000000..5058ccd
--- /dev/null
+++ b/pages/test/form.wxss
@@ -0,0 +1 @@
+/* pages/test/form.wxss */
\ No newline at end of file
diff --git a/pages/test/input.js b/pages/test/input.js
new file mode 100644
index 0000000..42f10af
--- /dev/null
+++ b/pages/test/input.js
@@ -0,0 +1,71 @@
+// pages/test/input.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+  onInput:function(e){
+    console.log('onInput触发，输入框内容发生改变，当前值为'+e.detail.value)
+  },
+  onBlur:function(e){
+    console.log('onBlur触发，文本框失去焦点，当前值为'+e.detail.value)
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/test/input.json b/pages/test/input.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/test/input.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/test/input.wxml b/pages/test/input.wxml
new file mode 100644
index 0000000..3b5b9d0
--- /dev/null
+++ b/pages/test/input.wxml
@@ -0,0 +1,14 @@
+<!--pages/test/input.wxml-->
+<text>pages/test/input.wxml</text>
+<view class="demobox">
+  <view class="title">1.密码输入框</view>
+  <input password="true" placeholder="请输入密码"/>
+  <view class="title">2.最大字符长度限制为10</view>
+  <input type="text" maxlength="10" placeholder="这里最多只能输入10个字符"/>
+  <view class="title">3.禁用输入框</view>
+  <input disabled="true" placeholder="该输入框已被禁用"/>
+  <view class="title">4.自定义placeholder样式</view>
+  <input placeholder-style="color:red;font-weight:bold" placeholder="自定义样式"/>
+  <view class="title">5.输入框事件监听</view>
+  <input bindinput="onInput" bindblur="onBlur" placeholder="这里输入内容将被监听"/>
+</view>
\ No newline at end of file
diff --git a/pages/test/input.wxss b/pages/test/input.wxss
new file mode 100644
index 0000000..5694b63
--- /dev/null
+++ b/pages/test/input.wxss
@@ -0,0 +1 @@
+/* pages/test/input.wxss */
diff --git a/pages/test/picker.js b/pages/test/picker.js
new file mode 100644
index 0000000..475f2f9
--- /dev/null
+++ b/pages/test/picker.js
@@ -0,0 +1,94 @@
+// pages/test/picker.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    selectorItems:['苹果','香蕉','葡萄'],
+    multiSelectorItems:[['罗宋汤','蘑菇汤'],['牛排','猪排','鱼排'],['冰淇淋','鸡蛋布丁']]
+  },
+  onSelectorChange:function(e){
+    let i=e.detail.value;
+    let value=this.data.selectorItems[i];
+    this.setData({selector:value})
+  },
+  onMultiSelectorChange:function(e){
+    let indexs=e.detail.value;
+    let items=this.data.multiSelectorItems;
+    let values=new Array();
+    for(let i=0;i<indexs.length;i++){
+      let k=indexs[i];
+      let v=items[i][k];
+      values.push(v);
+    }
+    this.setData({multiSelector:values})
+  },
+  onTimeChange:function(e){
+    let v=e.detail.value;
+    this.setData({time:v});
+  },
+  onDateChange:function(e){
+    let v=e.detail.value;
+    this.setData({date:v});
+  },
+  onRegionChange:function(e){
+    let v=e.detail.value;
+    this.setData({region:v});
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/test/picker.json b/pages/test/picker.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/test/picker.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/test/picker.wxml b/pages/test/picker.wxml
new file mode 100644
index 0000000..1950831
--- /dev/null
+++ b/pages/test/picker.wxml
@@ -0,0 +1,32 @@
+<!--pages/test/picker.wxml-->
+<text>pages/test/picker.wxml</text>
+<view class="demobox">
+  <view class="title">1.普通选择器</view>
+  <picker mode="selector" range="{{selectorItems}}" bindchange="onSelectorChange">
+    <view>当前选择：{{selector}}</view>
+  </picker>
+</view>
+<view class="demobox">
+  <view class="title">2.多列选择器</view>
+  <picker mode="multiSelector" range="{{multiSelectorItems}}" bindchange="onMultiSelectorChange">
+    <view>当前选择：{{multiSelector}}</view>
+  </picker>
+</view>
+<view class="demobox">
+  <view class="title">3.时间选择器</view>
+  <picker mode="time" bindchange="onTimeChange">
+    <view>当前选择：{{time}}</view>
+  </picker>
+</view>
+<view class="demobox">
+  <view class="title">4.日期选择器</view>
+  <picker mode="date" bindchange="onDateChange">
+    <view>当前选择：{{date}}</view>
+  </picker>
+</view>
+<view class="demobox">
+  <view class="title">5.区域选择器</view>
+  <picker mode="region" bindchange="onRegionChange">
+    <view>当前选择：{{region}}</view>
+  </picker>
+</view>
\ No newline at end of file
diff --git a/pages/test/picker.wxss b/pages/test/picker.wxss
new file mode 100644
index 0000000..335b0fb
--- /dev/null
+++ b/pages/test/picker.wxss
@@ -0,0 +1 @@
+/* pages/test/picker.wxss */