笔记2：uni-app调用api接口制作页面示例

一、首页制作：在index.vue创建模板代码

1，制作轮播图，官网swiper组件

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <swiper-item>
                            <view class="swiper-item uni-bg-red">A</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green">B</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">C</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

2，制作图文列表

<view class="page-section indexListBox">
                <view class="indexList">
                    <image src="" mode=""></image>
                    <view class="title">
                        文章标题
                    </view>
                </view>
                <view class="indexList">
                    <image src="" mode=""></image>
                    <view class="title">
                        文章标题
                    </view>
                </view>
                <view class="indexList">
                    <image src="" mode=""></image>
                    <view class="title">
                        文章标题
                    </view>
                </view>
            </view>

二、样式与数据接口

1，写<style></style>

    swiper-item image{
        width: 100%;
    }
    .indexList uni-image {
        width: 100%;
        height: 130px;
        background: #eaeaea;
    }
    .indexList {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .indexList .title {
        background: #000;
        color: #fff;
        font-size: 16px;
        line-height: 37px;
        padding: 0 10px;
        margin-top: -5px;
}
   .indexListBox{
       margin-top: 20px;
   }

2，写<script></script>

onLoad(){} 生命周期

uni.request(){} 发起请求

    export default {
        data() {
          return {
                homeSlide:[],//定义值接收幻灯片数据
                homePosts:[],//定义值来接收文章列表
            }
        },
        onLoad() {
            //执行方法getHomeSlideFunc（）
            this.getHomeSlideFunc();
            //执行方法getHomePosts()
            this.getHomePosts();
        },
        //此处为自定义方法
        methods: {
            //定义获取幻灯片数据的方法getHomeSlide（）
           getHomeSlideFunc(){
               var _self = this;
               uni.request({
                   url: 'http://www.weiganxia.cc/wp-content/themes/Beginning/api/homeSlide.php', //请求接口
                   header: {
                         'content-type': 'application/x-www-form-urlencoded',  //自定义请求头信息
                       },
                success: (res) => {//请求成功后返回
                       // 请求成功之后将幻灯片数据赋值给homeSlide
                       _self.homeSlide=res.data.post;
                   }
                });
            },
           // 定义方法获取首页文章列表接口getHomePosts（）
            getHomePosts(){
                var _self = this;
                uni.request({
                    url: 'http://www.weiganxia.cc/wp-content/themes/Beginning/api/indexList.php',//接口地址
                    header: {
                          'content-type': 'application/x-www-form-urlencoded',  //自定义请求头信息
                        },
                    success: (res) => {
                        // 请求成功之后将文章列表数据赋值给homePosts
                        _self.homePosts=res.data.post;
                    }
                });
            }
        }
    }

三、制作api接口

浏览器打开是否请求成功：

http://www.weiganxia.cc/wp-content/themes/Beginning/api/homeSlide.php

http://www.weiganxia.cc/wp-content/themes/Beginning/api/indexList.php

1，轮播图homeSlide.php

<?php
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
//引入WP加载文件，引入之后就可以使用WP的所有函数 
require( '../../../../wp-load.php' );

//定义返回数组，默认先为空
$data=[];

// 使用wp的查询文章函数查询出三篇幻灯片文章
// 1、定义查询条件
$args = array( 
    'post_type'=>'post',  //查询文章类型
    'post_status'=>'publish', //查询文章状态
    'post__in' => get_option('sticky_posts'),//确定调用的是置顶文章列表
    'caller_get_posts' => 1
);
// 2、开始查询文章
query_posts($args);
if (have_posts()){ //如果查询出来了文章
    // 定义接收文章数据的数组
    $posts=[];
    // 循环文章数据
    while ( have_posts() ) : the_post();
        // 获取文章id
        $post_id=get_the_ID();
        // 定义单条文章所需要的数据
        $list=[
            "id"=>$post_id,  //文章id
            "title"=>get_the_title(), //文章标题
            "img"=>get_the_post_thumbnail_url() //文章缩略图
        ];
        // 将每一条数据分别添加进$posts
        array_push($posts,$list);
    endwhile;
    // 定义返回值
    $data['code']=200;
    $data['msg']="查询数据成功！";
    $data['post']=$posts;
}else {
    // 如果没有文章
    $data['code']=404;
    $data['msg']="没有相关文章";
    $data['post']=[];
}
// 输入json数据格式
print_r(json_encode($data));
?>

2，图文列表indexList.php

<?php
// 接口名：首页文章列表
// 教程地址：https://www.inacorner.top/395.html
// 可传参数：page(页数)
header('Access-Control-Allow-Headers:*'); 
//引入WP加载文件，引入之后就可以使用WP的所有函数 
require( '../../../../wp-load.php' );


// 这里为了方便后期的下拉加载更多，我们可以定义一个页码参数
$page=@$_GET['$page'];

//定义返回数组，默认先为空
$data=[];

// 使用wp的查询文章函数查询最新文章列表
// 1、定义查询条件
$args = array( 
    'post_type'=>'post',  //查询文章类型
    'post_status'=>'publish', //查询文章状态
    'posts_per_page'=>10,  //一页显示十篇文章
    'paged'=>$page,  //第几页，默认为1
    'orderby'=>'date',  //按照时间排序
    'order'=>'DESC'
);
// 2、开始查询文章
query_posts($args);
if (have_posts()){ //如果查询出来了文章
    // 定义接收文章数据的数组
    $posts=[];
    // 循环文章数据
    while ( have_posts() ) : the_post();
        // 获取文章id
        $post_id=get_the_ID();
        // 定义单条文章所需要的数据
        $list=[
            "id"=>$post_id,  //文章id
            "title"=>get_the_title(), //文章标题
            "img"=>get_the_post_thumbnail_url() //文章缩略图
        ];
        // 将每一条数据分别添加进$posts
        array_push($posts,$list);
    endwhile;
    // 定义返回值
    $data['code']=200;
    $data['msg']="查询数据成功！";
    $data['post']=$posts;
}else {
    // 如果没有文章
    $data['code']=404;
    $data['msg']="没有相关文章";
    $data['post']=[];
}
// 输入json数据格式
print_r(json_encode($data));
?>

四、渲染数据完整代码示例

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <!-- 一组幻灯片代码开始，用到组件swiper 官网https://uniapp.dcloud.io/component/swiper-->
                    <swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
                        <!-- 教程uni-app渲染幻灯片数据第三步：渲染数据 -->
                        <swiper-item v-for="(item , index) in homeSlide" :key="index">
                            <!-- uni img组件 src绑定值为服务端返回的数据中的文章缩略图 -->            
                            <image :src="item.img" mode=""></image>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view> 
        <view class="page-section indexListBox">
            <!-- 教程 uni-app:渲染app的首页文章数据第四步:绑定渲染数据 -->
            <view class="indexList" v-for="(item , index) in homePosts" :key="index">
                <image :src="item.img" mode=""></image>
                <view class="title">
                    {{item.title}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        //此处为该页面需要用到的数据，在项目逻辑中可以对这些数据进行改变
        data() {
          return {
                homeSlide:[],//教程uni-app渲染幻灯片数据第一步：定义值接收幻灯片数据
                homePosts:[],//教程 uni-app:渲染app的首页文章数据第一步:定义一个值来接收文章列表
            }
        },
        onLoad() {
            //教程uni-app渲染幻灯片数据第三步：执行方法getHomeSlide（）
            this.getHomeSlideFunc();
            //教程 uni-app:渲染app的首页文章数据第一步:将该方法加入onLoad中，使页面一加载的时候就获取文章列表
            this.getHomePosts();
        },
        //此处为自定义方法
        methods: {
            //教程uni-app渲染幻灯片数据第二步：定义获取幻灯片数据的方法getHomeSlide（）
           getHomeSlideFunc(){
               var _self = this;
               uni.request({
                   url: 'http://www.weiganxia.cc/wp-content/themes/Beginning/api/homeSlide.php', //请求接口
                   header: {
                         'content-type': 'application/x-www-form-urlencoded',  //自定义请求头信息
                       },
                success: (res) => {//请求成功后返回
                       // 请求成功之后将幻灯片数据赋值给homeSlide
                       _self.homeSlide=res.data.post;
                   }
                });
            },
           // 教程 uni-app:渲染app的首页文章数据第一步:定义方法获取首页文章列表接口getHomePosts（）
            getHomePosts(){
                var _self = this;
                uni.request({
                    url: 'http://www.weiganxia.cc/wp-content/themes/Beginning/api/indexList.php',//接口地址
                    header: {
                          'content-type': 'application/x-www-form-urlencoded',  //自定义请求头信息
                        },
                    success: (res) => {
                        // 请求成功之后将文章列表数据赋值给homePosts
                        _self.homePosts=res.data.post;
                    }
                });
            }
        }
    }
</script>

<style>
/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
    swiper-item {
        background-color: #f8f8f8;
    }
    /* 教程uni-app渲染幻灯片数据最后一步：美化 */
    swiper-item image{
        width: 100%;
    }
    /* 教程《用uni-app制作首页文章列表》首页文章列表css代码 */
    .indexList uni-image {
        width: 100%;
        height: 130px;
        background: #eaeaea;
    }
    .indexList {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .indexList .title {
        background: #000;
        color: #fff;
        font-size: 16px;
        line-height: 37px;
        padding: 0 10px;
        margin-top: -5px;
}
   .indexListBox{
       margin-top: 20px;
   }
</style>

五、效果

原文链接：清空网络科技工作室

相关链接：Chrome 调试跨域问题解决方案之插件篇

本站相关：php+ajax简单实现跨域(http+https)请求调用

posted @ 2019-08-18 18:53 Chervehong 阅读(23022) 评论(1) 编辑收藏举报

刷新页面返回顶部

Chervehong

故不积跬步，无以至千里；不积小流，无以成江海。

笔记2：uni-app调用api接口制作页面示例

公告