2021-12-15

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",

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',

pages/index/index.wxss

@@ -21,3 +21,6 @@
   flex-direction: column;
   justify-content: space-between;
 }
+button{
+  margin:10rpx;
+}

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)
+  }
+})

pages/test/button.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

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>

pages/test/button.wxss

@@ -0,0 +1,4 @@
+/* pages/test/button.wxss */
+button{
+  margin: 10rpx;
+}

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 () {
+
+  }
+})

pages/test/checkbox.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

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>

pages/test/checkbox.wxss

@@ -0,0 +1 @@
+/* pages/test/checkbox.wxss */

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 () {
+
+  }
+})

pages/test/form.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

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>

pages/test/form.wxss

@@ -0,0 +1 @@
+/* pages/test/form.wxss */

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 () {
+
+  }
+})

pages/test/input.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

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>

pages/test/input.wxss

@@ -0,0 +1 @@
+/* pages/test/input.wxss */

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 () {
+
+  }
+})

pages/test/picker.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

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>

pages/test/picker.wxss

@@ -0,0 +1 @@
+/* pages/test/picker.wxss */