小程序數據請求API渲染教程

這篇文章主要介紹了微信小程序頁面渲染實現方法,文中經過示例代碼介紹的很是詳細，對你們的學習或者工做具備必定的參考學習價值,須要的朋友能夠參考下。

一：新建一個項目

填寫本身申請過得小程序的appid,勾選不使用雲服務。

二：準備一個免費的接口

這種免費的接口網上有不少，可是基本都不太穩定，過了一段時間都沒有辦法技術使用，基本都會掛，因此啊，必定要選擇官方文檔裏面給的接口，我這裏找的是uniapp框架裏面的某一個接口，應該能撐幾年。

https://unidemo.dcloud.net.cn/api/news

三：開始寫js代碼

思路

1：首先寫請求，咱們都知道小程序的請求就是使用wx.request這個方法的，
官方文檔指路：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

直接將這個請求賦值到js默認的page裏面的onLoad函數

2：將url替換成前面找好的免費接口
success返回成功的話
在控制檯打印一下返回的res.data數據

    

     
        success:  
 
     res => { 
 
     
         
 
     console.log(res.data) 
 
     
      } 
 
     
 

    

3:  需在data中聲明一個接收數據的變量。

    
 
 
     data: { 
 
     
     
 
     list: [] 
 
     
  }, 
 
     
 

    

4:在請求接口成功以後，用setData接收數據

    

     
           
 
     this.setData({ 
 
     
           
 
     //第一個data爲固定用法 
 
     
          list: res. 
 
     data 
 
     
        }) 
 
     
 

    

5:js參考代碼

    

     
  Page({ 
 
     
   
 
     data: { 
 
     
     
 
     // 3:需在data中聲明一個接收數據的變量。 
 
     
    list: [] 
 
     
  }, 
 
     
   
 
     onLoad:  
 
     function (options) { 
 
     
    wx.request({ 
 
     
       
 
     url:  
 
     'https://unidemo.dcloud.net.cn/api/news', 
 
     
       
 
     header: { 
 
     
         
 
     'content-type':  
 
     'application/json' 
 
     
      }, 
 
     
       
 
     success:  
 
     res => { 
 
     
         
 
     //1:在控制檯打印一下返回的res.data數據 
 
     
         
 
     console.log(res.data) 
 
     
         
 
     //2:在請求接口成功以後，用setData接收數據 
 
     
         
 
     this.setData({ 
 
     
           
 
     //第一個data爲固定用法 
 
     
          list: res.data 
 
     
        }) 
 
     
      } 
 
     
    }) 
 
     
  }, 
 
     
}) 
 
     
 

    

6：注意一下，若是出現這樣的報錯

    
 
 
     https:/ 
 
     /unidemo.dcloud.net.cn 不在如下 request 合法域名列表中，請參考文檔：https:/ 
 
     /developers.weixin.qq.com/miniprogram 
 
     /dev/framework 
 
     /ability/network.html 
 
     
 

    

說明接口的域名並無在你開發所用的小程序的後臺進行域名，證書等的配置。

爲了開發方便，這樣能夠解決：點開右上角的詳情按鈕，進行本地設置，勾選不校驗合法域名，web-view(業務域名），TLS版本以及HTTPS證書。

可是後面上線以前仍是需進行配置好哦

四：wxml

上一步裏面，能夠看到，接口的返回值的格式以下，所有都是數組

若是要渲染到界面，就須要進行數組循環，使用wx:for方法：

    

     
  在組件上使用 wx: 
 
     for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。 
 
     
默認數組的當前項的下標變量名默認爲  
 
     index，數組當前項的變量名默認爲 item 
 
     
 

    

wxml

    
 
 
     <view wx:for="{{list}}" wx:key="index"> 
 
     
   
 
     <view class="item"> 
 
     
     
 
     <view class="number-wrapper"> 
 
     
       
 
     <text class="name">{{item.author_name}} 
 
     </text> 
 
     
       
 
     <view class="count-wrapper"> 
 
     
         
 
     <text class="count">{{item.title}} 
 
     </text> 
 
     
       
 
     </view> 
 
     
     
 
     </view> 
 
     
   
 
     </view> 
 
     
 
 
     </view> 
 
     
 

    

wxss

    
 
 
     .item { 
 
     
   
 
     width:  
 
     100%; 
 
     
   
 
     height:  
 
     186rpx; 
 
     
   
 
     position: relative; 
 
     
   
 
     display: flex; 
 
     
   
 
     margin:  
 
     10rpx  
 
     10rpx; 
 
     
   
 
     border-bottom:  
 
     1px solid  
 
     rgb(197, 199, 199); 
 
     
} 
 
     
 

    

小程序界面以下：

wxss沒有怎麼寫，湊合着看吧。不過仍是喜歡引入一下小程序的ui框架，這樣用起來就很快樂。

完結，撒花

本文分享自微信公衆號 - 前端迷社區（gh_c8466b051727）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。