爱彩乐十一选五

首頁 > 上網技巧 > 電腦小技巧 > 微信小程序Ajax加載遠程數據

微信小程序Ajax加載遠程數據

時間:2019-10-03 16:25 作者:QQ地帶 我要評論

小程序的容量是有限制,最大不超過2M,而我們有很多的資源,這時候就只能通過遠程地址來加載數據,微信小程序定義了 wx.request() 方法,可以輕松Ajax加載遠程數據。
 
微信小程序的外部鏈接必須使用HTTPS安全鏈接,這點比較麻煩,一般網站都沒有這樣的功能,我使用七牛云,他提供了SSL安全鏈接的CDN加速,可以放置一些靜態的文件。
 
首先我們需要下載微信小程序的開發工具,可以到這里:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下載,選擇適合你電腦操作系統的最新版本,雙擊安裝即可使用。
 
我們先新建一個項目AppID可以不填寫,然后是保存的路徑,勾選在當前目錄中創建 quick start 項目,開發工具會為我們創建一個簡易的項目結構。
 
微信小程序Ajax加載遠程數據
 
展開中間的 page 文件夾,點擊 index.js 在右側編輯文件,這個頁面就是我們的行為控制文件,包括加載數據、小程序的事件等操作,在 onLoad: function () {} 頁面加載完成的回調函數里面,添加我們 Ajax 代碼:
 
onLoad: function () {
var page = this;
wx.request({
  url: 'https://ssl.wenjiangs.com/posts.json',  
  data: {},
  method: 'GET',
  success: function (res) {
    page.setData({
      wp_post:res.data
    })
  },
  fail: function () {
  },
  complete: function () {
  }
})
我剛開始使用的時候,調用 page 的 setData 方法總是報錯,然后添加 var page = this 以后就正常了,應該是 page 變量作用域的問題。
 
這里需要注意的是,訪問成功后,匿名函數的參數 res 并不是我們請求到的具體數據,而 res.data 才是,這個和我們一般的Ajax請求有點區別,最后我們發送一個 wp_post 變量到小程序的頁面中,接下來我們需要輸出這個變量:
 
<view wx:for="{{wp_post}}" wx:for-item="item" wx:key="key"  wx:for-index="id">
{{id}}:{{item.title.rendered}}
</view>
如果你使用過模版引擎,那么上面的語法你應該不會陌生,唯一有點區別的就是微信小程序使用 wx:for 循環代碼,可以定義索引和元素項,通過JS的點語法查找到下面的子元素。

標簽: 微信小程序
頂一下
(0)
0%
踩一下
(0)
0%

Google提供的廣告

爱彩乐十一选五 网球即时排名 手球比赛规则 欢乐炸金花官方下载 绝地求生刺激战场下载 农村建设区买瓷砖砖赚钱吗 双色球稳赚不赔的技术 福彩快三害死多少人 重庆时时彩彩乐乐 双色球开奖结果今天的 购彩技巧 北京pk十赛车免费计划 高频彩怎么玩稳赚 百易街机金蟾捕鱼可以破解么 3.10股票推荐 十分快三稳赚技巧 海龙王捕鱼破解版