作者:lu521
一、從服務(wù)器獲取數(shù)據(jù)
1.設(shè)置config
HTTP_BASE_URL_JSON :'https://api.bssolution.cn/apis'
2.請(qǐng)求服務(wù)器(三個(gè)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請(qǐng)求:"+config.HTTP_url);
console.log(err)
}
});
};
3.綁定到http上
httpPostJSON: PostJSON
4.在該頁(yè)面的js中
寫(xiě)入方法獲取數(shù)據(jù),將該方法綁定在onload中(setData)
二、使用json數(shù)據(jù)
1.直接在頁(yè)面中應(yīng)用
a.在該頁(yè)面的js上,在data中寫(xiě)入數(shù)據(jù) items:[{},{},{}]
b.遍歷到網(wǎng)頁(yè)中
wx:for="{{items}}" wx:key="{{item.id}}"
使用:{{item.title}}
二層遍歷的時(shí)候 wx:for="{{item}}"
使用:{{item}}
2.調(diào)用template模板
a.import引入模板
b.在該頁(yè)面的js上,在data中寫(xiě)入數(shù)據(jù)
list_index_item1:{
items:[{},{},{}]
}
注:list_index_item1是模板的名字
c.遍歷到網(wǎng)頁(yè)中(同直接在頁(yè)面中應(yīng)用的 b.)
二、點(diǎn)擊列表list進(jìn)入不同的詳情頁(yè)detail
(在index上)
1.在服務(wù)器獲取數(shù)據(jù)
例如:http.httpGet("/v2/goods?page=1&per_page=10",{
appid:config.APPID,
},function(res){
var goods_list;
that.setData({
goods_list:res
});
});
2.在wxml頁(yè)面上遍歷數(shù)據(jù)
在上一個(gè)view遍歷數(shù)據(jù),在下面的view上綁定事件,同時(shí)設(shè)置相應(yīng)的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.事件的編寫(xiě)
第一步:獲取到相應(yīng)的id
第二步:跳轉(zhuǎn)到相應(yīng)的頁(yè)面
例如:tiao:function(e){
var id = e.currentTarget.id
wx.navigateTo({
url: '../details/detail?name=asdfads&id='+id,
})
}
(在detail上)
4.detail頁(yè)面引入?yún)?shù)
在onload方法里注入options參數(shù),即可獲取
例如:onLoad:function(options){
console.log("event------------"+options.id);
console.log("event------------"+options.name);
}
5.從后臺(tái)上獲取detail頁(yè)面的數(shù)據(jù)
例如: 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頁(yè)面插入數(shù)據(jù)
注:不需要wx:for=""遍歷,直接調(diào)用就可以
例如: <view class="title">{{goods_info.name}}</view>
<view class="price">¥{{goods_info.current_price}}</view>
<view class="number">成交筆數(shù){{goods_info.sales_count}}</view>