flask 与小程序 菜品详情和分享功能

2024-01-18 09:20

本文主要是介绍flask 与小程序 菜品详情和分享功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

mina/pages/food/info.wxml

<import src="../../wxParse/wxParse.wxml" />
<view class="container"> <!--商品轮播图--> <view class="swiper-container"><swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"><block wx:for="{{info.pics}}" wx:key="id"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150" mode="aspectFit" lazy-load="true"/></swiper-item></block></swiper><view class="dots">  <block wx:for="{{info.pics}}" wx:key="unique"><view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  </block>  </view>  </view><!--商品基本介绍--><view class="goods-info"><view class="goods-title">{{info.name}}</view><view class="goods-price" style="padding-left:35rpx;">¥ {{info.price}}</view><view class="goods-price" style="color:#999;font-size:24rpx;">购买{{info.total_count}}次</view><view class="goods-price" style="color:#999;font-size:24rpx;">共收到 {{info.comment_count}} 次好评</view><view class="goods-info-fx"><image src='/images/qd.png' /><button open-type="share">分享</button><text>分享有赏</text></view></view><view class="goods-des-info"><view class="label-title">商品介绍</view><view class="goods-text"><template is="wxParse" data="{{wxParseData:article.nodes}}"/></view></view><!--用户评价--><view class="goods-des-info" style="margin-top:35rpx;" wx:if="{{commentList}}"><view class="label-title" style="border-bottom:1px solid #eee;">大家评价<text style="color:red">({{commentCount}})</text></view><view class="goods-text" style="margin-top:15rpx;border-bottom:1px solid #eee;" wx:for="{{commentList}}"><view style="width:100rpx;float:left;"><image style="width: 100rpx; height: 100rpx;" src="{{item.user.avatar_url}}"></image><view style="text-align:center;width:100rpx;">{{item.score}}</view></view><view style="width:550rpx;float:left;margin-left:35rpx;"><view>{{item.content}}</view><view style="color: #B0B0B0;font-size:24rpx;">{{item.date}}</view></view></view></view><!--底部--><view class="footer-box">      <view class="shop-cart-btn" bindtap="goShopCar"><view class="shop-num">({{shopCarNum}})</view><view style='position:absolute;bottom:10rpx;'> 购物车 </view></view><view class="join-shop-cart" bindtap="toAddShopCar">加入购物车</view><view class="now-buy" bindtap="tobuy">立即购买</view></view><!--购买和收藏弹窗--><view class="show-popup" hidden="{{hideShopPopup}}" ><view class="popup-mask" bindtap="closePopupTap"></view><view class="popup-contents"><view class="pop-goods-info"><view class="pop-img-box"><image src="{{info.main_image}}" class="goods-thumbnail"/></view><view class="pop-goods-des"><view class="pop-goods-title">{{info.name}}</view><view class="pop-goods-price">¥ {{info.price}}</view></view><view class="pop-goods-close" bindtap="closePopupTap"></view></view><view class="buy-num-box"><view class="num-label">购买数量</view><view class="num-box"><view class="num-jian {{buyNumber == buyNumMin ? 'hui': ''}}" bindtap="numJianTap">-</view><view class="num-input"><input  type="number" value="{{buyNumber}}" disabled/></view><view class="num-jia {{buyNumber== buyNumMax ? 'hui': ''}}" bindtap="numJiaTap">+</view></view></view>  <view class="popup-join-btn" wx:if="{{shopType =='addShopCar'}}" bindtap="addShopCar">加入购物车</view><view class="popup-join-btn" wx:if="{{shopType =='tobuy'}}" bindtap="buyNow">立即购买</view>                      </view></view>
</view>

商品基本介绍

问题1:  <template is /> 是什么函数?有什么作用和功能?如何使用?

模板 | 微信开放文档

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

该段代码的作用是在购物车页面中展示商品的介绍信息。具体来说,它使用了wxParse组件来解析并渲染article.nodes中的内容,将商品介绍以富文本的形式展示在页面上。

问题2: Mustache 语法 是什么?

