销售排行

本节讲解销售排行功能的“区域标题”和“产品列表”的界面实现。效果如图12-17所示。
08-微信小程序商城 销售排行(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)_小程序教程

1.应用知识点分析

应用知识点包括:
 一行2列的布局使用(左右两列,右侧1列3行)。
 本地.js脚本数据的设置和使用。
 远程数据的获取和本地显示。
下面我们会分3种方式来讲最新上架产品的实现方式。
第1种:纯页面布局的制作,适合纯前端人员。
第2种:本地.js脚本数据来实现销售排行产品的显示,适合全栈人员。
第3种:.js脚本获取远程数据来实现销售排行产品的显示,适合全栈人员。

2.布局分析

结构布局分析示意如图12-18所示。
08-微信小程序商城 销售排行(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)_微信小程序_02
根据上面的布局分析,我们会产生基础的框架,代码示例如下:

<navigator>  <!—第1-开始-->
<view>  <!—第2-开始 -->
        <image> </image><!—第3-图片-->  
<view>   <!—第3-开始 -->       
<text>  <text><!—第4-文字-->  
<text>  <text><!—第4-文字-->  
</view>   <!—第3-结束-->
</view >   <!—第2-结束-->
</ navigator >  <!—第1-结束-->

根据效果图分析出框架的层级后,在每个层级的view加上样式,编码实现即可。
 第1层:定义产品链接 navigator,无需样式。
 第2层:定义flex模式,默认从左到右排列。
 第3层:图片样式,多行文字的总体排列样式 。
 第4层:多行文字中每行文字的样式。

3.实现本地界面

.wxml文件代码示例如下:

<!-- 销售排行-区域标题-->
<view class='text'>
  <view class='line_y'></view>
  <text>精品推荐</text>
</view>
<navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class='paihang'>
    <image class="paihang-img" src='/img/cp01.jpg' />
    <view class='two-line-text'>
      <text class='txt1'>销售排行产品名称01</text>
      <text class="txt2">150g加量装(洗面奶 护肤化妆品</text>
      <text class="txt2">¥:368</text>
    </view>
  </view>
</navigator>

.wxss文件代码示例如下:

/* 销售排行 1行2列:左图片,右文字(多行文字) */
/* 第2层样式 */
.paihang{
    display: flex; /* felx模式,默认图片和文字区块,从左到右排列,也就是1行2列 */
    margin: 1rpx;
    border: #ddd solid 1px;  /* 每个产品信息下面的横线 */
    padding: 10rpx;
}
.paihang-img{
    width: 80px;
    height: 80px;
}
.two-line-text{
    padding: 3px;
    display: flex; /* 定义flex后,下面的属性才能生效 */
    flex-direction: column; /* 将默认的从左到右布局重新定义为从上到下的多行排列布局 */
}
.txt1{
    margin: 3px 3px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; color:  #09bb07;
}
.txt2{
    margin: 3px 3px;
    font-size: 13px;
    color: #656565;
    white-space: nowrap;
}
.txt3{
    margin: 3px 3px;
    font-size: 13px;
    color: #656565;
    white-space: nowrap;
}

4.实现本地数据

本节讲解如何在本地.js脚本初始化数据,然后在前端WXML中调用.js脚本的数据。
样式WXSS参考上节。.js脚本中的对象如何定义和调用,参考9.1.2节。 我们这里对样式不做修改,只修改:链接的参数、产品标题、产品副标题、价格。
.js文件代码示例如下:

data: {
    paihang01: [
      {
        "id": 2,
        "title": "销售排行产品名称02",
        "title2": "秋季补水套餐双11优惠",
        "jiage": "255.00",
        "shuoming": "自然堂",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp02.jpg"
      },
      {
        "id": 3,
        "title": "售排行产品名称03",
        "title2": "御泥坊面膜套餐-冬季套餐",
        "jiage": "299.00",
        "shuoming": "御泥坊面膜套餐",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp03.jpg"
      }
]
}

.wxml文件代码示例如下:

<!--  -->
<block wx:for-items="{{paihang01}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
    <view class='paihang'>
      <image class="paihang-img" src='{{item.img}}' />
      <view class='two-line-text'>
        <text class='text-center txt1'>{{item.title}}</text>
        <text class="text-center txt2">{{item.title2}}</text>
        <text class="text-center txt2">¥:{{item.jiage}}</text>
      </view>
    </view>
  </navigator>    
</block>

5.实现远程数据

上小节实现了本地.js脚本的数据化;这小节承接上小节,实现获取远程数据来填充本地的.js脚本数据。我们这里远程数据讲解的是通用JSON格式,你可以根据你实际的需求,使用PHP、.NET、Java、ASP等语言来实现动态(从数据库读取等)。
操作步骤如下:
步骤1:在.js脚本的data初始化代码中定义空的对象paihang02(后面用于存放销售排行产品)。
步骤2:定义一个函数fetchCpPaihang02,获取远程服务器端最新销售排行产品数据。
步骤3:将获取的最新销售排行产品内容,赋值给对象paihang02。
获取远程服务器内容,参见11.1.2节。远程最新通知的数据地址https://www.yaoyiwangluo.com/wx/cppaihang02.html。
远程数据代码示例如下:

[
      {
        "id": 4,
        "title": "销售排行产品名称04",
        "title2": "冰肌水(清润型)+乳液",
        "jiage": "255.00",
        "shuoming": "自然堂",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp04.jpg"
      },
      {
        "id": 5,
        "title": "售排行产品名称05",
        "title2": "御泥坊面膜套餐-冬季套餐",
        "jiage": "299.00",
        "shuoming": "面部护理+手部护理2合一套餐",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp05.jpg"
      }
]

.js文件代码示例如下:

data: {
	paihang02: []//定义空的对象cpjingpin02(后面用于存放最精品推荐的产品信息)
},
//函数定义完毕后,需要在页面加载的时候执行
fetchCpPaihang02: function () {
    var that =this;
    wx.request({ //获取远程服务器端数据
        url: "https://www.yaoyiwangluo.com/wx/cppaihang02.html",
        //第三步:将获取的最新销售排行产品内容,赋值给对象paihang02     
success: function (res) // res为系统参数
        {
         // res.data为远程获取后系统返回的内容,也就是Cpjingpin02.html的内容
         that.setData({paihang02: res.data }) //返回的内容,赋值给对象paihang02
        }
    })
},
onLoad: function (options) 
{    //定义的函数,需要执行才会将数据绑定
	this.fetchCpPaihang02();
},

.wxml文件代码示例如下:

<!--  -->
<block wx:for-items="{{paihang02}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
    <view class='paihang'>
      <image class="paihang-img" src='{{item.img}}' />
      <view class='two-line-text'>
        <text class='text-center txt1'>{{item.title}}</text>
        <text class="text-center txt2">{{item.title2}}</text>
        <text class="text-center txt2">¥:{{item.jiage}}</text>
      </view>
    </view>
  </navigator>    
</block>

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

(1)微信小程序学习路线 http://www.hzyaoyi.cn/

(2)Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

(3)PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

(4)微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/