Form Components for the Applet JAVA Actual Warfare Applet (25)

Let's talk about the basic components of the applet.Source: No.12 in https://github.com/limingios/wxProgram.git

Form Components

  • button

  • checkbox/label

  • form

  • input

  • picker

  • picker-view

  • radio

  • slider

Use of button s

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/button.html

  • Demonstration use cases
    >Development capabilities and api are not covered this time, and will be explained later in conjunction with other components.

<button>Button 1</button>
<button size="mini">Button 2</button>
<button size="mini" type='primary'>Button 3</button>
<button size="mini" type='warn'>Button 4</button>
<button size="mini" type='warn' plain='{{true}}'>Button 5</button>
<button size="mini" type='warn' disabled='{{true}}'>Button 6</button>
<button size="mini" type='warn' disabled='{{true}}' loading='{{true}}'>Button 6</button>

Use of checkbox/label

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

  • Demonstration use cases
    >Development capabilities and api are not covered this time, and will be explained later in conjunction with other components.

<checkbox-group>
  <checkbox value='China'/>China
  <checkbox value='U.S.A' disabled='{{true}}'/>U.S.A
  <checkbox value='Russia' checked='{{true}}' color='red'/>Russia
</checkbox-group>

<checkbox-group style="margin-top:50px;">
 <view wx:for='{{array}}'>
    <checkbox  value='{{item.value}}' disabled='{{item.disable}}' color='{{item.color}}' checked='{{item.checked}}'>{{item.name}}</checkbox>
 </view>
</checkbox-group>

<checkbox-group style="margin-top:50px;">
 <label wx:for='{{array}}'>
    <checkbox  value='{{item.value}}' disabled='{{item.disable}}' color='{{item.color}}' checked='{{item.checked}}'>{{item.name}}</checkbox>
 </label>
</checkbox-group>

<checkbox-group style="margin-top:50px;">
 <label wx:for='{{array}}'>
    <checkbox id='{{item.id}}' value='{{item.value}}' disabled='{{item.disable}}' color='{{item.color}}' checked='{{item.checked}}'>{{item.name}}</checkbox>
 </label>
</checkbox-group>

<label for='1003'>Russian Point It can be selected</label>
//button.js

Page({
  data:{
    array:[
      { id: "1001",name: "China", value: "China",checked:true,color:'red',disable:false},
      { id: "1002",name: "U.S.A", value: "U.S.A", checked: false, color: 'black', disable: false },
      { id: "1003",name: "Russia", value: "Russia", checked: false, color: 'blue', disable: false },
      { id: "1004",name: "Personal home page: idig8.com", value: "idig8.com", checked: false, color: 'yellow', disable: true },
    ]
  }
})

Use of form

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/form.html

  • Demonstration use cases
    >Form submission is important in web development, and there are corresponding forms submissions in applets.

form.wxml

<form bindsubmit='formSubmit' bindreset='formReset'>
  <checkbox-group bindchange="changed" name="guojia">
    <checkbox value='China'/>China
    <checkbox value='U.S.A' disabled='{{true}}'/>U.S.A
    <checkbox value='Russia' checked='{{true}}' color='red'/>Russia
  </checkbox-group>
  <button form-type='submit'>Submit</button>
  <button form-type='reset'>Reset</button>
</form>

form.js

//form.js

Page({

  changed:function(e){
    debugger;
  },
  formSubmit:function(e){
      console.log(e);
  },
  formReset: function (e) {
      console.log("Click Reset")
  }
})

input box

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/input.html

  • Demonstration use cases
    >The plug-in does a great job considering everything.

