热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序实战之菜谱小程序

最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了

最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了一个demo,对其进行了一番改造,然后进行上线,也算是基本完整的走了一遍小程序开发的简单流程,本篇文章就是对这次实践的简单介绍。

先放个二维码压压惊~

《微信小程序实战之菜谱小程序》

调研

在开发之前,本人对微信小程序开发流程进行了一个简单调研,调研发现,开发者分为个人开发者和企业开发者,企业开发者除了比个人开发者能够使用更多的基础功能之外,能够被微信团队允许开放的领域范围也更加广泛。具体可参考如下:

  • 个人开发者
  • 非个人开发者

本人作为标准穷人一枚,肯定是交不起非个人开发者几百元的申请费的,于是乎只能从个人开发者允许开发的零星的小程序领域中选择了一个相对来说逻辑比较简单的类型--菜谱小程序,进行流程的开发。

项目介绍

最终完成的成品项目主要包含了以下几部分:

云函数

云函数是指在微信云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码,在该项目中主要是在登陆模块中用到了该功能。

数据库

微信云开发提供了一个json数据库,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。

本项目主要针对以下数据做了持久化:

  1. 菜谱(需批量导入)
  2. 菜谱分类列表(一条记录,手动添入即可)
  3. 收藏(根据用户操作,自动增加和删除)
  4. 搜索历史(根据用户操作,自动增加和删除)

以上几项中的菜谱数据,需要开发者预先填充一些数据(终于到了服务端大显身手的时候),本人写了个脚本,从网上简单爬取了一些。

爬虫地址如下:
爬虫地址

有兴趣的朋友改改直接使用~

业务逻辑

  1. 首页:主要包括了各个类别菜谱的展示,可以根据不同的类别跳转到每一类别的菜谱列表页
  2. 搜索:精确搜索,实现原理是根据数据库中的类别列表进行匹配,在搜索的同时会把搜索历史记录下来。点击搜索结果,挑战菜谱列表页
  3. 菜谱类别列表:对菜谱进行大类别划分
  4. 个人页:主要展示个人用户头像以及收藏菜谱的列表
  5. 菜谱详情页:包括一道菜的,简单介绍,图片,步骤,配料,辅料等元素

代码大致结构:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

 

├── README.md

├── project.config.json // 项目配置文件

└── cloudfunctions | 云环境 // 存放云函数目录

│ └── login // 云函数

│ ├── index.js

│ └── package.json

└── miniprogram

├── images // 存放小程序图片

├── pages // 存放小程序各种页面

| ├── index // 首页

| └── menu // 菜单页

| └── user // 用户中心

| └── search // 搜索页

| └── list // 列表页 搜索结果页

| └── detail // 详情页

| └── databaseGuide // 数据库指导页

| └── chooseLib // 提示页

| └── storageConsole // 文件上传提示

├── style // 样式文件目录

├── app.js // 小程序公用逻辑

├── app.json // 全局配置

├── app.wxss // 全局样式

 

代码地址如下:
代码地址

鸣谢

本次使用demo主要是在 github上找到的开源项目,借鸡下蛋,十分感谢!
demo地址


推荐阅读
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 本文深入解析了Java面向对象编程的核心概念及其应用,重点探讨了面向对象的三大特性:封装、继承和多态。封装确保了数据的安全性和代码的可维护性;继承支持代码的重用和扩展;多态则增强了程序的灵活性和可扩展性。通过具体示例,文章详细阐述了这些特性在实际开发中的应用和优势。 ... [详细]
  • PHP自学必备:从零开始的准备工作与工具选择 ... [详细]
  • 初探性能优化:入门指南与实践技巧
    在编程领域,常有“尚未精通编码便急于优化”的声音。为了从性能优化的角度提升代码质量,本文将带领读者初步探索性能优化的基本概念与实践技巧。即使程序看似运行良好,数据处理效率仍有待提高,通过系统学习性能优化,能够帮助开发者编写更加高效、稳定的代码。文章不仅介绍了性能优化的基础知识,还提供了实用的调优方法和工具,帮助读者在实际项目中应用这些技术。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • HTML 页面中调用 JavaScript 函数生成随机数值并自动展示
    在HTML页面中,通过调用JavaScript函数生成随机数值,并将其自动展示在页面上。具体实现包括构建HTML页面结构,定义JavaScript函数以生成随机数,以及在页面加载时自动调用该函数并将结果呈现给用户。 ... [详细]
  • 优化后的标题:利用 jQuery 实现高效树形结构元素选择与操作
    在Web前端开发中,DOM结构本质上是一种树形结构。通过优化后的jQuery选择器,可以高效地选择和操作DOM树中的节点。这些选择器不仅简化了代码编写,还提高了性能和可维护性。本文将详细介绍如何利用jQuery的树形选择器实现高效的元素选择与操作。 ... [详细]
  • Node.js 配置文件管理方法详解与最佳实践
    本文详细介绍了 Node.js 中配置文件管理的方法与最佳实践,涵盖常见的配置文件格式及其优缺点,并提供了多种实用技巧和示例代码,帮助开发者高效地管理和维护项目配置,具有较高的参考价值。 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 本文深入探讨了JavaScript中`this`关键字的多种使用方法和技巧。首先,分析了`this`作为全局变量时的行为;接着,讨论了其在对象方法调用中的表现;然后,介绍了`this`在构造函数中的作用;最后,详细解释了通过`apply`等方法改变`this`指向的机制。文章旨在帮助开发者更好地理解和应用`this`关键字,提高代码的灵活性和可维护性。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
author-avatar
陨落灬星辰
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有