微信小程序的探讨--与外站进行数据传输、前后端交互、页面之间传值 ...


与外站进行数据传输

    <view class="bt-ok" bindtap="okClick">确定提交</view>

Page({
//确认提交
  okClick: function () {

  var that = this;//此处必须重定义,才能在回调函数里使用
      wx.request({   //发起url请求
        url: 'http://wq.ycwjwl.com/json.php',
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        data: {  //传递参数
          x: 'df so handsome',
          y: '2'
        },
        header: {   //请求方式
          'content-type': 'application/x-www-form-urlencoded'   //post must be this
           //'content-type': 'application/json'     //this for get
        },
        success: function (res) {       //访问成功之后的返回值     return  data、statusCode、header 
          console.log(res);
         var r = res.data.x;      //获取json参数里的x的值
          that.setData({   //异步传输数据到前端
            toastHidden: false,
            toastTxt: "提交成功",
            rt: r
          });         
        }
      })
      console.log("log:"+this.data.rt);
     }
  })

前后端交互

Page({
 data: {//页面初始数据
    orderList: [],
    total: 0, //总价格   
  },
 onLoad: function(options) {  //自带的事件   [说明](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html)
    // Do some initialize when page load.
  },
    //自定义函数
 returnClick: function () {
    wx.navigateBack();
  },
})

 <view class="cost">总价:<span>¥{{total}}</span></view>
 <view class="bt-return" bindtap="returnClick">返回修改</view>

<view class="orderlist" wx:for="{{orderList}}" wx:key="item.id">     //遍历一个数组
      <span>{{item.title}}</span><span style="float:right;">¥{{item.cost}} * {{item.num}}</span>
    </view>

页面之间传值

//home
Page({
//提交订单

  sublimitClick: function (e) {


     var agrs = JSON.stringify(this.data.orderList);//将json数组转化为get参数
    wx.navigateTo({
      url: '../order/order?order=' + agrs
    })
  },
})
//order
Page({
// 页面初始化 options为页面跳转所带来的参数
  onLoad: function (options) {

    //object 转 array
    var order = JSON.parse(options.order);  //将get到的json字符串转化为json数组
    var t_order = [];
    var t_total = 0;
    for (var k in order) {
      if (order[k].num > 0) {
        t_order.push(order[k]);
        t_total = t_total + order[k].cost * order[k].num; //计算总价格
      }
    }

    this.setData({  //与前端进行交互
      orderList: t_order,
      total: t_total
    });

  },
  })

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

本文作者2017-9-7 00:55
众观小程序
粉丝0 阅读48 回复0
上一篇:
用蹩脚的逻辑做了个 “弹啊弹,弹走鱼尾纹的小球”发布时间:2017-09-05
下一篇:
微信小程序实战--王者荣耀图鉴发布时间:2017-09-07

精彩阅读

排行榜

小程序互动交流社区
181-2013-0473
周一至周五 9:00-18:00
意见反馈:79354359@qq.com

扫一扫联系我们