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

矫情吗；* 2022-03-29 16:56 774阅读 0赞

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

--------------------

**demo里wxss的使用**  
目前我使用的只有两个，一个是微信公众平台提供的demo里的wxss，demo下载地址：[https://developers.weixin.qq.com/miniprogram/dev/demo.html；][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][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项目方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neWlrdWFuZ2dl_size_16_color_FFFFFF_t_70]  
点击“+”号添加项目，选择好demo目录（一般是在包含app.\*\*的目录下），必须时可以把APPID改成自己的。若已经进行了其他的项目的情况下想添加demo项目，则要依次点击“微信开发者工具”标题栏“项目”——“查看所有项目”，后面操作如上述。

--------------------

**小程序表单功能简单实现**  
wxml代码直接从demo中复制，快速找到目标代码：  
先在模拟器上找到页面位置，然后点击下面的“打开”  
![在这里插入图片描述][20190109093516890.png]  
如果打开页面，发现页面只能打开一种里的一个且页面的名字是灰色的，则按Ctrl+S保存下即可

<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中的表单里的所有项显示，在提交表单后让这个变量为空，但是这个方法无法使单选或多选重置，有待商榷

[https_developers.weixin.qq.com_miniprogram_dev_demo.html]: https://developers.weixin.qq.com/miniprogram/dev/demo.html%EF%BC%9B
[https_github.com_weui_weui-wxss_hmsr_toutiao.io_utm_medium_toutiao.io_utm_source_toutiao.io]: https://github.com/weui/weui-wxss/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neWlrdWFuZ2dl_size_16_color_FFFFFF_t_70]: /images/20220329/d997b85961eb4a8faa825f93cb90ee1c.png
[20190109093516890.png]: /images/20220329/9c182bab383240af9c711274912b6c29.png