微信小程序使用wx.request向服务器请求json数据并渲染到页面

本文通过一个例子讲述了微信小程序使用wx.request向服务器请求json数据并渲染到页面的操作。分享给大家参考，如下：

微信小程序的数据不能写死，必须和数据库结合才能更新数据，小程序数据主要是json数据格式，所以我们可以用php来操作数据库，输出json格式的数据。下面我们来说说微信小程序wx.request对服务器数据请求的用法：

官方文档中给出了示例代码，但我自己做了简单的处理：

index.js

page({ data : } { }，OnLoad : function(){ var that=this wx . request({ URL : ' http://www . like yunba.com/test/test . JSON '，Headers : { ' content-type ' : ' application/JSON ' })，success : function(RES){//JSON数据待获取，还有。此数组中的setdata命名为list ({list:res.data，//RES代表成功函数的事件对，数据是固定的，list是数组})})。上面的url是json数据。

test.json

[{'id':'1 '，' title': '测试数据1' }，{'id':'2 '，' title': '测试数据2'}，{'id' :' 3 '，' title': '测试数据4' }，{'id':'5 '，' title': '测试数据5' }，{'id':'6 '，' Title '{'id':'8 '，' title': '测试数据8' }，{'id':'9 '，' title': '测试数据9'}] index.wxml。

视图wx:为=“{ { list } }”wx 3360键=“list”视图{{item。id } }/view view { { item }。title}}/view/view然后wxml是第一页，呈现json数据，这是一个for循环(wx.for)，wx33366如果我们没有wx:key='list '，我们会在控制台中报告一个错误，但是这个错误不会影响页面的呈现，基本可以忽略！

现在，您可以为“wx: for”提供attr“wx : key”来提高性能。这是一条错误消息

Wx:key用于为列表渲染的数据分配一个‘主键’，从而加快列表渲染的速度。以下为官方文件原文：如未提供wx:key，将报告警告。如果你知道列表是静态的或者你不需要注意它的顺序，你可以选择忽略它。如果想摆脱这个警告，可以在wx:for的组件属性中添加一个wx:key='unique '，用数据绑定列表中任意字段的字段名替换unique，比如文章列表数据中的字段“postId”，即wx:key='postId '。Wx:key=' *不建议这样做。

希望本文对微信小程序的开发有所帮助。