失眠网 > 07-微信小程序商城精品推荐（微信小程序商城开发小程序毕业设计小程序源代码）

07-微信小程序商城精品推荐（微信小程序商城开发小程序毕业设计小程序源代码）

时间：2023-05-30 04:04:43

精品推荐

本节讲解精品推荐“区域标题”和“产品列表”的界面实现。效果如图12-15所示。

1.应用知识点分析

应用知识点包括：

 一行2列的布局使用。

 本地.js脚本数据的设置和使用。

 远程数据的获取和本地显示。

下面我们会分3种方式来讲最新上架产品的实现方式。

第1种：纯页面布局的制作，适合纯前端人员。

第2种：本地.js脚本数据来实现精品推荐产品的显示，适合全栈人员。

第3种：.js脚本获取远程数据来实现精品推荐产品的显示，适合全栈人员。

2.布局分析

结构布局分析示意如图12-16所示。

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view> <!—第1层-开始：定义flex模式--><navigator> <!—第2层-开始 --><view> <!—第3层-开始 --> <image> </image><!—第4层-图片--> <text> <text><!—第4层-文字--> <text> <text><!—第4层-文字--> </view> <!—第3层-结束--></navigator> <!—第2层-结束--></view> <!—第1层-结束-->

根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可：

 第1层：定义flex模式，默认从左到右排列。

 第2层：定义产品链接 navigator。

 第3层：定义里面产品和图片的显示模式，从上到下显示。

 第4层：对图片和文字单独定义样式。

2.实现本地界面

.wxml文件代码示例如下：

<view class='text'><view class='line_y'></view><text>精品推荐</text></view><view class="tuijians"><navigator url=''><view class="tuijian-item" ><image src='/img/cp01.jpg' class="tuijian-image"/><text>产品名称01</text><text class='bg01'>¥：368</text></view> </navigator><navigator url=''><view class="tuijian-item" ><image src='/img/cp02.jpg' class="tuijian-image"/><text>产品名称01</text><text class='bg01'>¥：368</text></view></navigator></view>

.wxss文件样式代码示例如下：

/*精品推荐-1行2列图片*/.tuijians {display: flex;}.tuijians navigator{width:50%;}.tuijian-item {width: 100%;display: flex;align-items: center;flex-direction: column;padding: 20rpx;}.tuijian-image {width: 330rpx;height: 330rpx;}.tuijian-item text {padding-top: 10rpx;font-size: 25rpx; text-align: left;width: 100%;}.bg01{background: #d9d9d9;}

3.实现本地数据

本节讲解如何在本地小程序的.js文件中初始化数据，然后在前端WXML中调用.js脚本的数据。

样式WXSS参考上节。.js脚本中的对象如何定义和调用，参考9.1.2节。我们这里对样式不做修改，只修改：链接的参数、信息时间、信息标题。

.js文件代码示例如下：

data: {cpjingpin01: [{"id": 3,"title": "产品名称03","jiage": "155.00","shuoming": "自然堂","img": "/wx/img/cp04.jpg"},{"id": 4,"title": "产品名称04","jiage": "199.00","shuoming": "御泥坊","img": "/wx/img/cp05.jpg"}}

.wxml文件代码示例如下：

<view class="tuijians"><block wx:for-items="{{cpjingpin01}}" wx:key="name" ><navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'><view class="tuijian-item" ><image src='{{item.img}}' class="tuijian-image"/><text>{{item.title}}</text><text class='bg01'>¥：{{item.jiage}}</text></view> </navigator></block></view>

4.实现远程数据

上小节实现了本地.js脚本的数据化；这小节承接上小节，实现获取远程数据来填充本地的.js脚本数据。

我们这里远程数据讲解的是通用JSON格式，你可以根据实际的需求，使用PHP、.NET、Java、ASP等语言来实现动态（从数据库读取等）。

操作步骤如下：

步骤1：在.js脚本的data初始化代码中定义空的对象cpjingpin02（后面用于存放精品推荐产品）。

步骤2：定义一个函数fetchCpjingpin02，获取远程服务器端最新精品推荐产品。

步骤3：将获取的最新精品推荐产品内容，赋值给对象cpjingpin02。

获取远程服务器内容，参见11.1.2节。

远程最新通知的数据地址/wx/Cpjingpin02.html。

代码示例如下：

[{"id" : 5,"title" : "产品名称05","jiage" : "325.00","shuoming" : "自然堂","img" : "/wx/img/cp07.jpg"},{"id" : 6,"title" : "产品名称06","jiage" : "399.00","shuoming" : "御泥坊","img" : "/wx/img/cp08.jpg" } ]

.js文件代码示例如下：

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

.wxml文件代码示例如下：

<view class="tuijians"><block wx:for-items="{{cpjingpin02}}" wx:key="name" ><navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'><view class="tuijian-item" ><image src='{{item.img}}' class="tuijian-image"/><text>{{item.title}}</text><text class='bg01'>¥：{{item.jiage}}</text></view> </navigator></block></view>

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中