Mustache语法是一种轻量级的前端模板引擎,它主要用于在表现和数据相分离的前端技术架构中,根据数据生成特定的动态内容。Mustache语法的特点是逻辑简单,没有复杂的条件判断和循环语句,只关注数据的展示。它可以应用于多种平台,如JavaScript、Java、.NET、PHP、C++等。在微信小程序中,Mustache语法被用于生成WXML结构。你可以通过在WXML中使用Mustache语法来动态渲染页面内容。

购买和收藏弹窗

问题1:disabled 什么作用?

disabled属性用于禁用输入框,使其无法编辑或接收用户输入。在给定的代码中,disabled属性被应用于<input>标签,导致输入框无法编辑,并且显示的值是通过buyNumber变量绑定的。这意味着用户无法更改输入框中的值,只能查看当前的buyNumber值。

mina/pages/food/info.js

在顶部将utils里封装好的方法使用require 加载进来

//index.js
//获取应用实例
var app = getApp();
var WxParse = require('../../wxParse/wxParse.js');
var utils = require('../../utils/util.js');Page({data: {autoplay: true,interval: 3000,duration: 1000,swiperCurrent: 0,hideShopPopup: true,buyNumber: 1,buyNumMin: 1,buyNumMax: 1,canSubmit: false, //  选中时候是否允许加入购物车shopCarInfo: {},shopType: "addShopCar",//购物类型,加入购物车或立即购买,默认为加入购物车,id: 0,shopCarNum: 4,commentCount:2},onLoad: function (e) {var that = this;that.setData({id: e.id});},onShow:function(){this.getInfo();this.getComments();},goShopCar: function () {wx.reLaunch({url: "/pages/cart/index"});},toAddShopCar: function () {this.setData({shopType: "addShopCar"});this.bindGuiGeTap();},tobuy: function () {this.setData({shopType: "tobuy"});this.bindGuiGeTap();},addShopCar: function () {var that = this;var data = {"id": this.data.info.id,"number": this.data.buyNumber};wx.request({url: app.buildUrl("/cart/set"),header: app.getRequestHeader(),method: 'POST',data: data,success: function (res) {var resp = res.data;app.alert({"content": resp.msg});that.setData({hideShopPopup: true});}});},buyNow: function () {var data = {goods: [{"id": this.data.info.id,"price": this.data.info.price,"number": this.data.buyNumber}]};this.setData({hideShopPopup: true});wx.navigateTo({url: "/pages/order/index?data=" + JSON.stringify(data)});},/*** 规格选择弹出框*/bindGuiGeTap: function () {this.setData({hideShopPopup: false});},/*** 规格选择弹出框隐藏*/closePopupTap: function () {this.setData({hideShopPopup: true})},numJianTap: function () {if (this.data.buyNumber <= this.data.buyNumMin) {return;}var currentNum = this.data.buyNumber;currentNum--;this.setData({buyNumber: currentNum});},numJiaTap: function () {if (this.data.buyNumber >= this.data.buyNumMax) {return;}var currentNum = this.data.buyNumber;currentNum++;this.setData({buyNumber: currentNum});},//事件处理函数swiperchange: function (e) {this.setData({swiperCurrent: e.detail.current})},getInfo: function () {var that = this;wx.request({url: app.buildUrl("/food/info"),header: app.getRequestHeader(),data: {id: that.data.id},success: function (res) {var resp = res.data;if (resp.code != 200) {app.alert({"content": resp.msg});wx.navigateTo({url: "/pages/food/index"});return;}that.setData({info: resp.data.info,buyNumMax: resp.data.info.stock,shopCarNum:resp.data.cart_number});WxParse.wxParse('article', 'html', resp.data.info.summary, that, 5);}});},getComments:function(){var that = this;wx.request({url: app.buildUrl("/food/comments"),header: app.getRequestHeader(),data: {id: that.data.id},success: function (res) {var resp = res.data;if (resp.code != 200) {app.alert({"content": resp.msg});return;}that.setData({commentList: resp.data.list,commentCount: resp.data.count,});}});},onShareAppMessage: function () {var that = this;return {title: that.data.info.name,path: '/pages/food/info?id=' + that.data.info.id,success: function (res) {// 转发成功wx.request({url: app.buildUrl("/member/share"),header: app.getRequestHeader(),method: 'POST',data: {url: utils.getCurrentPageUrlWithArgs()},success: function (res) {}});},fail: function (res) {// 转发失败}}}
});

onShow:function(){}

当读取页面时自己重新去请求数据,保持数据是最新的。

问题0:  wx.reLaunch 是什么函数?

wx.reLaunch(Object object) | 微信开放文档  关闭所有页面,打开到应用内的某个页面

urlstring需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

问题1: shopType  作用

shopType: "tobuy"

这段代码是一个小程序中的一个函数,名为tobuy。该函数用于设置购物类型为"tobuy",并调用bindGuiGeTap函数。

问题2: wx.Parse 的具体作用

wxParse是一个微信小程序的自定义组件,用于解析富文本内容。它支持解析HTML和Markdown,并且能够解析HTML的大部分标签和小表情emoji。通过使用wxParse组件,开发者可以在小程序中嵌入包含HTML代码的富文本内容,并实现对这些内容的解析和展示。

wxParse组件的源码和案例可以在引用和引用提供的压缩包中找到。这些资源可以帮助开发者更好地理解和使用wxParse组件,以实现小程序中富文本内容的展示和解析。

小程序富文本解析 | 微信开放社区

onShareAppMessage:function(){}

Page(Object object) | 微信开放文档

监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

mina/utils/util.js

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}/*参考文章:https://segmentfault.com/q/1010000008005954/a-1020000008187652*/
/*获取当前页url*/
function getCurrentPageUrl() {var pages = getCurrentPages()    //获取加载的页面var currentPage = pages[pages.length - 1]    //获取当前页面的对象var url = currentPage.route    //当前页面urlreturn url
}/*获取当前页带参数的url*/
function getCurrentPageUrlWithArgs() {var pages = getCurrentPages()    //获取加载的页面var currentPage = pages[pages.length - 1]    //获取当前页面的对象var url = currentPage.route    //当前页面urlvar options = currentPage.options    //如果要获取url中所带的参数可以查看options//拼接url的参数var urlWithArgs = url + '?'for (var key in options) {var value = options[key]urlWithArgs += key + '=' + value + '&'}urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)return urlWithArgs
}module.exports = {formatTime: formatTime,getCurrentPageUrl: getCurrentPageUrl,getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs
}

