小程序学习总结——官方demo的用法及表单的简单使用

近几天一直在研究小程序的开发，觉得小程序开发最大的特点就是快。比如切换页的功能，在安卓里需要创建多个类，较多代码才能实现，而在小程序中只有短短几行代码

---

demo里wxss的使用
目前我使用的只有两个，一个是微信公众平台提供的demo里的wxss，demo下载地址：https://developers.weixin.qq.com/miniprogram/dev/demo.html； 另一个是weui，下载地址：https://github.com/weui/weui-wxss/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io 。两个可以相辅相成，主要是用第一个，但是操作反馈、数据展示等功能是参考的第二个。
一、第一种的使用方法：把demo里的app.wxss复制到自己的项目中即可
二、第二种的使用方法：把demo里的style文件夹复制到自己的项目中，然后在app.wxss中导入style文件夹中的weui.wxss。@import 'style/weui.wxss';注意路径要对应好
另外插个题外话，导入外部demo项目方法如下：

点击“+”号添加项目，选择好demo目录（一般是在包含app.**的目录下），必须时可以把APPID改成自己的。若已经进行了其他的项目的情况下想添加demo项目，则要依次点击“微信开发者工具”标题栏“项目”——“查看所有项目”，后面操作如上述。

---

小程序表单功能简单实现
wxml代码直接从demo中复制，快速找到目标代码：
先在模拟器上找到页面位置，然后点击下面的“打开”

如果打开页面，发现页面只能打开一种里的一个且页面的名字是灰色的，则按Ctrl+S保存下即可

<!-- wxml代码，有删减 -->
<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="formReset">
      <view class="page-section page-section-gap">
        <view class="page-section-title">switch</view>
        <switch name="switch" />
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">radio</view>
        <radio-group name="radio">
          <label>
            <radio value="radio1" />选项一</label>
          <label>
            <radio value="radio2" />选项二</label>
        </radio-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">checkbox</view>
        <checkbox-group name="checkbox">
          <label>
            <checkbox value="checkbox1" />选项一</label>
          <label>
            <checkbox value="checkbox2" />选项二</label>
        </checkbox-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">slider</view>
        <slider value="50" name="slider" show-value></slider>
      </view>

      <view class="page-section">
        <view class="page-section-title">input</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="input" placeholder="这是一个输入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button type="primary" formType="submit">Submit</button>
        <button formType="reset">Reset</button>
      </view>
    </form>
  </view>
</view>

---

js代码：

data: {
    form: ''
  },
  formSubmit: function(e) {
    this.setData({
      form: e.detail.value
    })
    console.log(this.data.form)

    for (var index in this.data.form) {
      console.log("key:" + index + ",value:" + this.data.form[index])
      //显示所有数据，与wxml中的name对应
    }
  }

---

表单在使用的时候遇到过一个问题就是表单重置问题，如果是wxml中，则很简单，一个按钮即可实现；如果是在js中，比如提交表单后重置表单，方法之一是在js中的data设置一个变量，让其在wxml中的表单里的所有项显示，在提交表单后让这个变量为空，但是这个方法无法使单选或多选重置，有待商榷