uni-app请求接口以及生命周期函数

引言

本教程为《用WordPress与uni-app开发,包含所有源代码》系列教程之一。

前面我讲解了怎么用WP开发一个首页幻灯片接口，本来这一节中我们应该讲解如何将数据渲染到app上面，但为了照顾小白，我这里插入一下uni-app的知识。

uni-app请求接口

app想要与服务端进行交互，就需要向服务端的接口发起请求，在uni-app中是用uni.request的方法来发起请求的。

一个简单的请求如下：

uni.request({
    url: 'https://www.example.com/request', //请求接口
    method:'GET',//请求方式（GET，POST……）
    data: {
        text: 'uni.request'  //要发送的数据
    },
    dataType:'json',//返回数据格式
    header: {
        'custom-header': 'hello' //自定义请求头
    },
    success: (res) => {//请求成功后返回
        console.log(res.data);
        this.text = 'request success';
    },
    fail:(res) =>{//请求失败后返回
 
    }
});

uni-app的页面生命周期函数

何为页面生命周期？即一个页面开始加载、显示、加载完成、页面隐藏、页面卸载……开发者则可以监听这些生命周期完成一些复杂的页面逻辑，比如说检测是否登录。

uni-app的页面生命周期

在uni-app中一个页面有一些默认的函数方法，这些方法有的是在页面显示时加载，有的是在监听页面渲染完成之后加载等等这些即为页面生命周期函数。这里我就列举几个函数以作说明。

onLoad ： 监听页面加载

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log("此页面加载时将执行我"); 
    }

onShow ：监听页面显示

onShow: function (option) { 
        console.log("此页面显示时将执行我"); 
    }

onReady ： 监听页面初次渲染完成

onReady: function (option) { 
        console.log("此页面初次在屏幕上渲染完成之后会执行我"); 
    }

更多页面生命周期函数，请查看官方文档。

总结

其实相对来说，uni-app真的还是挺简单的，多看看官方文档，上手是很快的。

[post id=18]