防采集标记,黄菊华老师作品，盗版必究

wxml代码

<!--轮播：远程数据（图片地址+连接地址）【对象数组，数组中的每个元素包含图片地址+链接地址】-->
<view ><!--swiper属性里面的设置相比上面，多了个if判断是否显示，jieguo=true; jieguo2=false-->
<!--远程数据地址：http://phpshop.yaoyiwangluo.com/wx_lunbo.php-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" 
        interval="{{interval}}" duration="{{duration}}" > 
  <block wx:for="{{images2}}" wx:key="a002" style='height:120px;'>
    <!--给每个swiper-item外围添加了链接-->
    <navigator url='{{item.dizhi}}'>
      <swiper-item>
        <image src="{{item.tupian}}" class="slide-image2" />
      </swiper-item>
    </navigator>
  </block>
</swiper>
</view>

<!--快捷菜单-->
<view class='menu'>

  <navigator url='/pages/gongyong/chanpin_list' class='menu-item'>
    <image src='/img/menu01.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>所有产品</text>
  </navigator>

  <navigator url='/pages/fenlei/index'  open-type="switchTab" class='menu-item'>
    <image src='/img/menu02.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>产品分类</text>
  </navigator>

  <!--
    navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
    open-type="navigate"等价于API的　wx.navigateTo　而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径
    open-type="redirect"等价于API的　wx.redirectTo　而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径
    open-type="switchTab"等价于API的　wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    最后一个switchTab事件触发以后　把前面的页面都关闭了  
  -->
  <!--
    原理：判断用户是否登录，登录则链接到用户中心的首页；没有登录则链接到用户登录页面（tabBar页面）
    逻辑：user_id（用户登录的数字id）初始为0；读取缓存中的u_id的值；如果有则赋值给user_id（大于0的数字）
  -->
  <navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/index2' class='menu-item'>
    <image src='/img/menu03.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>用户中心</text>
  </navigator>
  <!--会员登录页面/pages/huiyuan/index是tabBar页面，所以需要添加 open-type="switchTab"-->
  <navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'>
    <image src='/img/menu03.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>用户中心</text>
  </navigator>

  <!--订单列表的链接 处理同上 用户中心-->
  <navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/dingdan/dingdan_list' class='menu-item'>
    <image src='/img/menu04.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>订单列表</text>
  </navigator>
  <navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'>
    <image src='/img/menu04.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>订单列表</text>
  </navigator>

  <navigator url='/pages/guanyu/fangkui' class='menu-item'>
    <image src='/img/menu05.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>留言反馈</text>
  </navigator>
  
  <!---php版本下面id对应为 236，237，236-->
  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=236&mc=帮助中心' class='menu-item'>
    <image src='/img/menu06.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>帮助中心</text>
  </navigator>

  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=237&mc=平台介绍' class='menu-item'>
    <image src='/img/menu07.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>平台介绍</text>
  </navigator>

  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=241&mc=活动列表' class='menu-item'>
    <image src='/img/menu08.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>活动列表</text>
  </navigator>

</view> 

<!--获取web网站后台发布的最新3条信息-->
<!--远程地址：http://phpshop.yaoyiwangluo.com/wx_news_list.php 【对象数组】-->
<block wx:for="{{xinxis}}" wx:key="myid">
  <navigator url='/pages/gongyong/xinxi_info?cs_xxid={{item.myid}}' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
  </navigator>
</block>

<!--区块标题-最新上架产品; 更多链接到所有产品页面-->
<view class='qukuai'>
  <view class='y01'></view>
  <text class='t01'>最新产品</text>
  <navigator url="/pages/gongyong/chanpin_list"  class='m01'>所有产品></navigator>
</view>

<!--最新上架商品-->
<view class='zuixin'>
  <!--远程数据（对象数组）：http://www.yaoyiwangluo.com/wx_CpList_top4.asp-->
  <!--获取的远程数据赋值给数组变量：zuixins；然后循环显示该数组的内容-->
  <block wx:for="{{zuixins}}" wx:key="cp_id">
    <!--每个产品会链接到详细页面，需要的参数：产品id+产品名称-->
    <navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'>
      <image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image>
      <text class='zuixin-mc'>{{item.cp_mingcheng}}</text>
      <view>
        <text class='zuixin-jiage0'>价格：¥</text>
        <text class='zuixin-jiage1'>{{item.jiage}}</text>
        <text class='zuixin-jiage2'></text>
      </view>
    </navigator>
  </block>
