上一篇
小程式模擬呼叫本地json介面資料
https://www.jianshu.com/p/20ecc78a1a3f

那麼，怎麼請求伺服器json資料？
如果你是一枚前端，不會寫後端介面的話
又想測試資料，看自己寫的效果的時候
不要慌
那麼，把你的json放在伺服器底下
模擬請求伺服器json資料即可

步驟：

1：先寫好json資料放在桌面備用

[
  {
    "id": 1
  },
  {
    "id": 2
  },
  {
    "id": 3
  },
  {
    "id": 4
  }
]
 

2:下載一個FileZilla，這款工具在我看來比其他任何一款FTP軟體都要簡單方便，快捷有效。
下載地址：https://www.filezilla.cn/

3：下載安裝好之後，開啟FileZilla
填寫伺服器主機，使用者名稱和密碼，埠號，連結到伺服器

4：找到伺服器配置所在的位置，開啟資料夾，將json檔案拖進去

5：開啟你的域名，新增/index.json

,直到在你的伺服器裡面可以訪問到json，就可以了，效果如下：
http://www.intmote.com/index.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

解決辦法：
https://www.jianshu.com/p/08667ed9f37a

原文作者：祈澈姑娘 技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家加入群聊，一起探討交流。