作者：lu521
一、从服务器获取数据
1.设置config
HTTP_BASE_URL_JSON :'https://api.bssolution.cn/apis'
2.请求服务器（三个get post unload）
function PostJSON (url,data, cb ){
wx.request({
method:'POST',
url: config.HTTP_BASE_URL_JSON + url,
data: data,
success: (res) => {
typeof cb == "function" && cb(res.data,"");
},
fail: (err) => {
typeof cb == "function" && cb(null,err.errMsg);
console.log("http请求:"+config.HTTP_url);
console.log(err)
}
});
};
3.绑定到http上
httpPostJSON: PostJSON
4.在该页面的js中
写入方法获取数据，将该方法绑定在onload中（setData）
二、使用json数据
1.直接在页面中应用
a.在该页面的js上，在data中写入数据 items:[{},{},{}]
b.遍历到网页中
wx:for="{{items}}" wx:key="{{item.id}}"
使用：{{item.title}}
二层遍历的时候 wx:for="{{item}}"
使用：{{item}}
2.调用template模板
a.import引入模板
b.在该页面的js上，在data中写入数据
list_index_item1:{
items:[{},{},{}]
}
注：list_index_item1是模板的名字
c.遍历到网页中(同直接在页面中应用的 b.)
二、点击列表list进入不同的详情页detail
（在index上）
1.在服务器获取数据
例如：http.httpGet("/v2/goods?page=1&per_page=10",{
appid:config.APPID,
},function(res){
var goods_list;
that.setData({
goods_list:res
});
});
2.在wxml页面上遍历数据
在上一个view遍历数据，在下面的view上绑定事件，同时设置相应的id
例如：<block wx:for="{{goods_list.products}}" >
<view class="list_left_right_body" bindtap="tiao" id="{{item.id}}" >
<view class="list_left_right_img" >
<image src="{{item.default_photo.thumb}}" />
</view>
</view>
</block>
3.事件的编写
第一步：获取到相应的id
第二步：跳转到相应的页面
例如：tiao:function(e){
var id = e.currentTarget.id
wx.navigateTo({
url: '../details/detail?name=asdfads&id='+id,
})
}
（在detail上）
4.detail页面引入参数
在onload方法里注入options参数，即可获取
例如：onLoad:function(options){
console.log("event------------"+options.id);
console.log("event------------"+options.name);
}
5.从后台上获取detail页面的数据
例如： onLoad:function(options){
var that = this;
var id = options.id;
var data = {id:id};
http.httpGet("/v2/detail?id="+id,data,function(res){
var goods_info = res;
that.setData({
goods_info: goods_info
});
console.log("goods_info------------"+goods_info);
console.log("goods_info-image------------"+res.photos[0].thumb);
});
}
6.在detail页面插入数据
注：不需要wx:for=""遍历，直接调用就可以
例如： <view class="title">{{goods_info.name}}</view>
<view class="price">￥{{goods_info.current_price}}</view>
<view class="number">成交笔数{{goods_info.sales_count}}</view>
