低成本0基础打造自己的app之uni-app请求接口以及生命周期函数

引言

此教程为

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

uni-app请求接口

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

一个简单的请求接口Demo如下：

\t
uni.request({
\t
 url: 'https://www.example.com/request', //请求接口
\t
 method:'GET',//请求方式（GET，POST……）
\t
 data: {
\t
 text: 'uni.request' //要发送的数据
\t
 },
\t
 dataType:'json',//返回数据格式
\t
 header: {
\t
 'custom-header': 'hello' //自定义请求头
\t
 }, 

\t
 success: (res) => {//请求成功后返回
\t
 console.log(res.data);
\t
 this.text = 'request success';
\t
 },
\t
 fail:(res) =>{//请求失败后返回
\t
 }
\t
});

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

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

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

onLoad ： 监听页面加载

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

 }

onShow ：监听页面显示

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

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

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

更多uni-app页面生命周期函数可百度：uni-app生命周期函数

点击下面的链接你可以得到源代码仓库地址。