标签：function 轮播 微信 data banner 首页 图片 Banner 请求

上一章我们把个人界面的登录获取用户信息以及展示都绘制好了，这一章的主要目的是来绘制一下首页的内容。

搜索框

我们先在顶部写一个搜索框，但是不在首页进行搜索操作，而是点击搜索框打开新的搜索页面进行搜索。

因为搜索框是需要进行页面跳转的，所以这里用一个navigator包裹起来，然后在里面放置一个icon组件，并将type设置为search。

这里需要了解一下icon组件，官网的说明比较简洁明了，这里就直接贴图和连接了。icon组件官方文档

所以搜索框的代码编写如下：

<!-- 搜索框 -->
<navigator class="search">
  <icon type="search" size="10"></icon>搜索
</navigator>

样式如下：

.search{
  width: 90vw;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #dddddd;
  margin: 30rpx auto;
  color: #bbb;
}

.search icon{
  margin-right: 10rpx;
}

效果图如下：

轮播图

一般一些比较突出的内容我们都会采用在首页使用轮播图进行显示的方法；这个项目也是如此，在首页轮播图显示一些比较重要的内容，或者推广内容。

因为这里还没有使用网络请求数据，所以先使用本地数据进行编写，后面会换成网络数据。

首先创建数据源：

  data: {
    bannerData:[{
      id:1,
      banner_img: "https://img3.doubanio.com/view/photo/1/public/p2563815623.webp"
    },{
      id:2,
      banner_img: "https://img3.doubanio.com/view/photo/1/public/p2563815623.webp"
    },{
      id:3,
      banner_img: "https://img3.doubanio.com/view/photo/1/public/p2563815623.webp"
    }]
  },

编写轮播图代码(因为这个代码之前已经有单张写过了，这里就不做过多解释了)：

<!-- 轮播图 
indicator-dots 开启圆点
indicator-color 未选中状态圆点颜色
indicator-active-color 选中状态圆点颜色
autoplay 自动播放
circular 采用衔接播放
-->
<view class="banner_box">
  <swiper class="banner" 
  indicator-dots="true"
  indicator-color="rbag(255,255,255,0.3)"
  indicator-active-color="#42db56"
  autoplay="true"
  circular="true">
    <block wx:for="{{bannerData}}" wx:key="{{index}}">
      <swiper-item>
        <navigator>
          <image src="{{item.banner_img}}"></image>
        </navigator>
      </swiper-item>
    </block>
  </swiper>
</view>

轮播图样式：

/*轮播图*/
.banner navigator{
  height: 100%;
  width: 100%;
}
.banner image{
  width: 100%;
  height: 100%;
}

效果图：

轮播图适配方案

我们都知道在编写轮播图的时候我们给定了固定宽高，比如width:100%,height:100rpx，这样就会导致原本高度大于100rpx的图片会被压缩变形，这就需要对轮播图进行适配，当然我们可以根据图片的宽高比来设置swiper的高度，这样会很麻烦，这里就不采用这种方法，而是采用小程序图片组件的裁剪属性进行设置。

我们先来到小程序图片组件官方文档查看iimage组件的属性，可以看到这里有mode这个属性

下面有mode的合法值

当我们设置mode值的时候会有各种各样的问题发生，比如只裁剪了中间区块进行显示，而上下区块没有用进行显示，这时候就又回到之前的说法，根据图片的宽高来设置swiper的宽高，小程序的image组件有一个bindload方法，表示在图片加载完成之后执行的操作，我们创建一个方法，获取图片的宽高

<image mode="widthFix" bindload="imgLoad" src="{{item.banner_img}}"></image>

获取图片宽高

  imgLoad: function(e) {
    // console.log(e.detail)
    var winWidth = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
    var imgWidth = e.detail.width; //图片宽度
    var imgHeight = e.detail.height; //图片高度
    this.setData({
      swiperHeight: winWidth * imgHeight / imgWidth + 'px'
    })
  }

将获取到的图片宽高设置给swiper，在swiper里面添加style=“height:{{swiperHeight}}”。

