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

蔡进国 發表於 2019-8-18 18:53:00

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

一、首页制作：在index.vue创建模板代码
1，制作轮播图，官网swiper组件
<div class="cnblogs_code">
<pre><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></pre>
</div>
2，制作图文列表
<div class="cnblogs_code">
<pre><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></pre>
</div>
二、样式与数据接口
1，写<style></style>
<div class="cnblogs_code">
<pre> 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;
}</pre>
</div>
2，写<script></script>
onLoad(){} 生命周期
uni.request(){} 发起请求
<div class="cnblogs_code">
<pre> 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;
 }
 });
 }
 }
}</pre>
</div>
三、制作api接口
浏览器打开是否请求成功：
http://www.weiganxia.cc/wp-content/themes/Beginning/api/homeSlide.php
http://www.weiganxia.cc/wp-content/themes/Beginning/api/indexList.php
<img src="https://img2018.cnblogs.com/blog/1158021/201908/1158021-20190818182313586-1546808181.png" alt="">
1，轮播图homeSlide.php
<div class="cnblogs_code">
<pre><?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));
?></pre>
</div>
2，图文列表indexList.php
<div class="cnblogs_code">
<pre><?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));
?></pre>
</div>
四、渲染数据完整代码示例
<div class="cnblogs_code">
<pre><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 v-for="(item , index) in homeSlide" :key="index">
 
 <image :src="item.img" mode=""></image>
 </swiper-item>
 </swiper>
 </view>
 </view>
 </view>
 <view class="page-section indexListBox">
 
 <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></pre>
</div>
五、效果
原文链接：清空网络科技工作室
相关链接：Chrome 调试跨域问题解决方案之插件篇
本站相关：php+ajax简单实现跨域(http+https)请求调用

</div>
<div id="MySignature" role="contentinfo">
<hr style="height: 3px; border: none; border-top: 3px double red">
<div id="AllanboltSignature">
 <div>笔者：Chervehong</div>
 <div>地址：http://www.cnblogs.com/chervehong/</div>
 <div>本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 
本文仅是作者观点，如文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。 
如果觉得本文对你有所帮助不如【推荐】一下！ 
再次感谢您耐心的读完本篇文章。</div>
</div> 
来源：https://www.cnblogs.com/chervehong/p/11373231.html

頁: [1]

琼殿技术论坛's Archiver

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