<input value="Personal Web Page: idig8.com"></input>
<input value="WeChat Public Number: Too many programming pits"></input>
<input value="1234567890" type='number'></input>
<input value="410202198511112018" type='idcard'></input>
<input value="5.36" type='digit'></input>
<input value="password" password='{{true}}'></input>
Enter account number:<input placeholder='Placeholder when input box is empty' ></input>
Enter account number:<input placeholder='Placeholder when input box is empty' placeholder-class='placeholderStyle'></input>
Enter account number:<input placeholder='Placeholder when input box is empty' placeholder-style='color:yellow;'></input>
Length limit:<input placeholder='Up to 5 digits' maxlength='5'></input>
<!-- Mobile Debugging-Enter Get Focused:<input placeholder='Up to 5 digits' focus='{{true}}' cursor='2'></input> -->
Mobile Debugging-Keep the keyboard closed when you click the button in the lower right corner of the keyboard:<input placeholder='Keep the keyboard closed when you click the button in the lower right corner of the keyboard'  confirm-hold='{{true}}'></input>

Mobile Debugging-Bottom right text:<input  placeholder='The button at the bottom right corner of the keyboard is Send' confirm-type='send'></input>

Mobile Debugging-Selected state:<input  value='123456789' focus='{{true}}' selection-start='1' selection-end='3'></input>
Mobile Debugging-Whether the page is automatically pushed up when the keyboard pops up:<input  placeholder='Click to try Keyboard Bounce' adjust-position='{{false}}'></input>
input Event:<input bindinput='inputEvent' bindfocus='focusEvent' bindblur='blurEvent' bindconfirm='confirmEvent'></input>
//form.js

Page({
  inputEvent:function(){
    console.log("inputEvent");
    return "The result was unexpected. This has been replaced"
  },
  focusEvent: function () {
    console.log("focusEvent");
  },
  blurEvent: function () {
    console.log("blurEvent");
  },
  confirmEvent: function () {
    console.log("confirmEvent");
  },
})

Many of these effects need to be seen on the mobile phone side. It is recommended that remote applets have a cool effect!

Use of picker

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

  • Demonstration use cases
    >Selector - A scrolling selector that pops up from the bottom now supports five selectors, distinguished by the mode l, namely the normal selector, the multi-column selector, the time selector, the date selector, the provincial and urban selector, and the default is the normal selector.

picker.wxml

<view style='color:red'>Single column selector</view>

<picker mode="selector" range="{{array}}">
Test Selector--array
</picker>
<picker mode="selector" range="{{arrayObject}}" range-key='name' bindchange='mychange' bindcancel='mycancel'>
Test Selector--object
</picker>


<picker mode="selector" range="{{arrayObject}}" range-key='name' bindchange='mychangeResult'>
{{myTitle}}
</picker>

<view style='color:red;margin-top:100rpx;'>Multi-column selector</view>

<picker mode="multiSelector" range="{{arraymult}}">
Test Selector--array
</picker>
<picker mode="multiSelector" range="{{arraymultObject}}" range-key='name' bindcancel='mycancel' bindcolumnchange='mychangemulticolumn' bindchange='mychangemulti'>
Test Selector--object
</picker>

<view style='margin-top:100rpx;'>Time selector</view>
<picker mode="time" start="08:08" end="22:30" bindchange="changeTime">
    <view>{{timeLable}}</view>
</picker>

<view style='margin-top:100rpx;'>Date Pickers</view>
<picker mode="date" start="2018-03-01" end="2018-06-25" bindchange="changeDate" fields="month">
    <view>{{dateLable}}</view>
</picker>

<view style='margin-top:100rpx;'>City selector</view>
<picker mode="region" bindchange="changeCity" custom-item="{{customItem}}" value="{{region}}">
    <view>{{cityLable}}</view> 
    <!-- Current selection:{{region[0]}},{{region[1]}},{{region[2]}} -->
</picker>

picker.js


