uni-app请求新闻接口api，渲染新闻列表

• 2019 年 12 月 24 日
• 筆記

在网上找了一个免费的新闻api http://v.juhe.cn/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fcdf5

但是一般免费的api,存在不了多久就挂掉了，前面收集的那些免费的api差不多已经挂了一半了，谨慎使用~

<template>      <view class="page">          <view class="uni-list">              <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="item in itemList">                  <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">                      <view class="uni-media-list-logo">                          <image v-if="showImg" :src="item.thumbnail_pic_s"></image>                      </view>                      <view class="uni-media-list-body">                          <view class="uni-media-list-text-top">{{item.author_name}}</view>                          <view class="uni-media-list-text-bottom uni-ellipsis">{{item.title}}</view>                      </view>                  </view>              </view>          </view>      </view>  </template>  <script>      export default {          data() {              return {                  showImg: false,                  itemList: []              }          },          onLoad() {              this.getList();              this.showImg = true;            },          methods: {              getList() {                  uni.request({                      url: '/api/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fcdf5',                      success: (res) => {                          console.log(res.data);                          this.itemList = res.data.result.data;                      }                  });              }          }      }  </script>  <style>      .title {          padding: 20upx;      }      .uni-navigate-right.uni-media-list {          height: 80px;      }  </style>

解决接口跨域问题，若有不会可以查看： uni-app学习笔记-请求接口跨域问题（八） https://www.jianshu.com/p/aea58ee405b8

"devServer": {                            "proxy": {                                "/api": {                                    "target":"http://v.juhe.cn",                                    "changeOrigin": true,//是否跨域                                    "secure": false,// 设置支持https协议的代理                                     "pathRewrite":{"^/api":"/"}                                }                            }                  },

效果