微信小程序请求接口轮播图！！

最近小程序特别火，笔者也来一探究竟！

 这次我们采用了tpshop开元框架与微信小程序接口写了一个简单的轮播图栗子！

效果展示：

实现思路：

 

   通过小程序post请求调取toshop接口返回json数据，之后利用小程序标签swiper 来实现轮播图效果！！！

代码示例：

   准备工作：

         因为我们要使用md5来加密生成与接口的秘钥而js中没有php md5方法，所以我们需要添加一个小程序版的md5.js 文件

         md5.js  点击打开链接

        因为我们post提交值   但是我们传值必须要转译一下所以我们在util.js文件中加入以下代码：

 

function json2Form(json) { 
  var str = []; 
  for(var p in json){ 
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p])); 
  } 
  return str.join("&"); 
} 

module.exports = { 
 json2Form:json2Form, 
}

  下面展示代码：

  index.js 请求接口

 

//index.js
//获取应用实例
// pages/shop/index.js
var utilMd5 = require('../../utils/md5.js');  
var util = require('../../utils/util.js'); 
Page({
  data:{
      duration: 2000,
      indicatorDots: true,
      autoplay: true,
      interval: 4000,
      loading: false,
      plain: false
  },
  onLoad:function(options){
    //获去轮播信息 
    var that = this;
    var username = '13800138006';
    var password = '123456';
    var unique_id = '789789';
    var key = 'shop';
    var time = Date.now();    
    var sign = utilMd5.hexMD5(password+unique_id+username+time+key); 
    console.log(time);
    console.log(sign);
    // that = this; 
    wx.request( {  
      url: "http://www.mytpshop.com/index.php?m=Api&c=Index&a=home",  
      header: {  
        "Content-Type": "application/x-www-form-urlencoded"  
      },  
      method: "POST",
      data: util.json2Form( { 
        username: username, 
        password: password,
        unique_id: unique_id,
        time : time,
        sign : sign 
        }),  
      success: function(res) {
        that.setData({
           bannerImg: res.data.result.ad,
          
           goodsList: res.data.result.goods
        })
       console.log(res.data)
       console.log(res.data.result.ad),
       console.log(res.data.result.goods)
      }
    })








    // 页面初始化 options为页面跳转所带来的参数
  },
 
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
  
})

  index.wxml

<!--index.wxml-->
<!--轮播 -->
<view class="banner" >
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{bannerImg}}" wx:key="{{banner}}">
      <swiper-item class="banner" >
          <image src="{{item.ad_code}}" data-id="{{item.ad_link}}"  bindtap="bindViewTap" class="banner-image" />
           <!--<text class="banner-title">{{item.ad_name}}</text>-->
      </swiper-item>
    </block>
</swiper>
</view>

index..wxss

.swiper{
  width:100%;
  height:300rpx
}

swiper image{ 
   width:100%;
   height:300rpx
}

之后就完成操作了！！！！！！