小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。这是关于form组件、本地存储和页面的跳转和回退的小程序之旅。

微信小程序

介绍下 form组件、本地存储和页面的跳转和回退

表单组件和数据存储功能

新建一个登录页面，表单里面包括姓名、密码、按钮。点击按钮需保存数据。可以了解到表单组件和数据存储功能

在pages下新增一个login文件夹。

操作步骤为：pages文件夹右键->新建->目录，

然后新建三个基本文件,在入口app.json的pages数组中，添加上新加的页面路径。

配置代码：

微信小程序

<!--login.wxml-->
<form bindsubmit="formSubmit">
  <view class="container">

    <input name="userName" type="text" class="myinput" placeholder="请输入用户名" value="{{userName}}"/>

    <input name="userPass" type="text" class="myinput" password placeholder="请输入密码" value="{{userPass}}"/>

    <button formType="submit">标记我</button>
 </view>
</form>

//login.js
Page({
  data: {
    userName: '',//用户名
    userPass: '',//密码
  },
  //表单提交函数，每个input需要有name，否则获取不到值。
  formSubmit: function (e) {
    console.log(e.detail.value);//返回格式：Object {userName: "hello", userPass: "123"}
    var obj = e.detail.value;
    if (obj.userName && obj.userPass) {
      //本地存储用户名和密码
      wx.setStorageSync('userName', obj.userName);
      wx.setStorageSync('userPass', obj.userPass);
    }
  },
  //加载事件，如果判断有缓存信息，就读取并显示在input里。
  onLoad: function () {
    var name = wx.getStorageSync('userName');
    var password = wx.getStorageSync('userPass');
    if (name) {
      this.setData({ userName: name });
    }
    if (password) {
      this.setData({ userPass: password });
    }
  }
})

.myinput{
  border:1px solid cyan;
  border-radius: 40px;
  margin-bottom: 10px;
}

可以在首页创建一个按钮，然后利用wx.navigateTo组件跳转一下即可，直接看一下效果：
微信小程序

小程序的表单，默认是异步提交的。它在form上全局绑定一个事件，然后根据name去寻找表单元素的值。所以每个input输入框一定要跟上name，否则找不到。这里只是input，至于其他的表单元素可以再去看看。
还有就是有关数据存储，要用小程序提供的api：

wx.setStorage(OBJ)：异步存储内容。
wx.setStorageSync(key,data)：同步存储内容。data可以是string或object。
wx.getStorage(OBJ)：异步获取内容。
wx.getStorageSync(key)：同步获取内容。

一般来说，同步存储的比较常用，因为不涉及到回调，比较简单。
而异步存储的话，要注意其OBJ参数的书写格式，它包括：

key，data，success回调函数，fail回调函数等参数的对象

小程序的本地数据存储也有大小限制：不能超过10MB

异步存储登录页的用户名和密码

在异步存储登录页的用户名和密码之后存储成功，返回到上一个页面，这里有异步存储和内容获取。

//login.js
Page({
  data: {
    userName: null,
    userPass: null
  },
  //表单提交函数，每个input需要有name，否则获取不到值。
  formSubmit: function (e) {
    console.log(e.detail.value);//返回格式：Object {userName: "hello", userPass: "123"}
    var obj = e.detail.value;
    if (obj.userName && obj.userPass) {
      //异步存储
      wx.setStorage({
        key: 'userInfo',
        data: obj,
        success: function (res) {
          // success
          wx.navigateBack({
            delta: 1, // 回退前 delta(默认为1) 页面
          });
        },
        fail: function () {
          // fail
          console.log('error');
        },
        complete: function () {
          // complete
          console.log('complete');
        }
      })

    }

  },

  //加载事件，如果判断有缓存信息，就读取并显示在input里。
  onLoad: function () {
    var that = this;
    wx.getStorage({
      key: 'userInfo',
      success: function (res) {
        // success
        that.setData({ userName: res.data.userName });
        that.setData({ userPass: res.data.userPass });
      },
      fail: function () {
        // fail
        console.log('error');
      },
      complete: function () {
        // complete
        console.log('complete');
      }
    })

  }
})

微信小程序

还有就是对于存储的数据要怎么销毁呢？小程序同样提供了api：

wx.removeStorage(OBJ)：异步移除某条数据。
wx.removeStorageSync(key)：同步移除某条数据。
wx.clearStorage()：异步清除所有数据。
wx.clearStorageSync()：同步清除所有数据。

在之前的页面里加入一个清除本地缓存数据的一个按钮

index.js:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //页面跳转事件处理函数
  bindViewLogin: function () {
    wx.navigateTo({
      url: '../login/login'
    })
  },
  clearData: function () {
    //清除所有数据
    wx.clearStorageSync();
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

微信小程序

总结

以上就是表单和本地数据存储的一些练习。