这时候就会发现swiper的高度会根据数组集合中高度最高的那种图片来设置，这就会造成高度没有最高那张高的图片会有空白区域显示，比如图片A高是100，图片C高是三百，那么在显示图片A的时候就会有200的空白区域，如下蓝色区块部分：

所以在做轮播图的时候，最好是将图片的宽高设置成一样的。。。。

小程序Request请求

我们在开发一个小程序的时候肯定不能一直使用本地数据，所以就需要涉及到获取网络数据进行展示。在使用request请求的时候我们要先看一下小程序官网网络API，看到wx.requset方法，可以看到官网文档给出了很多参数，我们需要格外注意url、data、method、success等参数，因为官方文档说的很清楚，这里就不对参数进行过多的解释了。

这里有几个点需要注意，在线上版本的时候网络请求的时候需要对域名进行配置，比如http://op.juhe.cn/onebox/movie/pmovie这个请求地址，我们需要对http://op.juhe.cn/这部分进行配置。

线上版本服务器域名配置

1.我们先要定位到微信公众平台-开发设置

2.然后找到服务器域名，将我们请求地址的域名http://op.juhe.con/配置上去就可以了

本地调试

上面配置了线上本班的域名，但是我们在本地开发调试的时候还是会报错，所以这里还需要对本地进行一下设置。

1.点击小程序开发工具右上角的详情按钮

2.选择本地设置，将不校验合法域名勾选上就可以了

本地调试配置好了就可以进行网络请求了。

测试网络请求

首先在index.js文件中创建一个获取banner列表的方法，并在方法体里面编写网络请求的代码：

  getBannerData: function(){
    wx.request({
    //请求地址
      url: 'http://op.juhe.cn/onebox/movie/pmovie',
      //请求参数
      data:{
        key:'a8b932b7661aee98fcb3c89984626302',
        city:'广州'
      },
      success: function(res){
        console.log(res);
      }
    })
  },

在onLoad方法中调用

  onl oad: function() {
    this.getBannerData()
  },

在控制台中就可以看到打印的数据了

数据源data下面的result就是我们需要返回到bannerData数据源里面去的数据。

api封装

从上面可以看到我们在请求网络的时候代码量还是比较多的，如果一个页面多几个网络请求的话就会显得代码很杂乱，所以我们就将网络请求部分拿出来，将其封装成一个工具类进行调用。

1.首先我们要在根创建一个新的文件夹，命名为utils，然后创建一个api.js的工具类

2.编写api的代码，先将域名提出来创建一个常量来接收

var host = 'http://op.juhe.cn';

3.创建请求方法体，传入对应参数，并返回一个Promise

4.最后将方法进行exports导出，到目前为止api.js的整体代码

var host = 'http://op.juhe.cn';

/**
 * 
 * @param {请求地址} url 
 * @param {请求方法 get  post} method 
 * @param {请求参数} data 
 * @param {请求头} header 
 */
function getData(url,method,data={},header={}){
  /**
   * resolve 成功的返回值
   * reject 失败的返回值
   */
  return new Promise(function(resolve,reject){
    wx.request({
      url: host+url,
      data:data,
      method:method,
      header:header,
      success: function(res){
        if(res.statusCode == 200){
          resolve(res.data);
        }else{
          reject('error');
        }
      },
      fail:function(e){
        reject(e);
      }
    })
  })
}

module.exports = {
  getData:getData
}

5.在index.js中进行调用的时候要先导入api.js模块

let api = require('../../utils/api.js');

6.调用

  onl oad: function() {
    this.getBannerData()
  },

  getBannerData: function(){
    api.getData('/onebox/movie/pmovie','get',{
      key: 'a8b932b7661aee98fcb3c89984626302',
      city: '广州'
    }).then(res =>{
      console.log(res);
    }),e=>{
      console.log(e);
    };
  },

到这就可以得出结果了。

标签：function,轮播,微信,data,banner,首页,图片,Banner,请求
来源： https://blog.csdn.net/theyangchoi/article/details/114275425

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。