#3 #22 第4次实验代码

1514080901213/app.json

@@ -5,7 +5,8 @@
     "pages/one/one",
     "pages/two/two",
     "pages/three/three",
-    "pages/scroll/scroll"
+    "pages/scroll/scroll",
+    "pages/form/form"
   ],
   "window":{
     "backgroundTextStyle":"light",

1514080901213/pages/form/form.js

@@ -0,0 +1,169 @@
+// pages/form/form.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    text: 'hello',
+    area: 'world',
+    count: 'world'.length
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var that = this;
+    wx.getStorage({
+      key: 'input',
+      success: function (res) {
+        console.log(res.data.area.length)
+
+        that.setData({
+          text: res.data.text,
+          area: res.data.area,
+          count: res.data.area.length
+        })
+      }
+    })
+    // 从服务器取回来 JSON
+    wx.request({
+      url: 'https://infoaas.com/data/hzc.json',
+      //仅为示例，并非真实的接口地址
+      data: {},
+      header: {
+        'content-type': 'application/json' // 默认值
+      },
+      success: function (res) {
+        console.log(res.data)
+        /*
+        that.setData({
+          hasError: true,
+          errorText: res.data.name + ',' + res.data.teacher + ' ' + res.data.year
+        })*/
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  onSubmit: function (event) {
+    console.dir(event)
+    var that = this //this表示当前对象，复制给临时变量that
+
+    var text = event.detail.value.text  //这个value.text表示form表单中的所有文本类型的数据
+
+    //不知为何一定要保存，这9行代价，与下面的ontextchange和onchange部分代码相似
+    if (!text) {  //当text为空时，执行
+      console.dir(text) //打印文件text
+      that.setData({
+        hasError: true, //当前文字为空，允许error，errorText表示出错显示的文字
+        errorText: '文字不能为空！'
+      })
+    } else {
+      that.setData({
+        hasError: false //不允许error
+      })
+
+      //这API是用来存储数据的
+      wx.setStorage({
+        key: "input",   //本地缓存中指定的key（key暂时是随意数值）
+        data: event.detail.value, //需要存储的内容，
+        //wx.showToast API是显示消息提示框
+        //如果保持成功后会显示“成功”的字体，并用成功的符号(success)的探出
+        success: function (res) {
+          wx.showToast({
+            title: '恭喜发财',  //title:提示的内容
+            icon: 'success',   //icon:图标，只能使用'success'(成功）,'loading'(等待)
+            duration: 1500    //duration:提示的延时时间
+          })
+
+        }
+      })
+    }
+  },
+
+  onTextChange: function (e) {
+    var that = this;
+    console.dir(e)
+    var text = e.detail.value
+    console.dir(text);
+    if (!text) {
+      that.setData({
+        hasError1: true,
+        errorText1: '文字不能为空！'
+      })
+    } else {
+      that.setData({
+        hasError1: false
+      })
+    }
+  },
+
+  onChange: function (e) {
+    var that = this;
+    var value = e.detail.value;
+    console.dir(value)
+    if (!value) {
+      that.setData({
+        hasError2: true,
+        errorText2: '文字不能为空！'
+      })
+    } else {
+      that.setData({
+        hasError2: false
+      })
+    }
+    that.setData({
+      count: value.length
+    })
+  }
+})

1514080901213/pages/form/form.json

@@ -0,0 +1 @@
+{}

1514080901213/pages/form/form.wxml

@@ -0,0 +1,41 @@
+<!--pages/form/form.wxml-->
+<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
+    <view class="page__hd">
+        <view class="page__title">Input</view>
+        <view class="page__desc">表单输入</view>
+    </view>
+    <view class="page__bd">
+      <form bindsubmit='onSubmit'>
+        <!--wx:if="{{hasError}}"表示如果hasEE-->
+        <view class="weui-toptips weui-toptips_warn" 
+        wx:if="{{hasError1}}">{{errorText1}}</view>
+
+        <view class="weui-cells__title">文本框</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_input">
+                <view class="weui-cell__bd">
+                    <input class="weui-input" name="text" 
+                    value='{{text}}' placeholder="请输入文本" bindinput='onTextChange'/>
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-toptips weui-toptips_warn" 
+        wx:if="{{hasError2}}">{{errorText2}}</view>
+        <view class="weui-cells__title">文本域</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell">
+                <view class="weui-cell__bd">
+                    <!--maxlength:表示文本域最大输入个数-->
+                    <textarea class="weui-textarea" name="area" placeholder="请输入文本" style="height: 8.3em" value='{{area}}' maxlength='200' bindinput='onChange'/>
+                    <view class="weui-textarea-counter">{{count}}/200</view>
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-btn-area">
+            <button class="weui-btn" type="primary" form-type='submit'>确定</button>
+        </view>
+      </form>
+    </view>
+</view>

1514080901213/pages/form/form.wxss

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

1514080901213/pages/index/index.js

@@ -71,6 +71,11 @@ Page({
       url: '../three/three',
     })
   },
+  jump_form: function () {
+    wx.navigateTo({
+      url: '../form/form',
+    })
+  },
   /**
  * 用户点击右上角分享
  */

1514080901213/pages/index/index.wxml

@@ -26,6 +26,7 @@
     <button class="chuangjian" type="primary" bindtap="jump_two" style="margin-top: 15px">寻找约会方案</button>
     <button class="chuangjian" type="primary" bindtap="jump_three" style="margin-top: 15px">测试内容</button>
     <button class="chuangjian" type="primary" bindtap="jump_scroll" style="margin-top: 15px">实验内容</button>
+    <button class="chuangjian" type="primary" bindtap="jump_form" style="margin-top: 15px">form</button>
   </view>
 
 

1514080901213/pages/three/three.js

@@ -1,57 +1,14 @@
 Page({
-  data: {
-    history: [{
-      thems: "白天",
-      comment: "黑夜"
-    },
-    {
-      thems: "春天",
-      comment: "夏天"
-    },
-    {
-      thems: "秋天",
-      comment: "冬天"
-    },
-    {
-      thems: "明天",
-      comment: "后天"
-    },
-    {
-      thems: "恭喜",
-      comment: "发财"
-    },
-    {
-      thems: "泰迪",
-      comment: "熊"
-    },
-    {
-      thems: "万事",
-      comment: "如意"
-    },
-    {
-      thems: "好好",
-      comment: "对对"
-    }]
+  data:{
+    shuju:["456","789"]
   },
-  reg: function (e) {
-    console.log(e.detail.value);
-    var value = e.detail.value
-    value.thems = e.detail.value.thems
-    value.comment = e.detail.value.comment
-  },
-  more: function (e) {
-    console.log(e);
-    var newGuy = {
-      thems: value.thems,
-      comment: value.comment
-    }
-    if (this.data.history.length <= 20) {
-      this.data.history.push(value)
-      this.setData({
-        history: this.data.history
-      })
-    } else {
-      console.log("待定")
-    }
+  mobaigongju:function(e){
+    var erbai
+    erbai = e.detail.value
+    this.data.shuju = erbai.concat(this.data.shuju)
+    this.setData({
+      shuju: this.data.shuju
+    })
+
   }
 })

1514080901213/pages/three/three.wxml

@@ -0,0 +1,4 @@
+<view>
+  <input name="mobai" placeholder="" bindblur="mobaigongju" />
+  {{shuju}}
+</view>