258资源分享网

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

 

 

 

与外站进行数据传输

<view class="bt-ok" bindtap="okClick">确定提交</view> Page({ //确认提交 okClick: function () { var that = this;//此处必须重定义，才能在回调函数里使用 wx.request({ //发起url请求 url: '', 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 }); }, })