微信小程序开发之坑-----后台传List 到微信端显示的坑

为了完成毕业设计,临时学了微信小程序,很多坑。可能对一个成熟的开发人员来说,这个错误简直很傻。但是,我确实是搞了一上午。希望给像我一样的临时学者一些帮助。

首先看我的后台代码:

没有什么特别的地方,就只是从数据库查询得到所有的数据,直接返回给前台。

微信端请求:

 wx.request({
      url: 'http://localhost:8080/*****/****.action', //此处为自己后台的请求地址
      dataType:'jsonp',
      method:'POST',
      header: { 
        'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log(res)
        console.log(res.data) //打印查看是否接收到数据
        var list = JSON.parse(res.data) // 若不加此转换,接收到的数据格式如下图
        console.log(list)
        th.setData({
          posts_key:list
        });
      },
      fail:function(res){
        console.log("..............fail...............")
      }
    })

微信端得到的数据如下图所示:

这样的数据没办法微信端页面用{{item.sendword}}直接显示。下面代码为示例代码:

<template name="strategyItem">
	` <view class="strategy-container">
		  <view class="strategy-author-date">
		  	<image class="strategy-author" src="{{item.author_img}}"></image>
			    <text class="strategy-date">{{item.date}}</text>
		</view>
		<text class="strategy-title">{{item.sendword}}</text>
		<image class="strategy-img" src="{{item.post_img}}"></image>
		<text class="strategy-content">{{item.content}}</text>
		<view class="strategy-like">
			<image class="strategy-like-img" src="../images/more/xing.png"></image>
			<text class="strategy-like-font">{{item.collect_num}}</text>
			<image class="strategy-like-img" src="../images/eye.png"></image>
			<text class="strategy-like-font">{{item.view_num}}</text>
		</view>
	</view>
</template>

请向上看请求代码, var list = JSON.parse(res.data)  这句代码是对接收的数据进行格式转换,转换后的数据为:

转换后的数据可以在微信端的页面用{{item.sendword}}显示。

我踩的坑就是这个数据转换的坑。

注意:上面微信页面示例代码中,{{item.***}}请换成数据的对应属性。

发布了16 篇原创文章 · 获赞 10 · 访问量 4812
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览