【食疗坊小程序开发】学习笔记4---Food页面制作

已于 2024-05-11 18:55:27 修改
阅读量1.2k 收藏 19
点赞数 20
分类专栏： 小程序之神的诞生笔记 文章标签： 学习 笔记 小程序
于 2024-05-11 18:52:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51325580/article/details/138723398
版权

文章目录

任务概述

：今天我们装修【Food产品】页面，其中涉及到模块和模板的使用，相信会对学小程序的大家有所帮助~
下图是今天要做的页面框架
在这里插入图片描述

那话不多说 开始装修吧！
在这里插入图片描述

一、顶部布局

  • 地址
  • 商品搜索框
<!-- 顶部布局 -->
<view class="header">
  <navigator class="address" url=" " hover-class="none">北京</navigator>
  <view class="search">
    <navigator url=" ">请输入你想要的内容</navigator>
  </view>
</view>

.header{
  background: #fff;
  padding: 20rpx;
  display: flex;
}
.address{
  text-align: center;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-right: 20rpx;
}
.search{
  flex: 1;
  background: #cccccc;
  padding-left:10rpx;
  border-radius: 10rpx;
  color: #666;
  font-size: 28rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

二、导航栏

  • 建typeData模块装数据
  • 导入模块 调用模块信息

这里最好在外部（pages外）新建一个文件夹装模块，我这里是在外部建了一个“comment”文件夹装。
这里我先放模块的代码，后面详细解析
typeData.js

var list=[{
  id:1,
  type:0,
  imgUrl:"../../images/item1.jpg",
  title:"美容养颜"
},{
  id:2,
  type:1,
  imgUrl:"../../images/item2.jpg",
  title:"保健调养"
},{
  id:3,
  type:2,
  imgUrl:"../../images/item3.jpg",
  title:"补养"
},{
  id:4,
  type:3,
  imgUrl:"../../images/item4.jpg",
  title:"减肥"
},{
  id:5,
  type:4,
  imgUrl:"../../images/item5.jpg",
  title:"母婴"
},{
  id:6,
  type:5,
  imgUrl:"../../images/item6.jpg",
  title:"气节"
},{
  id:7,
  type:6,
  imgUrl:"../../images/item7.jpg",
  title:"常见食疗"
},{
  id:8,
  type:7,
  imgUrl:"../../images/item8.jpg",
  title:"维生素"
}]
module.exports={
  list:list
}

module.exports={
list:list
}
作用：我们上面填完的list列表暴露出去

模块

将复杂的应用程序分解为一系列独立的模块，每个模块负责完成特定的功能或业务逻辑。

可以理解为一个NFC，“滴”一下就能完成“开灯”、“开门”等指定的命令。
这里，我们面对页面中如此多的数据，我们为了实现效果，复制八遍也是能做出来的，但是有没有更加方便且周全的方法呢？
所以 我们就想到创建一个模块来存放我们需要的数据，我们在food页面需要时，只需调用数据即可实现
在这里插入图片描述
导入模块
require(“…/…/comment/typedata.js”);
【源码放送】

var myData=require("../../comment/typedata.js");
Page({
  data: {
    typeData:myData.list,//分类导航数据
  }
})

<view class="type">
  <view class="item" wx:for="{{typeData}}" wx:key="index">
    <navigator url=" "> 
      <image src="{{item.imgUrl}}" mode=""/>
      <view class="info">{{item.title}}</view>
    </navigator> 
  </view> 
</view>

三、商品列表布局

  • 新建productlist模板，定义每个商品
  • 导入模板 调用数据

这里最好在外部（pages外）新建一个文件夹装模板，我这里是在外部建了一个“template”文件夹装。
在这里插入图片描述

这里我先放模块的代码，后面详细解析
productlist.wxml

<template name="list">
  <view class="list">
    <image class="img" src="{{item.pic}}"></image>
    <view class="info">
      <view class="title">{{item.name}}</view>
      <view class="desc">{{item.description}}</view>
      <view class="buyName"><text class="red">￥{{item.price}}</text>
      {{item.buyName}}</view>
    </view>
  </view>
</template>

productlist.wxss

/* template/priductlist/priductlist.wxss */
.list{
  background: #fff;
  padding: 20rpx;
  display: flex;
  margin-top: 20rpx;
}
.list image{
  width: 222rpx;
  height: 222rpx;
  padding-right: 20rpx;
}
.list .info{
  flex: 1;
  height: 184rpx;
  position: relative;
}
.list .info .title{
  font-size: 30rpx;
  margin-bottom: 8rpx;
}

.list .info .desc{
  color: #666;
  font: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.buynum{
  font-size: 26rpx;
  color: #999;
  position: absolute;
  left: 0;
  bottom: 0;
}
.red{
  color: red;
  margin-right: 20rpx;
}

模板

template(模板):主要用于显示,简单的说主要是用于嵌入wxml的代码,模板中是可以拥有对应的样式以及逻辑,但是他并没有属于的对应的js文件,它的逻辑依赖于引用的页面。

这里我们用到的template模板，其主要作用是给我们固定了一个框架和样式，我们需要它时，只需导入模块，传递参数即可实现效果。
可以把template模板理解成一个外包公司的产品，在它之前，我们都是自己一条工序走到底，有了它之后，它的精美框架和样式，可以直接被我们使用，不仅方便而且能省去很多的力气，可谓人类之星！
导入模板框架

<import src="../../template/priductlist/priductlist.wxml"/>
<template is="模板名称" data="{{item}}"></template>

导入模板样式

@import '../../template/priductlist/priductlist.wxss';

----放在前面和后面都没有太大影响

【源码放送】
food.wxml

<!-- 商品列表 -->
<import src="../../template/priductlist/priductlist.wxml"/>
<view class="wrapper">
  <view wx:for="{{list}}" wx:key="inidex">
    <template is="list" data="{{item}}"></template>
  </view>
</view>

food.wxss

@import '../../template/priductlist/priductlist.wxss';
/* 列表样式 */
.type{
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding-top: 20rpx;
}
.type .item{
  width: 25%;
  text-align: center;
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.type image{
  width: 74rpx;
  height: 74rpx;
}
.more{
  padding: 20rpx;
  color: #666;
  text-align: center;
}

food.js

Page({
  data: {
    location:"北京",
    list:[],
  },
  onLoad(options) {
    wx.request({
      url: 'http://iwenwiki.com:3002/api/foods/list',
      data:{
        city:this.data.location,
        page:1,
      },
      success:res=>{
        if(res.data.status==200){
          this.setData({
            list:res.data.data.result
          })
        }else{
          console.log("当前城市无数据")
        }
      }
    })
  },

四、全源码

food.wxml

<!--pages/food/food.wxml-->
<!-- 顶部布局 -->
<view class="header">
  <navigator class="address" url=" " hover-class="none">北京</navigator>
  <view class="search">
    <navigator url=" ">请输入你想要的内容</navigator>
  </view>
</view>

<!-- 导航栏 -->
<view class="type">
  <view class="item" wx:for="{{typeData}}" wx:key="index">
    <navigator url=" "> 
      <image src="{{item.imgUrl}}" mode=""/>
      <view class="info">{{item.title}}</view>
    </navigator> 
  </view> 
</view>

<!-- 商品列表 -->
<import src="../../template/priductlist/priductlist.wxml"/>
<view class="wrapper">
  <view wx:for="{{list}}" wx:key="inidex">
    <template is="list" data="{{item}}"></template>
  </view>
</view>

food.wxss

/* pages/food/food.wxss */
/* pages/food/food.wxss */
@import '../../template/priductlist/priductlist.wxss';
.header{
  background: #fff;
  padding: 20rpx;
  display: flex;
}
.address{
  text-align: center;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-right: 20rpx;
}
.search{
  flex: 1;
  background: #cccccc;
  padding-left:10rpx;
  border-radius: 10rpx;
  color: #666;
  font-size: 28rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

/* 列表样式 */
.type{
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding-top: 20rpx;
}
.type .item{
  width: 25%;
  text-align: center;
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.type image{
  width: 74rpx;
  height: 74rpx;
}
.more{
  padding: 20rpx;
  color: #666;
  text-align: center;
}

food.js

// pages/food/food.js
var myData=require("../../comment/typedata.js");
Page({
  data: {
    location:"北京",
    list:[],
    typeData:myData.list,//分类导航数据
  },
  onLoad(options) {
    wx.request({
      url: 'http://iwenwiki.com:3002/api/foods/list',
      data:{
        city:this.data.location,
        page:1,
      },
      success:res=>{
        if(res.data.status==200){
          this.setData({
            list:res.data.data.result
          })
        }else{
          console.log("当前城市无数据")
        }
      }
    })
  }
 })

五、index地址栏传参-补充

昨天运行地址栏传参时，总是出错，今天经过我仔细筛查，总算是给我抓出来了，这里给大家说明一下我的问题所在。
先看我的原代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
因此我断定，我一定是在信息获取时出了问题，我一遍遍检索后，找出了bug
在这里插入图片描述
在这里插入图片描述
【分析】
在wxml中，通过地址栏传参的参数变量名是id
此时options中的内容应该是id=xxx
而我赋值给id的内容是：options.code
code是哪位？options并没有这个参数
所以因为找不到 所以获取失败

OK 修改完后，果然获取到了res.data的数据
在这里插入图片描述
但执行页面依旧空白 这是为啥？
[/左挠头][/右挠头][/思考]
一定是因为页面没有获取到title等信息，我又详细观察了一下，发现，其实我所需要的数据都在第一行里面，也就是我只获取第一行的详细数据，就可以解决了
在这里插入图片描述
于是！！！！！美好的一幕出现了
在这里插入图片描述

这里放源码，希望可以帮助和我错一个地方的宝汁。

 onLoad(options) {
    console.log(options)
          wx.request({
            url: 'http://iwenwiki.com:3002/api/indexlist/detail',
            data:{
              id:options.id,
            },
            success:(res)=>{
              this.setData({
                object:res.data[0]
              })
              console.log(res.data)

            }
          })
  },

六、结束语

快乐的时间总是短暂的，今天做完了food页面基本的内容，明天做food页面的优化啦！
哈哈有没有感觉今天的文章看着比之前更为舒适啦~
因为本P人今天提前做了准备功课 [/嘻嘻]
写完这些，时间也不早了，要去赶晚课啦
我们明天见~
在这里插入图片描述

Is olive.
关注
  • 20
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序-美食列表源码
04-26
内容：微信小程序——美食列表源码 适用人群：小程序开发初学者 其他：下载了资源的伙计麻烦点个免费的关注和点赞
【食疗坊小程序开发】images
最新发布
05-08
本文将深入探讨“食疗坊”小程序的图像资源开发，主要关注图片这一关键元素。 首先，我们要理解小程序开发中的图像资源的重要性。在用户界面设计中，图片是吸引用户注意力、传达信息和提升用户体验的关键因素。对于...
基于微信美食菜谱小程序毕业设计成品作品（1）系统效果图
杭州.黄老师
09-15 513
专注大学生毕业设计教育和辅导。菜谱库：点击所有菜谱菜单，支持查看所有的菜谱信息菜谱查询：在菜谱列表顶部，输入菜谱关键字，点击查询即可。菜谱评价：登录用户，在菜谱信息详情页面底部，点击我要评论，弹出评论页面，填写后提交；菜谱信息： 点击到菜谱详情页面，可以查看菜谱的图片、参考价格、制作市场等。菜谱评论列表：在菜谱页面，切换到游客评论，可以查看所有用户评论的内容。用户信息：填写姓名、qq、邮箱、备注等信息。
微信小程序｜美食推荐系统的设计与实现
BS009的博客
03-16 922
针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，经过分析和考虑，在目前的情况下，可以引进一款美食推荐系统这样的现代化管理工具，这个工具就是解决上述问题的最好的解决方案。它不仅可以实时完成信息处理，还缩短高校教师成果信息管理流程，使其系统化和规范化。同时还可以减少工作量，节约高校教师成果信息管理需要的人力和资金。所以美食推荐系统是信息管理环节中不可缺少的工具，它对管理者来说非常重要。
基于微信小程序的美食推荐小程序
qq_61827376的博客
01-21 526
（1）小程序：首页、美食信息、购物车、我的（我的收藏管理、用户充值、在线客服、购物车、我的订单） （2）管理员：系统首页、个人中心、用户管理、美食分类管理、美食信息管理、系统管理、订单管理
php微信小程序毕业设计 php菜谱美食小程序毕业设计毕设作品参考
杭州.黄老师
03-03 1137
php菜谱美食小程序毕业设计
微信小程序食疗微信小程序的设计与实现
Timi2019的博客
09-02 936
现在人们的生活水平高了，大家都想在多活个几十年，要想实现这个想法，有很多事情都必须考虑到，第一个就是适当运动，第二个就是心情好，第三个就是要注意饮食。现在很多人还不知道什么样的饮食是健康的，我国地大物博，各种食物数不胜数，如果可以合理的搭配饮食，那对于防治和治疗疾病都是有非常大的好处的。本文基于微信小程序、java技术了一个食疗小程序，在小程序上推出了很多的食疗知识和搭配，人们可以在线学习。1.2 国内外研究现状 3。2.4　MySQL数据库 6。1.1　课题背景及意义 3。3.2　非功能需求分析 7。
微信小程序毕业设计-食疗小程序项目开发实例(附源码+论文)
岛上程序猿
08-11 549
现在人们的生活水平高了，大家都想在多活个几十年，要想实现这个想法，有很多事情都必须考虑到，第一个就是适当运动，第二个就是心情好，第三个就是要注意饮食。民以食为天，科学合理的饮食结构是人们达到健康长寿目标的必要条件。现在很多人还不知道什么样的饮食是健康的，我国地大物博，各种食物数不胜数，如果可以合理的搭配饮食，那对于防治和治疗疾病都是有非常大的好处的。为了使健康饮食结构得到推广以及帮助人们使身体更加的健康。
ssm基于微信小程序的食疗坊软件开发(程序+开题)
萧达毕设程序
12-30 475
本系统（程序源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景： 随着人们对健康饮食的重视，食疗作为一种传统的中医养生方法备受关注。然而，传统的食疗信息获取方式存在着信息不对称、难以个性化等问题，无法满足现代人快节奏的生活方式。因此，开发一款基于微信小程序的食疗坊软件具有重要的现实意义。
微信美食菜谱小程序系统设计与实现开题报告答辩PPT
杭州.黄老师
09-23 701
微信美食菜谱小程序系统设计与实现开题报告答辩PPT
微信小程序开发-食品类商城案例源码.zip
12-12
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。在这个“微信小程序开发-食品类商城案例源码.zip”压缩包中，包含了开发一个食品类商城...
微信小程序食疗微信小程序的设计与实现源码数据库.zip
10-06
微信小程序食疗微信小程序的设计与实现源码数据库.zip
微信小程序项目实例——今日美食
05-24
微信小程序项目实例——今日美食 今日美食是为用户提供各种美食的制作方法，详细介绍了配料和制作流程
微信小程序开发-健康膳食案例源码.zip
08-15
【微信小程序开发-健康膳食案例源码.zip】这个压缩包文件是针对微信小程序的一个实际项目案例，主要聚焦于健康膳食的应用场景。通过分析这个源码，我们可以深入理解微信小程序的开发流程、技术架构以及如何在移动...
原生微信小程序源码 - 健康菜谱
05-01
总的来说，健康菜谱微信小程序源码是一个涵盖了前端展示、用户交互、数据处理和微信API调用的综合案例，对学习微信小程序开发的开发者来说，具有很高的参考价值。通过研究这个项目，可以深入理解微信小程序的开发...
小程序毕设作品之微信美食菜谱小程序毕业设计成品（7）中期检查报告
杭州.黄老师
08-01 1442
小程序毕设作品之微信美食菜谱小程序毕业设计成品（7）中期检查报告
计算机毕业设计ssm基于微信小程序的食疗坊软件开发7pzni9（附源码）新手必备
一念计算机毕设源码程序
08-20 358
选题背景： 随着人们对健康生活的关注度不断提高，食疗作为一种传统的中医养生方法，受到了越来越多人的关注和追捧。然而，对于大部分人来说，食疗知识和食材的选择并不容易。因此，基于微信小程序的食疗坊软件应运而生。 传统的食疗方式通常需要人们自己去寻找食材、制作食谱，并且缺乏科学的指导和专业的建议。而基于微信小程序的食疗坊软件可以通过智能化的方式，提供全面、准确、实用的食疗知识和方案，并帮助用户进行食材的选择和食谱的制作。 意义： 开发基于微信小程序的食疗坊软件具有重要的意义。首先，该平台可以为用户提供科学
基于微信美食菜谱小程序毕业设计成品作品（5）任务书和中期检查报告模版
杭州.黄老师
09-15 518
本课题主要目标是设计并能够实现一个基于微信美食菜谱点评小程序系统，前台用户使用小程序，小程序使用微信开发者工具开发；后台管理使用基PP+MySql的B/S架构，开发工具使用phpstorm；通过后台添加资讯和管理资讯，录入菜谱和管理菜谱，管理菜谱评论等，用户通过小程序登录，查看菜谱信息、发表评论等。
微信小程序食疗微信小程序的设计与实现.docx
08-16
- **微信小程序**：作为用户界面，提供友好的交互体验，允许用户轻松访问和学习食疗知识。 5. **需求分析**： - **功能需求**：包括会员注册、登录，食疗常识、健康饮食、食疗视频的管理和推荐等功能。 - **非...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值