筆記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)請求調用