网站开发模板教务管理,传奇游戏网站,多层次网络营销合法吗,win7安装wordpress今天不知道怎么的#xff0c;之前拿编程浪子地作品抄过来粘上用好好的#xff0c;昨天开始照片突的就不显示了。
今天不妨再耐味地细细探究一下微信小程序wxml 和flask服务器端是怎么jpg图片数据交互的。
mina/pages/food/index.wxml
!--index.wxml--
!--1px … 今天不知道怎么的之前拿编程浪子地作品抄过来粘上用好好的昨天开始照片突的就不显示了。
今天不妨再耐味地细细探究一下微信小程序wxml 和flask服务器端是怎么jpg图片数据交互的。
mina/pages/food/index.wxml
!--index.wxml--
!--1px 750/320 2.34rpx;--
view classcontainer!--轮播图--view classswiper-containerswiper classswiper_box autoplay{{autoplay}} interval{{interval}} duration{{duration}} bindchangeswiperchangeblock wx:for{{banners}} wx:keyidswiper-itemimage bindtaptapBanner data-id{{item.id}} src{{item.pic_url}} classslide-image width750rpx height562.5rpx //swiper-item/block/swiperview classdotsblock wx:for{{banners}} wx:keyuniqueview classdot{{index swiperCurrent ? active : }}/view/block/view/view!--分类展示--view classtype-containerscroll-view classtype-navbar scroll-xtrueview classtype-box wx:for-items{{categories}} wx:keyidview id{{item.id}} classtype-navbar-item {{activeCategoryId item.id ? type-item-on : }} bindtapcatClick{{item.name}}/view/view
!-- 这段代码是一个小程序中的一个视图组件它使用了小程序的模板语法。具体来说这段代码定义了一个视图组件其中包含一个view标签该标签具有id属性和class属性并且绑定了一个tap事件处理函数catClick。在view标签内部使用了双花括号语法来插入动态数据其中item.id和item.name是动态的数据根据实际情况进行渲染。--/scroll-view/view!--搜索框--view classsearch-view stylebackground:{{ scrollTop 0 ?-webkit-linear-gradient(top, rgba(105,195,170, 1), rgba(105,195,170, 0.3)) :( scrollTop200 ? rgba(105,195,170,(scrollTop/4000.3) ) : rgba(105,195,170,1)) }} view classsearch-contentimage src/images/search-pic.png classsearch-icon /input placeholder请输入搜索内容 classsearch-input maxlength30 confirm-type搜索 bindinputlistenerSearchInput/inputbutton classsearch-btn bindtaptoSearch搜索/button/view/viewview classgoods-container!-- wx:for-items{{goods}} 是一个循环遍历的功能将 goods 数组中的每个元素都渲染成一个 goods-box 组件。--view classgoods-box wx:for-items{{goods}} bindtaptoDetailsTap data-id{{item.id}}view classimg-boximage src{{item.pic_url}} classimage modeaspectFill lazy-loadtrue //viewview classgoods-title{{item.name}}/viewview styledisplay:flex;view classgoods-price¥ {{item.min_price}}/viewview wx:if{{item.price item.price 0 item.min_price ! item.price}} classgoods-price stylecolor:#aaa;text-decoration:line-through¥ {{item.price}}/view/view/view/viewview hidden{{loadingMoreHidden ? true : false}} classno-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, // loadingswiperCurrent: 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设置为truep设置为1表示当前页数为1goods设置为空数组清空商品列表。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.valuescat_id int( req[cat_id] ) if cat_id in req else 0mix_kw str(req[mix_kw]) if mix_kw in req else p int( req[p] ) if p in req else 1if p 1:p 1page_size 10offset ( p - 1 ) * page_sizequery Food.query.filter_by(status1 )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_listresp[data][has_more] 0 if len( data_food_list ) page_size else 1return jsonify(resp) common/libs/UrlManager.py
# -*- coding: utf-8 -*-
import time
from app import app
class UrlManager(object):def __init__(self):passstaticmethoddef buildImageUrl( path ):app_config app.config[APP]url app_config[domain] app.config[UPLOAD][prefix_url] pathreturn url