function getCurrentPageUrlWithArgs() {  }

该段代码是一个JavaScript函数,用于获取当前页面带参数的URL。

函数的主要步骤如下:

  1. 使用getCurrentPages()函数获取当前加载中的所有页面对象,并将其存储在pages数组中。
  2. 通过pages.length - 1获取pages数组中最后一个元素,即当前页面的对象,并将其存储在currentPage变量中。
  3. 使用currentPage.route获取当前页面的URL。
  4. 使用currentPage.options获取当前页面URL中所带的参数,并将其存储在options对象中。
  5. 初始化urlWithArgs变量为url + '?',即将URL和参数拼接起来。
  6. 使用for...in循环遍历options对象,将参数和对应的值拼接到urlWithArgs中。
  7. 使用substring()函数去除最后一个多余的&符号。
  8. 返回拼接好的带参数的URL。

该函数的作用是方便获取当前页面带参数的URL,可以在需要获取URL参数的场景中使用

web/controllers/api/Food.py

@route_api.route("/food/info" )
def foodInfo():resp = {'code': 200, 'msg': '操作成功~', 'data': {}}req = request.valuesid = int(req['id']) if 'id' in req else 0food_info = Food.query.filter_by( id = id ).first()if not food_info or not food_info.status :resp['code'] = -1resp['msg'] = "美食已下架"return jsonify(resp)member_info = g.member_infocart_number = 0if member_info:cart_number = MemberCart.query.filter_by( member_id =  member_info.id ).count()resp['data']['info'] = {"id":food_info.id,"name":food_info.name,"summary":food_info.summary,"total_count":food_info.total_count,"comment_count":food_info.comment_count,'main_image':UrlManager.buildImageUrl( food_info.main_image ),"price":str( food_info.price ),"stock":food_info.stock,"pics":[ UrlManager.buildImageUrl( food_info.main_image ) ]}resp['data']['cart_number'] = cart_numberreturn jsonify(resp)

这篇关于flask 与小程序 菜品详情和分享功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/618610

相关文章

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