//picker.js Page({ data:{   array:['one','two','three','four','five','six','seven'],   arrayObject:[     { id: 1001, name: 'Personal web address'},     { id: 1002, name: 'idig8.com' },     { id: 1003, name: 'Public Number' },     { id: 1004, name: 'Too many programming pits' },   ],   myTitle:'Select Click to Determine Display Results',   arraymult:[     ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],     ['one', 'two', 'three', 'four', 'five', 'six', 'seven']   ],   arraymultObject: [     [       { id: 1001, name: 'Personal web address' },       { id: 1002, name: 'idig8.com' },       { id: 1003, name: 'Public Number' },       { id: 1004, name: 'Too many programming pits' },     ],     [       { id: 1001, name: 'Personal web address' },       { id: 1002, name: 'idig8.com' },       { id: 1003, name: 'Public Number' },       { id: 1004, name: 'Too many programming pits' },     ]   ],   timeLable: "Please select a time",   dateLable: "Please select a date",   cityLable: "Please select a city",   region: ['Henan Province', 'Zhengzhou City', 'Zhongyuan District'],   customItem: "Show All" },  mychange:function(){    console.log(' mychange Changed');  },  mycancel:function(){    console.log(' mycancel Unselected');  },  mychangeResult:function(e){    debugger    console.log(' mychangeResult Click OK');    var index = e.detail.value;    var id = this.data.arrayObject[index].id;    var name = this.data.arrayObject[index].name;    this.setData({      myTitle:id+name    })  },  mychangemulticolumn:function(e){    console.log(e.detail);  },  mychangemulti: function (e) {    var indexs = e.detail.value;    var arraymultObject = this.data.arraymultObject;    for (var i = 0; i < indexs.length; i++) {      var indexTemp = indexs[i];      var id = arraymultObject[i][indexTemp].id;      var name = arraymultObject[i][indexTemp].name;      console.log(id + name);    }  },  changeTime: function (e) {    this.setData({      timeLable: e.detail.value    });  },  changeDate: function (e) {    this.setData({      dateLable: e.detail.value    });  },  changeCity: function (e) {    debugger;    var codes = "";    var names = "";    for(var i = 0; i<e.detail.code.length; i++){        var code = e.detail.code[i];        var name = e.detail.value[i];        codes += code;        names +=name;    }    this.setData({      cityLable: codes+names    });  } })

Use of picker

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html

  • Demonstration use cases
    >Scroll selector for embedded pages.

picker-view.wxml

<view>
  <view>{{year}}year{{month}}month{{day}}day</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px" wx:key="year">{{item}}year</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px"  wx:key="month">{{item}}month</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px"  wx:key="days">{{item}}day</view>
    </picker-view-column>
  </picker-view>
</view>

picker-view.js

const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [9999, 1, 1],
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

radio

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

  • Demonstration use cases
    >Single selector with multiple components inside.It's actually very similar to checkbox.

radio.wxml

<!--pages/radio/radio.wxml-->
<radio-group bindchange="bindbindChangeRadio">
  <radio value="Personal website:idig8.com">Personal website:idig8.com</radio>
  <radio value='Public Number:Too many programming pits' color='red'>Public Number:Too many programming pits</radio>
  <radio value='Short Book:IT People's Story Club' disabled='{{true}}'>Short Book:IT People's Story Club</radio>
</radio-group>

<view>Choose Yes{{checkRadio}}</view>

<view style='margin-top:50rpx'>
  <radio-group>
    <block wx:for="{{array}}">
        <radio  value='{{item.value}}' disabled='{{item.disable}}' color='{{item.color}}' checked='{{item.checked}}'>{{item.name}}</radio>
    </block>
  </radio-group>
</view>

radio.js

