今天不知道怎么的，之前拿编程浪子地作品抄过来粘上用好好的，昨天开始照片突的就不显示了。
今天不妨再耐味地细细探究一下微信小程序wxml 和flask服务器端是怎么jpg图片数据交互的。
mina/pages/food/index.wxml
<!--index.wxml-->
<!--1px = 750/320 = 2.34rpx;-->
<view class="container">
<!--轮播图-->
<view class="swiper-container">
<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
<block wx:for="{{banners}}" wx:key="id">
<swiper-item>
<image bindtap="tapBanner" data-id="{{item.id}}" src="{{item.pic_url}}" class="slide-image" width="750rpx" height="562.5rpx" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{banners}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
<!--分类展示-->
<view class="type-container">
<scroll-view class="type-navbar" scroll-x="true">
<view class="type-box" wx:for-items="{{categories}}" wx:key="id">
<view id="{{item.id}}" class="type-navbar-item {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="catClick">
{{item.name}}
</view>
</view>
<!-- 这段代码是一个小程序中的一个视图组件，它使用了小程序的模板语法。具体来说，这段代码定义了一个视图组件，其中包含一个view标签，
该标签具有id属性和class属性，并且绑定了一个tap事件处理函数"catClick"。
在view标签内部，使用了双花括号语法来插入动态数据，其中item.id和item.name是动态的数据，根据实际情况进行渲染。-->
</scroll-view>
</view>
<!--搜索框-->
<view class="search-view" style="background:{{ scrollTop === 0 ?'-webkit-linear-gradient(top, rgba(105,195,170, 1), rgba(105,195,170, 0.3))' :( scrollTop<200 ? 'rgba(105,195,170,'+(scrollTop/400+0.3) +')' : 'rgba(105,195,170,1)') }} ">
<view class="search-content">
<image src="/images/search-pic.png" class="search-icon" />
<input placeholder="请输入搜索内容" class="search-input" maxlength="30" confirm-type="搜索" bindinput='listenerSearchInput'>
</input>
<button class='search-btn' bindtap="toSearch">搜索</button>
</view>
</view>
<view class="goods-container">
<!-- wx:for-items="{{goods}}" 是一个循环遍历的功能，将 goods 数组中的每个元素都渲染成一个 goods-box 组件。-->
<view class="goods-box" wx:for-items="{{goods}}" bindtap="toDetailsTap" data-id="{{item.id}}">
<view class="img-box">
<image src="{{item.pic_url}}" class="image" mode="aspectFill" lazy-load="true" />
</view>
<view class="goods-title">{{item.name}}</view>
<view style='display:flex;'>
<view class="goods-price">¥ {{item.min_price}}</view>
<view wx:if="{{item.price && item.price > 0 && item.min_price != item.price}}" class="goods-price" style='color:#aaa;text-decoration:line-through'>¥ {{item.price}}</view>
</view>
</view>
</view>
<view hidden="{{loadingMoreHidden ? true : false}}" class="no-more-goods">哥也是有底线的</view>
</view>如上例代码所示，图片的展示是通过一个image src='{{item.pic_url}}'标签引入的。通常情况下，item是一个对象或数组，它包含了多个属性，其中pic_url就是其中一个属性。在这个例子中，item.pic_url表示图片的URL地址，通过该地址可以加载并显示对应的图片。
总之，image 标签是小程序中用于显示图片的组件，通过 src="{{item.pic_url}}" 绑定了图片的地址。追根溯源，找goods数组是从哪里传来的。
goods数组是通过小程序端地js文件绑定的一个getBannerAndCat(）函数，并将其设置在onshow生命周期里，通过调用getFoodList()，自动进行的数据读取和刷新。
//解决切换不刷新维内托，每次展示都会调用这个方法
onShow:function(){
this.getBannerAndCat();
},问题： 这个item对象或数组从何而来？是小程序端的js文件吗？
mina/pages/food/index.js
//index.js
//获取应用实例
var app = getApp();
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
loadingHidden: false, // loading
swiperCurrent: 0,
categories: [],
activeCategoryId: 0,
goods: [],
scrollTop: "0",
loadingMoreHidden: true,
searchInput: '',
p:1,
processing:false
},
onLoad: function () {
var that = this;
wx.setNavigationBarTitle({
title: app.globalData.shopName
});
},
//解决切换不刷新维内托，每次展示都会调用这个方法
onShow:function(){
this.getBannerAndCat();
},
scroll: function (e) {
var that = this, scrollTop = that.data.scrollTop;
that.setData({
scrollTop: e.detail.scrollTop
});
},
//事件处理函数
swiperchange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},
listenerSearchInput:function( e ){
this.setData({
searchInput: e.detail.value
});
},
toSearch:function( e ){
this.setData({
p:1,
goods:[],
loadingMoreHidden:true
});
this.getFoodList();
},
// tapBanner是一个函数，它用于处理轮播图的点击事件具体的实现逻辑如下：
tapBanner: function (e) {
// 首先，通过e.currentTarget.dataset.id获取到当前点击的轮播图的id。
// 然后，判断id是否为0，如果不为0，则执行以下操作：
if (e.currentTarget.dataset.id != 0) {
// 使用wx.navigateTo函数进行页面跳转，跳转到指定的页面。
wx.navigateTo({
// 跳转的目标页面是"/pages/food/info"，并且通过url参数传递了点击轮播图的id，参数名为id。
url: "/pages/food/info?id=" + e.currentTarget.dataset.id
});
// 这段代码的作用是当用户点击轮播图，如果轮播图的id不为0，则跳转到指定的页面，并将点击轮播图的id作为参数传递给标页面。
}
},
// toDetailsTap是一个函数，它是在小程序中用于点击事件的回调函数。当触发点击事件时，会执行该函数。
toDetailsTap: function (e) {
// 该函数的作用是跳转到指定的页面。在函数内部，通过调用wx.navigateTo方法来实现页面跳转。
// 其中，url参数指定了跳转的目标页面路径，通过拼接字符串的方式将参数id传递给目标页面。
// 总结一下，toDetailsTap函数的作用是在点击事件发生时，跳转到指定的页面，并将参数id传递给目标页面。
wx.navigateTo({
url: "/pages/food/info?id=" + e.currentTarget.dataset.id
});
},
getBannerAndCat: function () {
var that = this;
// 使用微信小程序的wx.request方法发送一个请求。
wx.request({
// 请求的URL是通过app.buildUrl(“/food/index”)方法构建的
url: app.buildUrl("/food/index"),
// 请求头部信息通过app.getRequestHeader()方法获取
header: app.getRequestHeader(),
// 请求成功后，会将返回的数据保存在resp变量中。
success: function (res) {
var resp = res.data;
// 如果返回的code不等于200，会通过app.alert方法弹出一个提示框显示返回的错误信息，并结束函数的执行。
if (resp.code != 200) {
app.alert({"content": resp.msg});
return;
}
// 如果返回的code等于200，会将返回的banner_list和cat_list数据分别保存在banners和categories变量中，
that.setData({
banners: resp.data.banner_list,
categories: resp.data.cat_list
});
// 并调用getFoodList方法
that.getFoodList();
}
});
},
// 这段代码是一个小程序中的一个函数，名为catClick。它的作用是在点击某个分类时，根据点击的分类id更新数据，并调用getFoodList函数获取对应分类的商品列表。
catClick: function (e) {
this.setData({
// 通过e.currentTarget.id获取点击的分类id。
activeCategoryId: e.currentTarget.id
});
// 使用setData方法更新数据，将activeCategoryId设置为点击的分类id。
this.setData({
// 将loadingMoreHidden设置为true，p设置为1（表示当前页数为1），goods设置为空数组（清空商品列表）。
loadingMoreHidden: true,
p:1,
goods:[]
});
// 调用getFoodList函数获取对应分类的商品列表。
this.getFoodList();
},
onReachBottom: function () {
var that = this;
setTimeout(function () {
that.getFoodList();
}, 500);
},
// 通过发送请求获取食品列表，并将获取到的数据更新到页面上。
getFoodList: function () {
var that = this;
// 首先，函数会检查是否正在处理其他请求，如果是，则直接返回，避免重复请求。
if( that.data.processing ){
return;
}
// 接着，函数会检查是否还有更多数据需要加载，如果没有，则直接返回。
if( !that.data.loadingMoreHidden ){
return;
}
// 然后，函数会将processing标志设置为true，表示正在处理请求。
that.setData({
processing:true
});
// 接下来，函数会发送一个请求到服务器，请求的URL是"/food/search"，并且会带上一些参数，
// 如cat_id（食品分类ID）、mix_kw（搜索关键词）、p（页码）等。
wx.request({
url: app.buildUrl("/food/search"),
header: app.getRequestHeader(),
data: {
cat_id: that.data.activeCategoryId,
mix_kw: that.data.searchInput,
p: that.data.p,
},
// 当服务器返回响应时，函数会判断响应的状态码是否为200，如果不是，则弹出一个提示框显示错误信息，并返回。
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({"content": resp.msg});
return;
}
// 如果响应的状态码为200，则从响应数据中获取到食品列表，并将其与之前已有的食品列表进行合并。
var goods = resp.data.list;
that.setData({
goods: that.data.goods.concat( goods ),
p: that.data.p + 1,
//最后，函数会更新页面上的数据，包括goods（食品列表）、p（页码）和processing（处理状态），
// 并将processing标志设置为false，表示请求处理完成。
processing:false
});
// 判断变量resp.data.has_more的值是否为0。如果resp.data.has_more的值为0，
// 则执行setData方法，将loadingMoreHidden属性设置为false。
if( resp.data.has_more == 0 ){
that.setData({
loadingMoreHidden: false
});
}
}
});
}
});
那接下来，就去flask服务器端看看/food/search路由是什么情况，图片传参是怎么传的。
web/controllers/api/Food.py
@route_api.route("/food/search" )
def foodSearch():
resp = {'code': 200, 'msg': '操作成功~', 'data': {}}
req = request.values
cat_id = int( req['cat_id'] ) if 'cat_id' in req else 0
mix_kw = str(req['mix_kw']) if 'mix_kw' in req else ''
p = int( req['p'] ) if 'p' in req else 1
if p < 1:
p = 1
page_size = 10
offset = ( p - 1 ) * page_size
query = Food.query.filter_by(status=1 )
if cat_id > 0:
query = query.filter_by(cat_id = cat_id)
if mix_kw:
rule = or_(Food.name.ilike("%{0}%".format(mix_kw)), Food.tags.ilike("%{0}%".format(mix_kw)))
query = query.filter(rule)
food_list = query.order_by(Food.total_count.desc(), Food.id.desc())\
.offset( offset ).limit( page_size ).all()
data_food_list = []
if food_list:
for item in food_list:
tmp_data = {
'id': item.id,
'name': "%s"%( item.name ),
'price': str( item.price ),
'min_price':str( item.price ),
'pic_url': UrlManager.buildImageUrl(item.main_image)
}
data_food_list.append(tmp_data)
resp['data']['list'] = data_food_list
resp['data']['has_more'] = 0 if len( data_food_list ) < page_size else 1
return jsonify(resp)common/libs/UrlManager.py
# -*- coding: utf-8 -*-
import time
from app import app
class UrlManager(object):
def __init__(self):
pass
@staticmethod
def buildImageUrl( path ):
app_config = app.config['APP']
url = app_config['domain'] + app.config['UPLOAD']['prefix_url'] + path
return url
