微信小程序设计文档

article/2025/11/4 15:56:48

小程序方案设计

我设计的小程序名字叫“运动之参天大树”,大体上是想设计一个通过运动来种树的小程序。用户注册之后,可以在喜欢的地方种树,然后连通微信步数来换取浇水的水滴,对树进行浇水,树得到水滴之后会变大,到了一定的大小可以选择收获,即砍树放入收藏夹里,之后可以在收藏夹里查询到。收藏夹位于个人中心,个人中心还可以修改自己的资料。

项目的流程图如下:

 

整个项目的功能任务点有:注册、登录、种树、浇水、砍树、收藏夹展示、个人中心及资料、天气查询。

Controller接口有HelloController、TreeController、UserController三大类。

HelloController中:

/hello    //用于测试

TreeController中以/tree为前缀:

/plantTree    //种树

/getTreeByUserId   //根据UserId查找树

/getTreeBySessionId  //根据SessionId查找树

/water1       //浇水

/getTree      //根据treeId查找树

/cutTree      //收获树

/haveTree     //查看收获的树

UserController中以/user为前缀:

/toregist /regist   //注册

/loginWithCode   /tologin  /login //登录

/stepInfo         //步数

小程序中app.json中的pages内容有:

    "pages/open/open", //欢迎的主界面(登录、注册)

    "pages/index/index", //登陆后操作的主界面

    "pages/logs/logs", //日志文件

    "pages/plant/plant",  //种树界面

    "pages/tree/tree", //树的操作间

    "pages/weather/weather", //天气查询页面

    "pages/person/person", //个人中心

    "pages/detail/detail", //个人中心的资料查看页面

    "pages/modify/modify", //个人中心的资料修改页面

    "pages/mytree/mytree" //已收获的树的收藏夹

数据表有六个,如下图:

 

access_info   //访问时间统计

step   //用户步数统计

tree   //已种树

uptree   //已收获的树

user    //用户

water  //微信步数读取为水滴

首先用户进行注册或者登录:

 

注册完毕,因为是新用户没有树,所以默认进入种树的界面,即/pages/plant/plant,用户就可以开始种树了;

登录完毕,则进入树的操作界面,即/pages/tree/tree,该界面共有三个功能跳转:种树、树的操作间、查询天气。

 


点击“种树”按钮,可以跳转到种树界面,种树界面

 

点击种树之后,判断一定范围内是否有树,如果有树就提示用户,该位置已经有树了,提示用户换个地方再试试;如果没有树,就提示用户种植成功,随后自动跳转到树的操作间页面。

 

点击树的操作间之后,可以跳转到树的操作间页面,即pages/tree/tree。

进入树的操作间页面之后,有三个功能可以进行跳转:浇水、砍树、查询天气。

在树的操作间页面, 可以点击水壶进行浇水,这里会读取用户的微信运动步数,如果微信步数大于0,则提示用户浇水成功及浇水值,并将其转换成水滴,增加树的life;

 

如果微信步数为0,则提示用户步数不够,运动之后再来试试。

 

点击砍树图标设置后,会检测用户的树life值是否达到5000,如果大于等于5000,则提示用户砍树成功,并直接砍掉,然后存入收藏夹里;如果小于5000,则提示用户砍树失败,树还不够大。

 

点击天气查询,即点击熊猫头之后,就会跳转到天气查询页面pages/weather/weather。该页面会自动读取用户的位置,通过腾讯地图的API实时读取城市,再通过和风天气的API读取该城市的天气情况,并将其展示在页面上。

 

底部还有一个页面是个人中心

 

点击个人中心,进入个人资料页面

 

点击修改头像,可以选择拍照或从相册里选择图片进行头像的更换

 

点击修改资料,可以进行其他资料的更换

 

在个人中心中,还有树的收藏夹,可以查看当前已收获的树

 小程序完成心得:

