微信小程序实战之picker值表单提交、全局变量、跨页面传值

一、带有picker的表单提交

1、只要给一个Name值即可

代码如下：

 <view class="inputview">
    <text class="input-text">起始日期</text>
     <picker mode="date" value="{{date}}" start="2018-01-01" end="2019-01-01" bindchange="bindDateChange" name="dateStart">
    <view class="picker">{{date}} </view>
    </picker>
  </view>
   <view class="inputview">
    <text class="input-text">终止日期</text>
     <picker mode="date" value="{{date1}}" start="2018-01-01" end="2019-01-01" bindchange="bindDateChange1" name="dateEnd">
    <view class="picker">{{date1}} </view>
    </picker>
  </view>

给一个value值和一个name值即可

运行结果如下：

{className: "23ng", tweek: "周一", time: "8:30-10:00", dateStart: "2018-01-01", dateEnd: "2018-06-01", …}

2、一个页面需要两个日期选择器，则给日期ban绑定的值{{date}}和ban绑定的shi'事件不同即可，都可以提交给后台。

二、全局变量的使用

1、在app.js中，写入

 App({
    classArray: ["选择课程", "现代控制理论", "专业英语", "自然辩证法", "线性系统"]
...})

在页面message中调用此全局数组变量

var app = getApp();
Page({
  data: {
    classIndex: "0",
    classArray: app.classArray
  }
...})

2、 问题：如果在其他页面修改了全局变量，那么在调用这个全局变量的时候，值会不会随之改变

测试：在create页面修改了全局变量，这里在ch创建课堂时改变了全局bi变量，用到了向数组中添加元素的知识

 var className = e.detail.value.className;
    this.data.classArray.push(className);

在本页面输出classArray，新添加进去的课程已经存在，但是去message页面查看，课程没有随之改变。

另一种思路可以实现

   var className = e.detail.value.className;
    app.classArray.push(className);

这样修改的就是全局变量，其他页面使用时，新添加的课程也可以看见。

三、跨页面传值

需求：从课程点进去时候，需要携带课程吗课程名进入课程进度，并显示

1、采用url携带参数进行传值

 onPostTap:function(event){
    var postId=event.currentTarget.dataset.postid;
    console.log("id="+postId);
    var className = event.currentTarget.dataset.classname;
    console.log(className);
     wx.navigateTo({
       url: 'class-item/class-item?detail=' + className,
    })
  },

在点击课程时，取得需要xie携带的参数 ，注意，post id和classname均为小写，在html文件中，属性以data开头

<block wx:for="{{posts_now}}" wx:for-item="item">
  <view catchtap='onPostTap'data-className="{{item.className}}" data-postId="{{item.post_id}}">
    <template is="classTemplate" data="{{...item}}"></template>
  </view>
</block>

在需要显示携带参数的页面接收参数方法如下：

  onLoad: function (options) {
    this.setData({
       className: options.detail
    })
    console.log(options.detail)
  },

2、使用全局变量来进行传递

习惯上使用data-XXX这一方法标识来传值，然后通过var index = e.target.dataset.XXX来取到值

依据上面的方式设置要传递的值，页面跳转后，我们就需要在下一个页面拿到传递的数据

在本页面js中写入如下代码

var app = getApp()
postToNext: function (e) {
    var index = e.target.dataset.index;
    var app = getApp();
    //设置全局的请求访问传递的参数 
    app.requestId = e.currentTarget.id;
    app.requestIndex = index;
  }

跳转后的页面用如下方法接收参数

onLoad: function (e) {
    var classid = getApp().requestId;
    var classIndex = getApp().requestIndex;
}

四、request实例

 

• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化

五、如何使用setData修改data中子对象的属性值

 data: {
    report: {
      className: "",
      week: "8",
      weekEnd: "18",
      count0: 8,
      count1: 0,
      count2: 2
    },
    navbar: ['进度', "成员", "文件"],
    currentTab: 0
  },
onLoad: function (options) {
    this.setData({
      papers_key: this.data.classpaper,
      groups_key: this.data.group,
      report_key: this.data.report
    });

   var str = 'report_key.className';
   this.setData({
     [str]: options.detail
    })
   console.log(options.detail)
  },

 使用时要把那个变量用中括号（[]）括起来