做商城，音乐，新闻类的小程序的时候，我们希望用户能够清楚全面的获取到足够多的信息。我们可以在小程序的代码中写入数据，这样用户也可以看到信息。但是，这种写死的数据作用有限，并不能实时获取到信息。所以我们需要从网络上获取到各种信息API，并把它引入到小程序中，这样可以不用在小程序中写数据，依然能够获取到信息，并且是实时的。
一般我们引入数据可以通过wx.request方法，在其中的参数中定义url, data, method, success, fail等。
小程序官方：wx.request
但是，这种方法一次只能获取到一个url传过来的数据，如果我要获取另外一个数据，我还要再使用这个方法。比如我要获取网易云热门榜单的数据，我要利用wx.request（{
url:'xxx'}）把这个数据传进来。如果再有一个获取热门搜索的需求，我还要再写一个wx.request({url:xxx})把数据传过来。
这样就造成了一个问题，代码的冗余也不美观，看起来就很混乱，自己在开发中也常常会搞乱。所以，我们用API模块封装，把所以要用到的API放到一个文件下，要用到某一具体的接口我们可以用module.exports 放出来。
以调用网易云搜索建议的API为例：
首先，在小程序根目录下新建一个API文件夹，在里面新建一个api.js文件。然后
const API_BASE_URL = 'http://neteasecloudmusicapi.zhaoboy.com' 把这个基础URL传给一个常量，这样在后面可以直接调用。因为在这个基础URL下面还有很多路径代表不同的数据。所以不能把具体的某一个榜单数据，热搜数据赋值。
再然后，直接敲下以下代码，作用是获取数据。
获取数据
接着，
给请求传入路径，即图中的 /top/song ,为固定模板，除了路径，其他的可以不用换。
在index.js页面中，在头部插入 const API = require('../../API/api');
再然后，
hotsongs:[ ] 为存放数据的数组，
gethotsongs(){}中，type：7 是接口里面的参数，7表示为华语，欧美为96，日本为8，
code=200表示为数据的状态码。
onLoad()方法表示在页面加载时调用gethotsongs()方法。
最后，在index.wxml中将数组的数据用组件承接起来并显示。
完整代码：
// api.js
const API_BASE_URL = 'http://neteasecloudmusicapi.zhaoboy.com';
const request = (url, method, data) => {
let _url = API_BASE_URL + url;
return new Promise((resolve, reject) => {
wx.request({
url: _url,
method: method,
data: data,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(request) {
resolve(request.data)
},
fail(error) {
reject(error)
}
})
});
}
module.exports ={
gethotsongs:(data) =>{
return request('/top/song',true,data)
}
}
// index.js
const API = require('../../API/api');
Page({
data: {
hotsongs:[],
},
onLoad() {
this.gethotsongs();
},
gethotsongs(){
API.gethotsongs({
type:7,
})
.then(res => {
console.log(res);
// 大厂API接口的维定 code 0 没有问题
if (res.code === 200) { //严谨
this.setData({
hotsongs: res.data
})
}
})
}
})
<!--index.wxml-->
<view class="container">
<view wx:for="{{hotsongs}}" wx:key="">
<view class="index">{{ index + 1 }}</view>
<!-- <view class="song-title">{{item.first}}</view> -->
<!-- <view class="song-title">{{item.}}</view> -->
<!-- <image src='{{item.picUrl}}'></image> -->
<view>{{item.artists.copyrightId}}</view>
<!-- <image src='{{item.picUrl}}'> </image> -->
</view>
</view>
https://github.com/zhongjunhaoz/miniapp/tree/master/test1 在github查看源代码
几个注意事项：
1.
API里的参数
在网易云音乐的API中，/top/song下，表示新歌速递，type:0表全部地区，type：7表华语；type：8 表日语地区......
又如在/resource/like接口下，type：1为MV；type：4为电台；type：5为视频；等等。
2. res.code === 200 表示为状态码；在返回来的数据中，它会跟随一起来。状态码有200,400，等。需要正确填入。
3.
上图中，res为传来的数据，data为传来的数据的字段。可以根据需要增减数据的字段来控制传入hotsongs数组的数据。上图表示把res下的data全部传入。假如hotsongs = res.data.hots
则表示为把data下面的hots 全部传入hotsongs数组。
4.
index.wxml
需要注意的是，上图表示为显示item下artists下的copyrightId
item表示为数组hotsongs,
如果没有自定义wx:key-item 则默认为item.
网友评论