通过学习spring、mybatis、springboot等web后端开发框架,包括spring基础、AOP、Mybatis核心配置及应用、spring boot基础及进阶、动态SQL等,完成了小程序的开发。

学习spring的时候,有一个很重要的知识点就是bean。整个spring可以看作一个工厂,它的作用是生产和管理spring这个容器中的bean,如果想要在项目中使用这个spring工厂,就需要在配置文件中对spring进行配置,然后就可以将定义后的bean装配到spring容器中。<bean>的属性很多,但是一般情况下,我们只需要定义id和class即可,这里我们需要注意的是,如果没有指定id或者name的话,spring会将class当作id来使用。

用了很大一部分精力来学习spring的各个知识点,比如Bean、AOP、数据库开发、mybatis、动态SQL、mybatis关联映射、spring MVC、数据绑定、拦截器等等。这些综合在一起学习,就可以利用spring框架进行企业应用开发。Spring使用分层架构,而其主要功能是通过核心容器实现的,分别是BeanFactory和ApplicationContext.,它们的区别在于BeanFactory作为spring的原始接口,针对原始接口的实现类功能较单一,只有在每次获得对象时,才会创建对象;而用ApplicationContext接口的话,每次容器启动时就会创建容器中配置的所有对象,从而提供更多功能。Beanfactory就是前面提过的管理bean的工厂,而ApplicationContext就是BeanFactory的子接口,即应用上下文,一般是通过ClassPathXmlApplicationContext来创建,这是通过构造器来实例化bean,我们还能通过静态工厂方式来实例化bean。这些都需要我们在实际应用中进行合理地选择与运用,才能使它们发挥最大的用处。


http://chatgpt.dhexx.cn/article/frHlIMOS.shtml

相关文章

微信小程序开发指南,接口文档,工具下载使用

相信前天&#xff0c;从事互联网行业人的朋友圈给刷爆了&#xff0c;前微信公众平台开始陆续对外发送小程序内测邀请&#xff0c;而小程序即被外界广为关注的微信“应用号”。 小程序的推出也并非一蹴而就&#xff0c;早在2016年1月的微信公开课上&#xff0c;微信之父张小龙就…

微信小程序开发官方文档

官方文档教程1&#xff1a;http://bcoder.cn/wxopen/ 官方文档教程2&#xff1a;http://bing.aliaii.com/wxopen/ 本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xf…

微信小程序官方开发文档

本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的 AppID 登…

小程序开发文档

小程序开发总结 最近领导交给一个任务&#xff0c;单独开发一个小程序项目&#xff0c;还要出一篇小程序课题文档。这也是我第一次接触小程序&#xff0c;遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结&#xff1a; 1. 如何创建小程序项目 这一步在官方文档中…

微信小程序入门教程

本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的 AppID 如…

HTML 前端设置浏览器页签图标设置

想实现如下效果&#xff1a;修改浏览器页签的图标 话不多说上代码 <!-- 修改页签icon logo --><link rel"shortcut icon" type"image/x-icon" href"images/logo.png"></link> 直接在html中head头部里修改如上代码href替换成相…

webassmbly blazor实现多页签效果

最终效果如上图。 多页签使用BlazorStrap中的BSTabGroup、BSTabList组件&#xff0c;内嵌绑定的BSTab: <div><NavMenu OnShowLog"ShowLog" OnShowModel"ShowModel" /> </div> <div class"container"><BSTabGroup S…

Vue的多页签组件

先直接看组件代码&#xff08;里面用了一些element-ui的组件&#xff0c;如果你们不用element-ui的话。可以去掉&#xff0c;自己实现&#xff09; 也可以下载Demohttps://download.csdn.net/download/rui1120119095/14155951 <template> <div class"__commo…

XSSFWorkbook导出多一个Sheet页签

问题&#xff1a;使用XSSFWorkbook导出Excel多出一个不必要Sheet页。 问题原因&#xff1a;open(FileInputStream s)打开Excel模板时会默认打开一个Sheet页&#xff08;多余的那个Sheet页&#xff09;&#xff08;该Sheet页打开顺序&#xff1a;模板第一格显示的Sheet页->模…

