小程序开发：从前端wxml页面数据获取，到JS页面数据对象字符化，传递给Python后台的整体流程

页面：

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 
事件对象可以携带额外信息，如 id, dataset,。

可以在微信页面使用列表来动态展示数据，然后将动作绑定在列表的每一个元素上面，同时给JS传递相应的data或者dataset,使用语法如下：

<view class='page'>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view wx:for="{{name_array}}" wx:key="item">
     <!-- 只读数据 -->
    <view wx:if="{{item.field_attribute == 1}}">
      <view wx:if="{{item.field_type_id == 35 || item.field_type_id == 45}}">
           <view wx:if="{{parseInt(item.field_value)!=item.field_value}}">
                 <view class='item'>
                 {{item.field_name}}
                 <view class='text'>{{item.field_choice[item.field_value]}}</view>  
                 </view>
                 <view class="divider"></view>
           </view>
      </view>
    </view>
   <!-- 必填数据 -->
   <view wx:elif="{{item.field_attribute == 2}}">
      <view wx:if="{{item.field_type_id == 30}}">
          <view class="timeitem">   
          {{item.field_name}}
          <pickerYMDHM class='timechanger' id = "{{index}}"  data-key="{{item.field_key}}" placeholder = "{{hopetimeplaceholder}}" date = "{{date}}" disabled = "{{disabled}}" bind:onPickerChange="inputtimedata" startDate="{{startDate}}" endDate="{{endDate}}">
          </pickerYMDHM>
          </view>
          <view class="divider"></view>
      </view>   
      <view wx:else>
        <view class='item'>
         {{item.field_name}}
         <image class='requiredimage' src="{{requireurl}}"></image>
         <input type='text' bindinput="inputdata" class='text' data-key="{{item.field_key}}" id = "{{index}}"></input>     
        </view>
        <view class="divider"></view>
      </view>
    </view> 

    <!-- 提交按钮 -->
    <view class='buttonitem' decode="{{true}}">
    <view wx:for="{{choice_arr}}" wx:key="item">
    <view wx:if="{{item.transition_name=='驳回'}}">
    <button type="warn" bindtap="submit_action" id="{{item.transition_id}}">{{item.transition_name}}</button>
    </view>
   
    <view wx:elif="{{item.transition_name=='同意'}}">
    <button type="primary" bindtap="submit_action" id="{{item.transition_id}}">{{item.transition_name}}</button>
    </view>

    <view wx:elif="{{item.transition_name=='转开发'}}">
    <button type="primary" bindtap="submit_action" id="{{item.transition_id}}">{{item.transition_name}}</button>
    </view>
  
    <view wx:else="{{item.transition_name=='实施'}}">
    <button type="primary" bindtap="submit_action" id="{{item.transition_id}}">{{item.transition_name}}</button>
    </view>
  </form>
</view>

文中的语法<view wx:for="{{name_array}}" wx:key="item">是for循环，item是每次循环的元素，item.field_attribute和item.field_type_id都是这个对象的一个属性元素，在每个元素当中，还可以绑定相应的传递给js函数的数据，如果是单个数据，比如每个对象自带的id = "{{index}}"属性，以及传递给js函数的一个dataset，语法是data-key="{{item.field_key}}"。

这样js文件就已经可以拿到相应的数据，还要实现相应的js函数：

例如其中的bindinput="inputdata"这个inputdata这个js函数：

inputdata: function (e) {
    var that = this	
    var index =  e.currentTarget.id;
    console.log(e)
    var key = e.currentTarget.dataset.key;
    var data = e.detail.value;

    var item_data = 'data_array[' + index + ']' //这里使array的下标可以动态改变
    var item_key = 'key_array[' + index + ']' //这里使array的下标可以动态改变
    that.setData({
      [item_data]: data, //注意：这里item必须要加[]，至于为什么我也不明白
      [item_key]: key,
      //data_array[index] : data,
    })
  },

这个函数实现的是将收集到的数据动态赋值给两个数组：data_array和key_array，对于一个前端页面传递给js函数的整体对象e,对于单个的数据id，要使用e.currentTarget.id来获取，对于一个数据集合里面的数据，要使用e.currentTarget.dataset.key来进行获取，对于时间获取到的数据，要使用e.detail.value来拿到。总之，要打印出console.log(e)来查看对象的结果来查找所需要的元素。

 

将获取到的数据传递给相应的后台url接口，例如提交按钮当中的submit_action: function (event)：

  //将id上传
  submit_action: function (event) {
    var app = getApp();
    var that = this;
    console.log(event.currentTarget.id);
    var id = event.currentTarget.id;
    console.log("收集到的数据");
    console.log(that.data.data_array);
    console.log(that.data.key_array);
    for (var i = 0; i < that.data.data_array.length; i++)
    {
      if ((typeof (that.data.data_array[i]) != "undefined") && (typeof (that.data.key_array[i]) != "undefined"))
      {
        that.data.dic_array[that.data.key_array[i]] = that.data.data_array[i]; 
      } 

    }
    console.log(that.data.dic_array);
    if (that.data.opinion) {
      wx.request({
        url: 'http://www.ydyw.com:8008/operationChange/ticketagree/',
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: {
          operationChange_username: app.globalData.global_username,
          operationChange_ticket_id: app.globalData.ticket_id,
          operationChange_transition_id: id,

          operationChange_dic: JSON.stringify(that.data.dic_array),
          //operationChange_dic: JSON.parse(that.data.dic_array),
          operationChange_opinion: that.data.opinion,
        },
        success: function (res) {
          console.log(res)
          if (res.statusCode == 200) {
            wx.showToast({
              title: '提交成功啦',
              icon: 'success',
              duration: 2000,
              success: function () {
                setTimeout(function () {
                  wx.reLaunch({
                    url: '../../../index/index'
                  })
                }, 800)
              }
            })
          }
        }
      })
    }
  }, 

这里面主要注意的是json数据格式：

JSON 的常规用途是同 web 服务器进行数据交换。

（1）在向 web 服务器发送数据时，数据必须是字符串。通过 JSON.stringify() 把 JavaScript 对象转换为字符串。

例如：

var obj = { name:"Bill Gates", age:62, city:"Seattle"};
var myJSON =  JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

（2）从后台服务器接收到的数据通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

同样，在后台接收到的数据也是字符串，要进行解析变成数据对象，发送给前端的数据也要将数据对象变成字符串来进行发送。