微信小程序实习day04

form表单标签

小程序input必须加/在末尾

<!-- <input type="text" placeholder="这是一个可以自动聚焦的input" auto-focus /> -->
<!-- 进入时，手机自动定位到上面的input进行输入，上面的要过期了 -->
<input type="text" placeholder="这是一个可以自动聚焦的input" focus="{{focus}}" />

<button bindtap="bindButtonTap">使输入框获取焦点</button>

<input type="text" maxlength="10" placeholder="最大输入长度10" />
<view>
  输入的内容：{{inputValue}}
</view>
<view>
  <input type="text" placeholder="同步到view中" bindinput="bindInput" />
</view>

<view>
  <input type="number" placeholder="数字" />
</view>
<view>
  <input type="digit" placeholder="带小数点的数字键盘" />
</view>
<view>
  <input type="idcard" placeholder="身份证输入键盘 占位符字体样式" placeholder-style="color:red" />
</view>
<view>
    <checkbox-group bindchange="checkboxChange"><!-- 复选框 -->
      <label class="checkbox" wx:for="{{items}}" wx:key="key">
        <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
      </label>
    </checkbox-group>
</view>
<view>
  <radio-group bindchange="radiochange">
    <label wx:for="{{items}}" wx:key="key">
      <radio value="{{item.value}}">{{item.name}}</radio>
    </label>
  </radio-group>
</view>

  data: {
    items: [
      {name:"江苏",value:"js",checked:"true"},
      {name:"安徽",value:"ah"},
      {name:"山东",value:"sd"}
    ]
  },

  bindButtonTap: function () {
    this.setData({
      focus: true
    })
  },

  bindInput: function(e) {
    this.setData({
      inputValue:e.detail.value
    })
  },

  checkboxChange(e) {
    console.log(e.detail.value)
  },

  radiochange: function(e) {
    console.log(e.detail.value)
  },

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
省市区选择器，日期选择器等

性别选择

    sex:['男','女','未知'],
    sexindex:0

	  bindPickerChange: function(e) {
    	this.setData({
      	sexindex:e.detail.value
    	})
  	},

<view>
  <picker bindchange="bindPickerChange" value="{{sexindex}}" range="{{sex}}" name="sex">
    {{sex[sexindex]}}
  </picker>
</view>

---

---

---

大表单

<form bindsubmit="formsubmit">
  <view>
    <view class="fromView">
      <text>用户名：</text>
      <input type="text" name="username" class="formBorder" />
    </view>
    <view class="fromView">
      <text>密码：</text>
      <input type="password" name="pwd" class="formBorder" />
    </view>
    <view class="fromView">
      <text>性别：</text>
      <picker bindchange="bindPickerChange" value="{{sexindex}}" range="{{sex}}" name="sex">
        {{sex[sexindex]}}
      </picker>
    </view>
    <view class="formView">
      <view class="section__title">省市区选择器</view>
      <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" name="region">
        <view class="picker">
          当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
        </view>
      </picker>
    </view>
    <button form-type="submit">submit</button>
  </view>
</form>

  data: {
    sex: ['男', '女', '未知'],
    sexindex: 0,

    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },

  bindPickerChange: function (e) {
    this.setData({
      sexindex: e.detail.value
    })
  },

  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  
  formsubmit: function (e) {
    var username = e.detail.value.username;
    var pwd = e.detail.value.pwd;
    var sex = e.detail.value.sex;
    var region = e.detail.value.region;
    console.log(username);
    console.log(pwd);
    console.log(sex);
    console.log(region);
  },

  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },

授权登录

<view class="contain">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <block wx:if="{{canIUseGetUserProfile}}">
        <view class="content">
          <view>申请获取一下权限</view>
          <text>获取你的公开信息（昵称，头像等）</text>
        </view>
        <button bindtap="getUserProfile">授权登录</button>
      </block>
      <block wx:else>
        <button open-type="getUserInfo" bindtap="getUserProfile">授权登录</button>
      </block>
    </block>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}"></image>
    </block>
  </view>
</view>

// pages/login/login.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false
  },

  getUserProfile: function (e) {
    wx.getUserProfile({
      /* 生成默认授权对话框 */
      desc: 'qwert',
      success: (res) => {
        /* res内是用户各种信息 国籍头像语言昵称等 */
        this.setData({
          hasUserInfo: true,
          userInfo: res.userInfo
        })
        wx.setStorageSync('userInfo', res.userInfo)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (wx.getUserProfile) {
      /* 进入的是用户 */
      this.setData({
        canIUseGetUserProfile: true /* 变量赋值 */
      })
      var userInfo = wx.getStorageSync('userInfo');
      if (userInfo != null && userInfo != "") {
        this.setData({
          hasUserInfo: true,
          userInfo: userInfo
        })
      }
    }
  },