微信小程序新手教程表单的创建

　　微信小程序新手教程表单的创建，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

　　数据请求 表单的创建 提交 与接收

　　开始正题了，本节小小研究了下 微信 小程序的表单创建与提交

　　1. 表单页面

　　{{notice_str}}

　　确认提交么?

　　提示

　　清空成功

　　2. js 代码

　　var app = getApp();

　　Page({

　　data:{

　　// text:"这是一个页面"

　　array:["中国","美国","巴西","日本"],

　　toast1Hidden:true,

　　modalHidden: true,

　　modalHidden2: true,

　　notice_str: '',

　　index:0

　　},

　　toast1Change:function(e){

　　this.setData({toast1Hidden:true});

　　},

　　//弹出确认框

　　modalTap: function(e) {

　　this.setData({

　　modalHidden: false

　　})

　　},

　　confirm_one: function(e) {

　　console.log(e);

　　this.setData({

　　modalHidden: true,

　　toast1Hidden:false,

　　notice_str: '提交成功'

　　});

　　},

　　cancel_one: function(e) {

　　console.log(e);

　　this.setData({

　　modalHidden: true,

　　toast1Hidden:false,

　　notice_str: '取消成功'

　　});

　　},

　　//弹出提示框

　　modalTap2: function(e) {

　　this.setData({

　　modalHidden2: false

　　})

　　},

　　modalChange2: function(e) {

　　this.setData({

　　modalHidden2: true

　　})

　　},

　　bindPickerChange: function(e) {

　　console.log('picker发送选择改变，携带值为', e.detail.value)

　　this.setData({

　　index: e.detail.value

　　})

　　},

　　onLoad:function(options){

　　// 页面初始化 options为页面跳转所带来的参数

　　},

　　onReady:function(){

　　// 页面渲染完成

　　},

　　onShow:function(){

　　// 页面显示

　　},

　　onHide:function(){

　　// 页面隐藏

　　},

　　onUnload:function(){

　　// 页面关闭

　　},

　　formSubmit: function(e) {

　　var that = this;

　　var formData = e.detail.value;

　　wx.request({

　　url: 'http://test.com:8080/test/socket.php?msg=2',

　　data: formData,

　　header: {

　　'Content-Type': 'application/json'

　　},

　　success: function(res) {

　　console.log(res.data)

　　that.modalTap();

　　}

　　})

　　},

　　formReset: function() {

　　console.log('form发生了reset事件');

　　this.modalTap2();

　　}

　　})

　　3. 部分样式

　　#adduser{

　　background: #f5f5f5;

　　}

　　.section__title{

　　float: left;

　　width:30%;

　　}

　　.form-group{

　　float: right;

　　width: 70%;

　　}

　　.section{

　　clear: both;

　　width:90%;

　　margin: 2rem auto;

　　}

　　.input-text{

　　border: 1px solid #ddd;

　　}

　　.button{

　　border: 1px solid #1aad19;

　　border-radius: 2px;

　　}

　　.picker{

　　padding: 13px;

　　background-color: #FFFFFF;

　　}

　　4. 服务器端

　　<!－－?php

　　var_dump($_REQUEST);

　　本节 集合了

　　表单 https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html?t=1476197486816

　　数据请求 https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html?t=1476197484427

　　提示框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/toast.html?t=1476197486420

　　确认和非确认框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278