从php获取json数据
1 . 将数组转化为json数据
<?php
$x=$_POST['x'];//获取post数据
//写文件
$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
$txt = $_POST['x'];
fwrite($myfile, $txt);
fclose($myfile);
$v=array("x"=>$x , "m"=>"280");
$json=json_encode($v);
header("content-type:application/json");
echo $json;
?>
2 . 直接输出json数据
<?php
header("content-type:application/json");// 尽量不要用text/json 某些浏览器会不兼容
$json='{"name":"\u5F20\u4E09","addtime":"2014-01-01","username":"abc","tngou":[{"id":"1","img":"123"},{"id":"2","img":"12344444444444"}]}';//在json里传递json数组
echo $json;
?>
与外站进行数据传输
<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
});
},
})
从外部文件获取json数据
Page({
data: {
scrollH: 0,
imgWidth: 0,
loadingCount: 0,
images: [],
col1: [],
col2: [],
page: 1
},
loadImages() {
var that = this
wx.showToast({
title: '拼命加载中...',
icon: 'loading',
duration: 2000
})
wx.request({
url:'http://wq.ycwjwl.com/js.php?url=http://www.qq.com&page='+this.data.page,
success: function(res) {
wx.hideToast()
that.setData({
loadingCount: res.data.tngou.length,
images: res.data.tngou,
page: that.data.page+1
})
}
})
},
onLoad () {
wx.getSystemInfo({
success: (res) => {
let ww = res.windowWidth;
let wh = res.windowHeight;
let imgWidth = ww * 0.48;
let scrollH = wh;
this.setData({
scrollH: scrollH,
imgWidth: imgWidth
});
this.loadImages();
}
})
}
})
<view style="display:none">
<image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.img}}" bindload="onImageLoad"></image>
</view>
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
<view style="width:100%">
<view class="img_item">
<view wx:for="{{col1}}" wx:key="id">
<image bindtap="goProfile" data-avatar="{{item.img}}" src="{{item.img}}" style="width:100%;height:{{item.height}}px"></image>
</view>
</view>
<view class="img_item">
<view wx:for="{{col2}}" wx:key="id">
<image bindtap="goProfile" data-avatar="{{item.img}}" src="{{item.img}}" style="width:100%;height:{{item.height}}px"></image>
</view>
</view>
</view>
</scroll-view>
常用元素
<view class="lsit">
<!-- 设置一个显示区域 类似于html的div-->
<view class="liItem" wx:for="{{lists}}" wx:key="item.Id">
<!-- wx:for="{{lists}}"设置存放数组 wx:key="item.Id"设置主键 -->
<navigator url="/pages/message/message?id={{item.Id}}">
<!-- 设置链接 -->
<view class="liImgs">
<!-- 设置一个显示区域 -->
<image src="{{item.mainimg}}" wx:if="{{item.mainimg!=undefined}}" class="liImg" />
<!-- 一张图片 wx:if="{{item.mainimg!=undefined}}"设置显示条件 -->
</view>
<view class="liDiv">
<text class="liTit">{{item.title}}</text>
<!-- 显示文字 -->
<text class="liCnt">{{item.content}}</text>
</view>
</navigator>
</view>
</view>