上一篇
小程序模拟调用本地json接口数据
那么,怎么请求服务器json数据?
如果你是一枚前端,不会写后端接口的话
又想测试数据,看自己写的效果的时候
不要慌
那么,把你的json放在服务器底下
模拟请求服务器json数据即可
步骤:
1:先写好json数据放在桌面备用
[ { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 } ]
2:下载一个FileZilla,这款工具在我看来比其他任何一款FTP软件都要简单方便,快捷有效。
3:下载安装好之后,打开FileZilla
填写服务器主机,用户名和密码,端口号,链接到服务器
4:找到服务器配置所在的位置,打开文件夹,将json文件拖进去
5:打开你的域名,添加/index.json
,直到在你的服务器里面可以访问到json,就可以了,效果如下:
6:写好wxml:
<view wx:for="{{list}}" wx:key="list"> <view class='item-container'>{{item.id}}</view> </view>
7:写好wxss
.item-container{ border: 5px solid #ffffff; height: 110rpx; line-height: 110rpx; margin-bottom:4rpx; text-align: center; background: #f6c8fb; color: #ffffff; }
8:js
Page({ data: { }, onLoad: function () { var that = this wx.request({ url: 'http://pig.intmote.com/index.json', headers: { 'Content-Type': 'application/json' }, success: function (res) { //将获取到的json数据,存在名字叫list的这个数组中 that.setData({ list: res.data, //res代表success函数的事件对,data是固定的,list是数组 }) } }) } })
9:效果如下:
10:有一个小bug