10.2.3 最新产品

本小节讲解如何获取最新产品的数据并显示，效果如图10-4。

开发分析

第1步：查看和测试接口的内容。

第2步：在程序的data代码块初始化变量chanpin，用于存放最新产品数据。

第3步：在程序的methods代码块中自定义方法GetCp，用于获取接口的最新产品数据。

第4步：在程序的mounted代码块中调用方法GetCp，获取数据。

第5步：改造布局代码，将获取的最新产品数组信息循环显示出来。

第1步：查看和测试接口

地址

​​

​​

返回值类型

对象数组，每一个数组的元素是一个对象，每个对象代表一个产品的信息。

返回值

[
{
    "id" : 45,
    "title" : "测试产品19",
    "shijian" : "2020-04-24",
    "shuoming" : "产品分类1",
    "img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271027100000002810.jpg"
},     
{
    "id" : 44,
    "title" : "测试产品18",
    "shijian" : "2020-04-23",
    "shuoming" : "产品分类1",
    "img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271026510000001145.jpg"
},     
{
    "id" : 43,
    "title" : "测试产品17",
    "shijian" : "2020-04-23",
    "shuoming" : "产品分类1",
    "img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271026300000005568.jpg"
},     
{
    "id" : 42,
    "title" : "测试产品16",
    "shijian" : "2020-04-23",
    "shuoming" : "产品分类1",
    "img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271026010000005206.jpg"
}
]

第2,3,4步：获取数据

<script>
export default {
  data() {
    return {
      chanpin:[], //初始化为空，数组，存放最新产品数据 
    }
  },
  onLoad() {

  },
  mounted:function(){
    this.GetCp();     //调用获取最新产品的方法 
  },
  methods: {
        //自定义方法：获取最新产品
        GetCp:function(){ 
            //调用uni-app的api获取远程服务器数据
            uni.request({
                //http://qiyephp.yaoyiwangluo.com/h5/wx_api_CpList_top4.php
                url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpList_top4.php",
                //success:function(res) 不能获取
                success:(res) =>{
                    this.chanpin = res.data;//返回值赋值给变量
                    //console.log("返回产品数据："+this.chanpin)
                }
            })
        },//获取最新产品 结束       
  }
}
</script>

第5步：显示数据

<!--最新产品-->
<view class='cp_zuixin'> 
  <!--通过接口获取最新产品数据，然后循环显示-->
  <!--变量chanpin，存放的是通过接口获取的最新产品数据（数组）-->
  <!--url属性里面的内容是要跳转的产品详细页面+参数-->
  <!--参数cp_id：产品id，参数cp_mc：产品名称-->
  <navigator :url="'/pages/b/cp_info/cp_info?cp_id='+cp.id+'&cp_mc='+cp.title"
  class='cp-xiangmu' v-for="cp in chanpin" :key="cp.id">
    <image v-bind:src="cp.img" class='cp_tupian' mode='widthFix'></image><!--产品图片-->
    <text class='cp-biaoti'>{{cp.title}}</text><!--产品标题-->
  </navigator>
</view>