微信小程序商城首页

我们首先有一个商城的接口 

调用商城中首页所需要的一些数据

例如：

onLoad: function () {    var that = this;    //请求服务器时间戳    wx.request({        url: 'http://www.tp.com/index.php?m=Api&c=Base&a=getServerTime', //请求地址        success: function(res) {                //写入时间                console.log(res.data.result)                wx.setStorage({                    key:"time",                    data:res.data.result                })                //获取首页面                var unique_id = '12121221'                var time = res.data.result                var sign = util.hexMD5(unique_id+time+"tp-shop");                console.log(sign)                wx.request({                    url: 'http://www.tp.com/index.php?m=Api&c=Index&a=home', //仅为示例，并非真实的接口地址                    method:'POST',                                        //签名                    data: {                        unique_id:unique_id,                        time:time,                        sign:sign                    },                    header: {                        'content-type':'application/x-www-form-urlencoded'                    },                    success: function(res) {                        console.log(res.data)                        that.setData({                            imgUrls:res.data.result.ad,                            list:res.data.result['goods'][0]['goods_list']                        })                    }                })                            }    })  },

在此我们要签名认证，我们需要了解商城中是如何签名的。

当我们调用之后我们需要使用js的形式写入到展示页面中样式自定义

例：

<view><!--轮播图--><swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}">    <swiper-item>      <image src="{{item.ad_code}}" style="width:100%; height: 168.16px;"  class="slide-image" width="100%"/>    </swiper-item>  </block></swiper><!--搜索--><view id="fake-search" class="index_search" >  <view class="index_search_mid" >    <view id='span'>         <image src="../../public/imgage/icosousuo.png"></image>    </view>    <input type="text" id="search_text"  bindtap="seek" class="search_text" value="请输入您所搜索的商品"/>  </view></view><!--小图标--><view id="fake-search" class="entry-list clearfix"><nav><ul><li><a href="/index.php/Mobile/Goods/categoryList.html"><image alt="全部分类" src="../../public/imgage/1440437165699930301.png" bindtap="sort"></image><span>全部分类</span></a></li> <li><a href="/index.php/Mobile/Activity/group_list.html"><image src="../../public/imgage/1440439318451279676.png" bindtap="group"></image><span>团购</span></a></li><li><a href="/index.php/Mobile/Cart/cart.html"><image alt="购物车" src="../../public/imgage/1440439353048484531.png" bindtap="cart"></image><span>购物车</span></a></li><li><a href="">   <image src="../../public/imgage/1440439367001464442.png" bindtap="show" ></image> <span>个人中心</span>      </a></li></ul></nav></view><!--楼层--><view class="index_floor_lou">    <view class="floor_body">       <view class="h2" style="color:#616161; font-size:14px;">             促销商品            <view class="geng">                <a href="">                更多                </a>            <span>            </span>            </view>       </view>          <view id="scroll_promotion"  class="tempWrap" style="overflow:hidden; position:relative;">              <ul>              <block wx:for="{{list}}" wx:for-item="k" wx:key="v">                    <li>                        <a href="/index.php/Mobile/Goods/goodsInfo/id/136.html" ></a>                      <view class="index_pro">                        <a href="/index.php/Mobile/Goods/goodsInfo/id/119.html">                             <view class="products_kuang">                                <view class="timerBox" id="surplus_text119">                                  活动已结束                                </view>                                <image src="{{k.original_img}}"></image>                            </view>                            <view class="goods_name">                               {{k.goods_name}}                            </view>                        </a>                            <view class="price">                                  <a href="javascript:AjaxAddCart(119,1,0);" class="btns">                                     <image src="../../public/imgage/cart.png"></image>                                  </a>                                <span class="price_pro">￥{{k.shop_price}}</span>                            </view>                      </view>                    </li>                </block>                     </ul>          </view>    </view></view></view>

我们也可定义如下图的菜单栏：

代码如下：

//搜索  seek:function(){      console.log(1231223131)      wx.navigateTo({        url: '/pages/seek/seek'      })  },//个人中心  show:function(){      wx.switchTab({         url: "/pages/show/show"      })  },//购物车  cart:function(){      wx.switchTab({         url: "/pages/cart/cart"      })  },//全部分类  sort:function(){      console.log(1231223131)      wx.switchTab({         url: "/pages/sort/sort"      })  },