微信小程序--商城首页
我们首先有一个商城的接口
调用商城中首页所需要的一些数据
例如：
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.resultvar 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"})},
