1. 程式人生 > >小程式同一頁面賦值Jso的資料並顯示出來(完美案例)

小程式同一頁面賦值Jso的資料並顯示出來(完美案例)

目的:載入Api返回的Post的Json資料,並顯示在介面表示出來。打通資料庫到小程式到介面對應顯示出來。

困難:

1.在Data中的資料如何在頁面載入是賦值替換?

2.提供post的Data值還沒有設定變數

 

 

<view class='mingpian' wx:for="{{arr}}" style="transform:translate(10px, 10px);" >

<image class='images'src="{{item.Photo}}"></image>

<view class='name'>{{item.Name}} <view class='position'>{{item.Position}}</view></view>

<view class='company'>{{item.Company}}</view>

</view>

///////////////////////

 

var that = this;

wx.request({

url: 'http://localhost:40637/api/values/',

data: {

Id: 1,

Name: 'xiaohong'

},

method: "POST",

dataType: JSON,

success: function (res) {

 

console.log(JSON.parse(res.data));

var value = JSON.parse(res.data);

that.setData({

arr:value

})

},

})

//////////////////////////////////////

 

.mingpian{

display: flex;

align-items:center;

justify-content:left;

width: 100%;

height: 100%;

}

.images

{

width: 60px;

height: 60px

}

.name

{

font-size: 20px;

}

.position

{

font-size: 15px;

}

.company

{

font-size: 16px;

}

 

配合案例使用:https://download.csdn.net/download/weixin_42401291/10775476