// pages/radio/radio.js
Page({

  /**
   * Initial data for page
   */
  data: {
    array: [
      { id: "1001", name: "China", value: "China", checked: true, color: 'red', disable: false },
      { id: "1002", name: "U.S.A", value: "U.S.A", checked: false, color: 'black', disable: false },
      { id: "1003", name: "Russia", value: "Russia", checked: false, color: 'blue', disable: false },
      { id: "1004", name: "Personal home page: idig8.com", value: "idig8.com", checked: false, color: 'yellow', disable: true }
    ],
    checkRadio:"",
  },
  bindbindChangeRadio:function(e){
      var value = e.detail.value;
      this.setData({
        checkRadio:value
      })

  },

  /**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle Function -- Listen for page initial rendering complete
   */
  onReady: function () {

  },

  /**
   * Lifecycle Functions--Monitor Page Display
   */
  onShow: function () {

  },

  /**
   * Lifecycle Functions--Listening Page Hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle Functions--Listen for Page Uninstall
   */
  onUnload: function () {

  },

  /**
   * Page Related Event Handler--Listens for user dropdown actions
   */
  onPullDownRefresh: function () {

  },

  /**
   * Handler for bottom-touch events on pages
   */
  onReachBottom: function () {

  },

  /**
   * Users click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})

slider

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

  • Demonstration use cases
    >Slide the selector.

<!--pages/slider/slider.wxml-->
<slider min="10" max="90" show-value='{{true}}' activeColor='red' backgroundColor='blue' block-color='green' bindchanging='iamchanging'></slider>

<view style='background-color:green;width:100%;height:{{myheight}}'>
//Personal website: idig8.com
//Public number: too many programming pits
</view>


<slider min="10" max="90" show-value='{{true}}' activeColor='red' backgroundColor='blue' block-color='green' bindchange='iamchange'></slider>
// pages/slider/slider.js
Page({

  /**
   * Initial data for page
   */
  data: {
    myheight:"500rpx",
    staticHeight:500

  },

  iamchanging:function(e){
    var value = e.detail.value;
    var newHeight = this.data.staticHeight * (value/100);
    this.setData({
      myheight: newHeight+"rpx"
    })
  },
  iamchange:function(e){
    var value = e.detail.value;
    var newHeight = this.data.staticHeight * (value / 100);
    this.setData({
      myheight: newHeight + "rpx"
    })
  },


  /**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle Function -- Listen for page initial rendering complete
   */
  onReady: function () {

  },

  /**
   * Lifecycle Functions--Monitor Page Display
   */
  onShow: function () {

  },

  /**
   * Lifecycle Functions--Listening Page Hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle Functions--Listen for Page Uninstall
   */
  onUnload: function () {

  },

  /**
   * Page Related Event Handler--Listens for user dropdown actions
   */
  onPullDownRefresh: function () {

  },

  /**
   * Handler for bottom-touch events on pages
   */
  onReachBottom: function () {

  },

  /**
   * Users click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})

switch

  • Official Introduction
    >https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

  • Demonstration use cases
    >Switch selector.

<!--pages/switch/switch.wxml-->
<switch checked='{{true}}' type='checkbox'>This is a switch selector</switch>
<switch checked='{{true}}' color="red" bindchange='changeme'>switch</switch>

<view style='background-color:{{color}};width:100%;height:500rpx'>
//Personal website: idig8.com
//Public number: too many programming pits
</view>
// pages/switch/switch.js
Page({

  /**
   * Initial data for page
   */
  data: {
    color:"white"
  },

  changeme:function(e){
    var flag = e.detail.value;
    if (flag){
      this.setData({
        color: "white"
      })
    }else{
      this.setData({
        color: "black"
      })
    }
  },

  /**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle Function -- Listen for page initial rendering complete
   */
  onReady: function () {

  },

  /**
   * Lifecycle Functions--Monitor Page Display
   */
  onShow: function () {

  },

  /**
   * Lifecycle Functions--Listening Page Hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle Functions--Listen for Page Uninstall
   */
  onUnload: function () {

  },

  /**
   * Page Related Event Handler--Listens for user dropdown actions
   */
  onPullDownRefresh: function () {

  },

  /**
   * Handler for bottom-touch events on pages
   */
  onReachBottom: function () {

  },

  /**
   * Users click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})

Comprehensive example

PS: This is basically the case with applet view, and I ended up with a simple example from myform.There are a few examples, but to be honest, there is no official website detail.It's important to remember that the best way to learn applets is through the official website, and that's how I learn them.


Tags: Mobile Programming github git

Posted on Mon, 05 Aug 2019 10:14:41 -0700 by cbrknight