258资源分享网

一、从服务器获取数据

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=http://www.yiyongtong.com/archives/"{{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>