微信小程序--操作示例2

                                       微信小程序--商城首页

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

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

例如：

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"
      })
  },