uni-app 實戰接入熱門小說API接口 適用於新手

需要一點點的Uni-app的經驗，如果大家是剛剛上手可以在站內收索 ：uni-app微信項目練習.先鞏固一下基礎知識，那么本文針對uni.request(OBJECT) 接入API進行簡單的介紹，樣式楓瑞就不做演示，能顯示內容就行哈哈。

 API：

小說接口：
https://www.apiopen.top/novelApi
詳情接口：
https://www.apiopen.top/novelInfoApi?name=盜墓筆記

 

0x0 建立目錄

使用hbuilder x建立一個uni-app項目，在pages目錄下找到index.vue文件，把多余的代碼刪除

0x1 發起網絡請求

script標簽下onLoad()中寫一個uni.request（），在官方偷來的代碼塊，其中我們可以把不必要的刪除了。比如data，header等

uni.request({
    url: 'https://www.example.com/request', //僅為示例，並非真實接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定義請求頭信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

 

url：填寫我們的API地址

method：填寫POST 還是GET方法，要大寫哦，默認GET可以忽略不寫

success：訪問成功

uni.request({
    url: 'https://www.apiopen.top/novelApi', //小說接口
    success: (res) => {
        console.log(res.data);
    }
});

 

修改好后，我們運行到谷歌瀏覽器或者微信小程序開發工具，谷歌瀏覽器中F12打開控制台看下console中是否有數據

有數據我們再將數據賦值給tests，在data里面寫一個texts:[]數組，隨后把res.data.data的值賦給this.texts，完整的script代碼

<script>
    export default {
        data() {
            return {
                texts:[]
            }
        },
        onLoad() {
            uni.request({
                url: 'https://www.apiopen.top/novelApi', //小說接口
                success: (res) => {                    
                    this.texts = res.data.data;
                    console.log(this.texts);
                }
            });
        },
        methods: {

        }
    }
</script>

 

0x2 合數據

我們在template里面建立一個view作為v-for循環，在寫一個view作為圖書名字，最后一個img小說圖片

[tip type=”error”]因為博客前台使用vue渲染，會導致至代碼塊中內容給直接編譯。代碼復制到本地后請刪除代碼中“刪”文字后即可恢復正常或者直接下載源文件 [/tip]

<template>
    <view class="content">
        <view v-for="text in texts">
            <view style="text-align: center;font-size: 22px;margin: 10px;">{刪{text.bookname}}</view>
            <image :src="text.book_cover"></image>
        </view>
    </view>
</template>

 

0x3 新建界面傳遞參數

我們再小說遍歷出來后，需要做到我們點擊其中一條小說，能夠獲取它自身的數據。添加一個函數@click=”dianji(text)”，當它點擊的時候獲取自身的數據

[tip type=”error”]因為博客前台使用vue渲染，會導致至代碼塊中內容給直接編譯。代碼復制到本地后請刪除代碼中“刪”文字后即可恢復正常或者直接下載源文件 [/tip]

<template>
    <view class="content">
        <view v-for="text in texts" @click="dianji(text)" >
            <view style="text-align: center;font-size: 22px;margin: 10px;">{刪{text.author_name}}</view>
            <image :src="text.book_cover"></image>
        </view>
    </view>
</template>

 

methods方法里面添加相對於的函數，並且打印。自信測試哈不截圖了。

methods: {
    dianji:function (e) {
        console.log(e)
    }
}

 

確定數據正確后我們在往下，點擊其中任意小說，會打開一個新界面，我們在pages目錄新建立一個data.vue界面，在跳轉是帶上小說名字

（小提示：鼠標仿支pages目錄上，直接右鍵新建界面。會自動生成目錄以及路由）

使用uni.navigateTo()方法打開新界面。不截圖節約服務器==

methods: {
    dianji:function (e) {
        // console.log(e)
        uni.navigateTo({
        url: '../data/data?name=' + e.bookname
    })
}
}

 

0x4 新界面發起請求

打開新界面后我們使用onLoad: function(e)去接受傳遞的參數，且使用上面提到的方法去請求接口

onLoad: function(e) {//接受id
            console.log(e.name)
            uni.request({//接口請求
                url: 'https://www.apiopen.top/novelInfoApi?name=' + e.name ,//接口添加小說名字
                success: function(res) {
                    console.log(res.data.data.aladdin)

                }
            });
        },

 

 

因為我們接受返回數據的時候不能試用this，所有我們在發送請求的時候 再去定義一個let that = this 。我們再去嘗試打印一個標題試試

onLoad: function(e) {//接受id
    let that =  this;
    console.log(e.name)
    uni.request({//接口請求
        url: 'https://www.apiopen.top/novelInfoApi?name=' + e.name ,//接口添加小說名字
        success: function(res) {
            console.log(res.data.data.aladdin)
            that.title = res.data.data.aladdin.title;
            console.log(that.title)
        }
    });
},

 

這個不是數組了，他只是一個對象，我們在return下應該這么寫

data() {
    return {
        title:''
    };
},

 

最后自己去view中綁定下數據，剩下的小說詳情作者，圖片，簡介都是這樣去添加打印

[tip type=”error”]因為博客前台使用vue渲染，會導致至代碼塊中內容給直接編譯。代碼復制到本地后請刪除代碼中“刪”文字后即可恢復正常或者直接下載源文件 [/tip]

<template>
    <view>
        <view class="">{刪{title}}</view>
        <view class="">{刪{author}}</view>
        <view class="">{刪{desc}}</view>
        <image :src="cover"></image>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title:'',
                desc:'',
                author:'',
                cover:''
            };
        },
        onLoad: function(e) {//接受id
            let that =  this;
            console.log(e.name)
            uni.request({//接口請求
                url: 'https://www.apiopen.top/novelInfoApi?name=' + e.name ,//接口添加小說名字
                success: function(res) {
                    console.log(res.data.data.aladdin)
                    that.title = res.data.data.aladdin.title;
                    // console.log(that.title)
                    that.author = res.data.data.aladdin.author;
                    that.category = res.data.data.aladdin.category; 
                    that.cover = res.data.data.aladdin.cover; 
                    that.desc = res.data.data.aladdin.desc; 
                }
            });
        },
    }
</script>