微信小程序开发二

痛定思痛。 2023-03-13 02:06 7阅读 0赞

继续接着“微信小程序开发一”完善首页，在首页上添加商品展示区域。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]  
为首页添加样式，调整页面布局，小程序的样式文件名与页面文件同名，只是扩展名为wxss,main.wxml的样式文件是main.wxss。  
首先添加轮播图控件样式控制，可以限制轮播图片的高度和宽度

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

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

为总览图添加样式控制

.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样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]

## 二、添加商品展示区域 ##

向/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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]

## 三、商品区域动态化控制 ##

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

修改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编码图片数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 4]  
请求后台服务，如果出现此错误，说明小程序后台没有添加访问域名白名单  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 5]  
登录到微信小程序后台，注册用户，创建一个小程序，设置可访问的后台域名  
https://mp.weixin.qq.com/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 7]

后台服务返回商品集合对象类型为，其中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;
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: /images/20230312/7d733465c41c4ee5a841ec34f8e393a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]: /images/20230312/280198c032304ded9b8b3de961eff94a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]: /images/20230312/a6400669bfea447cb5992c4608d3146f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]: /images/20230312/80e7a3422a4c48139b0c27a81d98a7dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 4]: /images/20230312/c1b1a650e0244e05a7eb78dff225488f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 5]: /images/20230312/b69dfca34c864884a9333546c6e94a0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 6]: /images/20230312/3708d483328b41bea4d6f0e168b55a68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 7]: /images/20230312/184ab0e115054c439aaa794fcd3e5a36.png