微信小程序开发二

继续接着“微信小程序开发一”完善首页，在首页上添加商品展示区域。

一、修改/pages/main/main.wxml页面

添加下面代码片段，同时向/images/目录下添加图片sample1.jpg

    <view>
        <view><text>全部商品</text></view>
        <view>
          <image src="/images/sample1.jpg"></image>
        </view>
    </view>

为首页添加样式，调整页面布局，小程序的样式文件名与页面文件同名，只是扩展名为wxss,main.wxml的样式文件是main.wxss。
首先添加轮播图控件样式控制，可以限制轮播图片的高度和宽度

swiper {
  height: 300rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
}

默认可以使用wxml中标签名定义样式

    <swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
        <block wx:for="{{imgUrls}}" wx:key="{{index}}">
            <swiper-item>
                <image src="{{item}}" class="slide-image" width="100%"/>
            </swiper-item>
        </block>
    </swiper>

为总览图添加样式控制

.total-section{
  width: 100%;
  padding:10rpx 0;/*上下填充10rpx,左右填充0rpx*/
  height: 40rpx;
  color: rgb(233, 126, 114);
  text-align: center;/*文字居中*/
}

.total-image{
  width: 100%;
  height: 375rpx;
}
.total-image image{
  display: block;
  width: 100%;
  height: 100%;
}

修改wxml文件，使用定义的css样式

    <view>
        <view class="total-section"><text>全部商品</text></view>
        <view class="total-image">
          <image src="/images/sample1.jpg"></image>
        </view>
    </view>

二、添加商品展示区域

向/images目录下复制图片文件，同时添加商品展示代码片段

    <view>
        <view class="good-title"><text>最近新品</text></view>
        <view class="good-box">
            <view class="good-list">
                <navigator url="details/details">
                    <image src="/images/p1.jpg"></image>
                    <view class="good-text"><text>测试商品一</text></view>
                    <view class="good-text"><text>￥ 0.01</text></view>
                </navigator>
            </view>
            <view class="good-list">
                <navigator url="details/details">
                    <image src="/images/p2.jpg"></image>
                    <view class="good-text"><text>测试商品二</text></view>
                    <view class="good-text"><text>￥ 0.02</text></view>
                </navigator>
            </view>
        </view>
        <view class="good-box">
            <view class="good-list">
                <navigator url="details/details">
                    <image src="/images/p1.jpg"></image>
                    <view class="good-text"><text>测试商品三</text></view>
                    <view class="good-text"><text>￥ 0.01</text></view>
                </navigator>
            </view>
        </view>
    </view>

添加商品区域css样式控制

.good-box{
  padding:0 40rpx;/*上下填充0rpx,左右填充40rpx*/
}
.good-title{
  width: 100%;
  padding:10rpx 0;/*上下填充10rpx,左右填充0rpx*/
  height: 40rpx;
  color: rgb(233, 126, 114);
  text-align: center;/*文字居中*/
}
.good-box .good-list{
  display: inline-block;/*显示为内联块,顺序排列不换行*/
  width: 325rpx;
  height: 325rpx;
  margin:0 20rpx 20rpx 0;/*上边界0rpx,右边界20rpx,下边界20rpx,左边界0rpx*/
  border-radius: 10px;/*区域边界半径*/
  text-align: center;
  background: #f5f6f5;
}
.good-box .good-list:nth-child(2n){/*第偶数个元素*/
  margin-right: 0;
}
.good-box .good-list image{
  width: 175rpx;
  height: 175rpx;
  margin: 20rpx 0 10rpx;
}
.good-box .good-list .good-text{
  font-size: 32rpx;
}

三、商品区域动态化控制

商品区域通过后台服务控制，包括商品发布、商品下架、图片上传等功能，小程序需要通过HTTPS协议与后台服务交互信息。
在main.js中定义商品集合对象goodList:[],在onshow事件中通过https加载商品集合

const app = getApp()

Page({
  data: {
    imgUrls: [
      '/images/about1.jpg',
      '/images/about2.jpg',
      '/images/about3.jpg',
      '/images/about4.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 3000,
    duration: 800,
    goodList:[],
  },
  onLoad(){
  },
  onShow(){
    this.loadNewProduct();
  },
  loadNewProduct()
  {
    var self = this;
    wx.request({
      url: 'https://你的后台服务地址',
      data: {
        status: ''
      },
      success(res){
        wx.setStorageSync('goodList', JSON.stringify(res.data));
        self.setData({
          goodList: res.data
        })
      }
    })
  },
})

修改main.wxml页面，动态展示加载的商品信息

    <view>
        <view class="good-title"><text>最近新品</text></view>
        <view class="good-box">
            <block wx:for="{{goodList}}" wx:key="{{index}}">
                <view class="good-list">
                    <navigator url="details/details?prdtId={{item.id}}">
                        <image src="data:image/png;base64,{{item.imgData}}"></image>
                        <view class="good-text"><text>{{item.name}}</text></view>
                        <view class="good-text"><text>{{item.price}}</text></view>
                    </navigator>
                </view>
            </block>
        </view>
    </view>

图片数据使用后台提供Base64编码图片数据

请求后台服务，如果出现此错误，说明小程序后台没有添加访问域名白名单

登录到微信小程序后台，注册用户，创建一个小程序，设置可访问的后台域名
https://mp.weixin.qq.com/

后台服务返回商品集合对象类型为，其中imgData 为图片的Base64编码数据

package com.gf.erp.wx;

import java.math.BigDecimal;

public class WxPrdtInfo {
	private String id = null;
	private String name = null;
	private BigDecimal price = null;
	private String imgData = null;
	private String param = null;
	private String description = null;
	private String unit = null;
	private Long version = null;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public BigDecimal getPrice() {
		return price;
	}
	public void setPrice(BigDecimal price) {
		this.price = price;
	}
	public String getImgData() {
		return imgData;
	}
	public void setImgData(String imgData) {
		this.imgData = imgData;
	}
	public String getParam() {
		return param;
	}
	public void setParam(String param) {
		this.param = param;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getUnit() {
		return unit;
	}
	public void setUnit(String unit) {
		this.unit = unit;
	}
}

后台Controller方法

	@RequestMapping("/getprdt")
	public List<WxPrdtInfo> getPrdt(@RequestParam("status") String status)
	{
		status = Util.fmtStr(status);
		status = "%"+status+"%";
		List<WxProductInfo> lst = wxServ.getProductList(status);
		List<WxPrdtInfo> rtn = new ArrayList<WxPrdtInfo>();
		for(WxProductInfo pi:lst)
		{
			rtn.add(pi.copyTo());
		}
		return rtn;
	}