VUEcli3设置页签图标

vuecli3设置网页页签图标非常简单&#xff0c;三步 1.将ico格式的页签图片放置public文件夹目录下 2.在public文件夹目录下的index.html中配置页签图标 3.在vue.config.js中配置下&#xff0c;配置好了重启下项目就行了。 效果

antd-design-pro实现多页签,切换页签保留缓存,keep-alive

感谢该大佬提供的组件&#xff1a;GitHub - CJY0208/react-activation: Hack <KeepAlive /> for React react 里 keep-alive 的实现目前是黑科技&#xff0c;会有些问题 使用过程中遇到问题的话&#xff0c;可以优先看这儿 https://github.com/CJY0208/react-activatio…

【微信小程序】之自定义顶部导航页签

小程序系统提供的导航页签&#xff0c;只能设置字体&#xff0c;却不能自定义字体图片之类的&#xff0c;所以自己写了一个示例。 废话不多说&#xff0c;直接上代码 效果&#xff1a; app.js onLaunch: function() {wx.getSystemInfo({success: e > {this.globalData.S…

ABAP:多页签的选择屏幕

在程序中创建一个100屏幕&#xff0c;然后设定子屏幕区域&#xff0c;可通过屏幕号指定页签&#xff0c;让选择屏幕更多样式&#xff0c;效果如下图&#xff1a; 实现方式如下 定义不同的选择屏幕 * 基本条件屏幕 SELECTION-SCREEN BEGIN OF SCREEN 1100 AS SUBSCREEN. SELE…

【实战】1096- React 中后台系统多页签实现

在中后台管理类系统中&#xff0c;多页签的需求非常普遍&#xff0c;用户常常需要在多个页签内跳转&#xff0c;比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用 keep-alive 即可实现&#xff0c;但是在 React 中&#xff0c;React …

多种方式带你玩转 javascript 实现关闭浏览器页签

你知道的越多&#xff0c;你不知道的越多 点赞再看&#xff0c;养成习惯 如果您有疑问或者见解&#xff0c;或者没有积分想获取项目&#xff0c;欢迎指教&#xff1a; 企鹅&#xff1a;869192208 文章目录 前言方法一方法二方法三方法四方法五方法六附录 前言 近日&#xff0c…

vue 后台系统中多页面标签

在后台开发中&#xff0c;常用一种页面标签工具&#xff0c;每次点击菜单栏时&#xff0c;会在页面区域上方增加一个【标签页】如下图&#xff0c;可关闭&#xff0c;可切换页面等功能&#xff0c;常见于后台管理系统中。 以前&#xff0c;我以为这个是利用tabs组件开发的&…

js关闭浏览器页签

兼容性 js实现 function closeWebPage(){if (navigator.userAgent.indexOf("MSIE") > 0) {if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {window.opener null;window.close();}else {window.open(, _top);window.top.close();}}else if (nav…

layui————一个页面展示两个页签

html页面 <!DOCTYPE html> <html> <head><meta charset"utf-8"><link rel"stylesheet" href"../../../build/css/base.css" media"all"> </head> <body> <div class"layui-tab la…

SAP BP屏幕增强页签

导语&#xff1a;最近收到了BP的需求&#xff0c;要增加页签&#xff0c;找了一些资料&#xff0c;发现BP的增强页签可是真麻烦啊&#xff0c;下面把我梳理出来的分享一下。 &#x1f449;【增强记录清单…】 需求&#xff1a; 需求是在供应商界面增加一个页签&#xff0c;用…

修改浏览器页签名称

第一种若是整个系统要统一修改为一个名称 在public文件夹下index.html下直接修改或者在相应配置文件package.json或者其他&#xff08;看项目配置&#xff09; 第二种某一个路由或者菜单页签不一样的名称 可以配置到后置路由中或者组件内 语句为:document.title 测试