小程序请求接口轮播

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

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

效果展示： 

实现思路：

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

代码示例： 
准备工作：

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

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

1. function json2Form(json) {
2. var str = [];
3. for(var p in json){
4. str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
5. }
6. return str.join("&");
7. }
8.  
9. module.exports = {
10. json2Form:json2Form,
11. }

下面展示代码：  index.js 请求接口

1. //index.js
2. //获取应用实例
3. // pages/shop/index.js
4. var utilMd5 = require('../../utils/md5.js');
5. var util = require('../../utils/util.js');
6. Page({
7. data:{
8. duration: 2000,
9. indicatorDots: true,
10. autoplay: true,
11. interval: 4000,
12. loading: false,
13. plain: false
14. },
15. onLoad:function(options){
16. //获去轮播信息
17. var that = this;
18. var username = '13800138006';
19. var password = '123456';
20. var unique_id = '789789';
21. var key = 'shop';
22. var time = Date.now();
23. var sign = utilMd5.hexMD5(password+unique_id+username+time+key);
24. console.log(time);
25. console.log(sign);
26. // that = this;
27. wx.request( {
28. url: "https://www.mytpshop.com/index.php?m=Api&c=Index&a=home",
29. header: {
30. "Content-Type": "application/x-www-form-urlencoded"
31. },
32. method: "POST",
33. data: util.json2Form( {
34. username: username,
35. password: password,
36. unique_id: unique_id,
37. time : time,
38. sign : sign
39. }),
40. success: function(res) {
41. that.setData({
42. bannerImg: res.data.result.ad,
43.  
44. goodsList: res.data.result.goods
45. })
46. console.log(res.data)
47. console.log(res.data.result.ad),
48. console.log(res.data.result.goods)
49. }
50. })
51.  
52.  
53.  
54. // 页面初始化 options为页面跳转所带来的参数
55. },
56.  
57. onReady:function(){
58. // 页面渲染完成
59. },
60. onShow:function(){
61. // 页面显示
62. },
63. onHide:function(){
64. // 页面隐藏
65. },
66. onUnload:function(){
67. // 页面关闭
68. }
69.  
70. })

index.wxml

1. <!--index.wxml-->
2. <!--轮播 -->
3. <view class="banner" >
4. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
5. <block wx:for="{{bannerImg}}" wx:key="{{banner}}">
6. <swiper-item class="banner" >
7. <image src="{{item.ad_code}}" data-id="{{item.ad_link}}" bindtap="bindViewTap" class="banner-image" />
8. <!--<text class="banner-title">{{item.ad_name}}</text>-->
9. </swiper-item>
10. </block>
11. </swiper>
12. </view>

index..wxss

1. .swiper{
2. width:100%;
3. height:300rpx
4. }
5.  
6. swiper image{
7. width:100%;
8. height:300rpx
9. }

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