微信小程序随堂笔记4

问卷调查

时间：2020.9.19

学习目标
做响应式问卷调查，将浏览器上的信息在小程序上显示，通过提交按钮将修改的信息在控制器中显示。

---

nodejs配置

1.安装node.js
下载|node.js

2.安装git

3.打开git-bash，用命令node -v查看是否安装成功

4.安装cnpm
在git-bash中运行 npm install -g cnpm --registry=https://registry.npm.taobao.org

5.手工安装express (非必要执行)
在当前项目目录下git-bash中运行 cnpm i express -generator

6.运行node.js
在当前项目目录下git-bash中运行node index.js

7.浏览器中127.0.0.1 查看json数据是否显示

---

代码展示
index.wxml代码

<!--pages/index/index.wxml-->
<view class="container">
  <form bindsubmit="submit">
    <view>
      <text>姓名：</text>
      <input name="name" value="{{name}}"/>
    </view>
    <view>
      <text>性别：</text>
      <radio-group name="gender">
        <label wx:for="{{gender}}" wx:key="value">
          <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}</label>
      </radio-group>
    </view>
    <view>
      <text>专业技能：</text>
      <checkbox-group name="skills">
     <label wx:for="{{skills}}" wx:key="value">
       <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
     </label>
   </checkbox-group>
    </view>
    <view>
      <text>你的意见：</text>
     <textarea name="opinion" value="{{opinion}}"></textarea>
    </view>
    <button form-type="submit">提交</button>
  </form>
</view>

样式index.wxss代码

/* pages/index/index.wxss */
.container{
  margin: 50rpx;
}
view{
  margin-bottom: 30rpx;
}
text{
  font-weight: bold;
}
label{
  display: block;  /* 标签占满一行 */
  margin: 10rpx;
}
textarea{
  width: 600rpx;
  height: 100rpx;
  margin-top: 10rpx;
  border: 2rpx solid #eee;
}
input{
  margin-top: 10rpx;
  border: 2rpx solid #eee;
}
button{
  background: green;
  color: white;
}

index.js代码

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:'',
    options:'无意见',
    skills:[{
      name:'HTML5',
      value:'html5',
      checked:false
    },
    {
      name:'CSS3',
      value:'css3',
      checked:false
    },
    {
      name:'Javascript',
      value:'js',
      checked:false
    },
    {
      name:'.Net MVC',
      value:'mvc',
      checked:false
    },
    {
      name:'Vue.Js',
      value:'vue',
      checked:false
    },
    {
      name:'微信小程序',
      value:'weixin',
      checked:false
    },
  ]
  },
  onLoad: function (){
    //加载服务器存储的数据，查询127.0.0.1服务器的数据，并在控件上呈现
    wx.request({
      url: 'http://127.0.0.1:3000/',
      success: result=>{
        console.log(result)
        this.setData(result.data) 
      }
    })
  },
  submit:function(e){
    //把表单的数据提交到服务器
    wx.request({
      method:'post',
      url:'http://127.0.0.1:3000',
      //参数
      data:e.detail.value,
      success:function(result){
        console.log(result)
        //其他操作
      }
    })
  }
})

修改信息后在控制台查看

---