</view>

<!--销售排行-标题区块-->
<view class='qukuai'>
  <view class='y01'></view>
  <text class='t01'>推荐商品</text>
  <navigator url="/pages/gongyong/chanpin_list"  class='m01'>所有产品></navigator>
</view>
<!--销售排行-商品列表-->
<block wx:for="{{tuijians}}" wx:key="cp_id">
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'>
  <view class='paihang-tupian'>
    <image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image>
  </view>
  <view class='paihang-xinxi'>
    <text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text>
    <text class='paihang-jianjie'>产品简介</text>
    <view>
      <text class='paihang-xuhao'>No.{{index+1}}</text>
      <text class='paihang-xiaoshou'> | 456人付款 | </text>
      <text class='paihang-jiage0'> ¥</text>
      <text class='paihang-jiage1'> {{item.jiage}}</text>
    </view>
  </view>
</navigator>
</block>

wxss代码

/*广告图样式*/

.ad01 {
  box-shadow: 0px 2px 2px gainsboro; /*阴影*/
  margin: 2px; /*外边距*/
}

.ad01-img {
  width: 100%;
}

/*轮播图样式*/
.slide-image {
  height: 120px;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

.slide-image2 {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

/*快捷菜单*/

.menu {
  display: flex;
  flex-wrap: wrap; /*换行*/
  border-bottom: 1px solid gainsboro; /*菜单最下面线条*/
}

.menu-item {
  width: 25%; /*1行4个菜单*/
  padding: 5px; /*内边距*/
  box-sizing: border-box;
  display: flex;
  justify-content: center; /*左右居中*/
  flex-direction: column; /*从上到下*/
}

.menu-img {
  width: 66%;
  align-self: center;
}

.menu-mc {
  font-size: 14px;
  align-self: center;
}

.xinxi {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #f2f2f2;
}

.xinxi-icon {
  width: 22px;
  height: 22px;
}

.xinxi-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xinxi-arrow {
  width: 13px;
  height: 13px;
}

/*区块标题*/

.qukuai {
  display: flex;
  background-color: aliceblue;
  align-items: center;
}

.y01 {
  width: 3px;
  height: 18px;
  background-color: green;
  margin: 5px;
  box-shadow: 2px 2px 2px gainsboro;
}

.t01 {
  color: gray;
  flex-grow: 1;
  text-shadow: 1px 1px 1px gainsboro;
}

.m01 {
  color: gray;
  margin-right: 5px;
  text-shadow: 2px 2px 2px gainsboro;
}

.zuixin {
  display: flex;
  flex-wrap: wrap;
}

.zuixin-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
  border-bottom: 1px dotted gainsboro;
}

.zuixin-img {
  width: 100%;
  border: 1px solid #fcfafa;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
  padding: 5px;
  box-sizing: border-box;
}

.zuixin-mc {
  font-size: 12px;
  padding: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuixin-jiage0 {
  font-size: 10px;
  padding: 3px;
  color: red;
}

.zuixin-jiage1 {
  font-size: 14px;
  padding: 3px;
  color: red;
}

.zuixin-jiage2 {
  font-size: 11px;
  padding: 3px;
  color: gray;
}

/*销售排行*/

.paihang-item {
  display: flex;
  padding: 5px;
  width: 100%;
}

.paihang-tupian {
  width: 25%;
}

.paihang-img {
  width: 100%;
  border: 1px solid gainsboro;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
}

.paihang-xinxi {
  width: 75%;
  margin-left: 5px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.paihang-mingcheng {
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.paihang-jianjie {
  font-size: 11px;
  color: gray;
  margin: 3px 0;
}

.paihang-xuhao {
  color: green;
  font-size: 13px;
}

.paihang-xiaoshou {
  font-size: 11px;
  color: gray;
}

.paihang-jiage0 {
  font-size: 10px;
  color: red;
}

.paihang-jiage1 {
  font-size: 13px;
  color: red;
}