微信小程序小白前端入门学习记录-友邻小程序(一)

2023-10-14 13:20

本文主要是介绍微信小程序小白前端入门学习记录-友邻小程序(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

此项目在作品集中的封面 这是在5月至7月间进行的从交互设计作业衍生一个项目,想解决独属于租户间的沟通问题。

首先我本科专业是工业设计,但是本科的教育时常令我感到困惑。

我在课外学习板绘和手绘的时候,最常听到的话就是,很多时候并不是因为你不会画,而是因为你根本就不理解要画的物体,举个例子,如果你并不知道人体结构,只是按照儿童画将其简单地将人体分为简单的几何体,那由你的认知所反映出的画作必然是幼稚简单的(当然毕加索在后期的画作也体现了艺术的追求是没有统一论调的),作为艺术家,必然要掌握人体,光影,材质,色彩甚至心理学(诸如格式塔)等等的知识,你所拥有的知识越多,你的作品内涵便越深,越有味道。这一点同样可以推及到其他领域。
曾经炫技式的板绘作品,但是对产品的理解不深,其实有很多错误,只是看起来像回事
在学校里时,书本统一的论调就是设计师要高瞻远瞩,要全面考虑问题,要发现问题解决问题,其所站的位置是非常高的,老师们也并不执着教授于各种技法,一再强调设计思维,所以一群学设计的孩子在涉世未深的情况下利用建模软件和渲染软件提出自己各种奇思妙想,这没有什么不好,但是我时常觉得这不过一场游戏,因为所做的作品往往因为深挖不够而显得幼稚,我觉得我们不该执着与奇思妙想,而更应该用很长的周期去深掘一个小设计,一步步积累,才有机会触及真正的大设计,书本里提到的设计。

马原中,对于实践与认识的有很多论述,实践与认识往往是脱离不开的。我在学习交互设计时,如果不需要产出实际的产品,即使使用了交互设计的设计方法,获益又有几何呢?在本科学习阶段缺乏实践的机会(其实也有一些模型制作的课程),这该是许多设计学生面临的问题。所以我一直希望参与一些项目去达成目标,但是由于认识到这点比较迟,相关项目也不好找,所以时值大三,遗憾很多,但是亡羊补牢,犹为不晚。

此外,我本来是工业设计的学生,我们本科是更多地学习工程材料,工程力学,数字化产品设计等与制造业相关的知识的,不过制造业行业壁垒深,考虑的东西也多,我此前参加机械设计创新大赛,光是烧掉的银子就令人肉疼,如果开不出发票还得自己担。程序的初级开发,一台电脑就足以实现目的,顶多去租个服务器(对于每个刚入行的机械设计师会烧掉老板多少多少银子的事也略有耳闻)。正好,一直以来都对于程序员所做的事情有一定的好奇,就打算学习web开发,微信小程序算是简单的,就作为我梦想的入口吧。

为什么用户只靠简单的点触就能达到目的?我一直好奇这个问题,不过我在探寻的过程中,得到的答案并不完整,在理清了产品原型,进行了交互设计和UI设计后,技术方面只使用了HTML,CSS,Javascript以及一些简单的数据库设计的知识来解决问题,还因为微信小程序提供的接口,云数据库和云函数省去了不少麻烦事。

但即使是不完整甚至有可能错误的答案,我也有了一些认知,如果说UX设计师所做的事是将事先告知程序员数据要摆放在哪里,UI设计师告知数据要以怎样的视觉元素呈现,那么程序员所做的事情就是让数据以合理的形态各就其位,这其中包括对数据的处理,对流程的优化等等的事情。

除此以外,我也清晰地认识到,曾以为像魔法一样的互联网产品其实也是数据可视化的一个分支。纵使UI和UX设计师规划得再好,如果数据对用户的价值不高,那么这个产品就会向用户露出原本的模样,显得苍白无力,产品本来是多维的,但是在这种时候变成了一张张页面,一本不想去翻看的书,这是对产品的降维打击。同样的,在数据排布杂乱无序,视觉效果令人不忍卒读时,数据显现不出其价值,同样的事也会发生。

项目介绍

对于项目的背景,作品集中有大段的描述,放一个故事板来简单地解释一下
要解决什么样的问题 项目的主打的第一功能是室友匹配测试,作品集里未曾介绍是如何实现的,算是一个很大的漏洞,我想在这里解释一下,我也有查询心理测试的资料,想制作一份逻辑完满的测试,可个人能力有限。

有兴趣的人可以从知乎问题 心理测试题是如何设计的?中找到答案

所以匹配度测试也只是噱头,友邻要做的是

1.让用户在室友招募时,对彼此的情况信息有一个快速的了解;

2.旁敲侧击地提醒用户如何与人交往,合租时要注意哪些问题;这点可以从部分测试题中看出来,与其说是测试,不如说是价值观的输出。

如果用户能够参与进来,一起补充这样一份测试题,在保证其题量不会多至惹人厌烦的情况下,能否代替合租前的约法三章呢?成为每位合租新人的教学材料?或者被纳入租房相关app的一部分?

项目主打的第二功能就是关于招募信息的管理,非常庸常,不做过多介绍。

用户流程图

主要功能的流程图

低保真线框图

1
2

设计稿

UI设计稿

页面前端代码梳理

不久前还发现在自己的手机上可以正常使用的小程序,在他人的手机上出现了一些问题,所以在考虑对一些页面的代码进行复盘。还有很奇怪的就是,这个项目快完成了,我对所学的内容就感到越不真切,这再次让我感觉复盘的重要性,然而也算到了大三这个关键的时间节点,文章或许会时不时地更新。

我的学习路线是这样的,首先在B站上学习了Js,Html,Css,然后以七月老师的旧岛小程序为教程学习了前端开发所需要的进阶知识后就开始敲代码,没有来得及去接触一些框架。

所以值得一提,我的代码水平很是有限,参考了无数CSDN的文章,我记得我的浏览器有一次打开了200多个页面,全是在遇阻时查询的资料。

文章的第一次更新就到这里为止好了,希望能给跟我一样的小白提供一些帮助。

这篇关于微信小程序小白前端入门学习记录-友邻小程序(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Spring WebClient从入门到精通

《SpringWebClient从入门到精通》本文详解SpringWebClient非阻塞响应式特性及优势,涵盖核心API、实战应用与性能优化,对比RestTemplate,为微服务通信提供高效解决... 目录一、WebClient 概述1.1 为什么选择 WebClient?1.2 WebClient 与

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Zabbix在MySQL性能监控方面的运用及最佳实践记录

《Zabbix在MySQL性能监控方面的运用及最佳实践记录》Zabbix通过自定义脚本和内置模板监控MySQL核心指标(连接、查询、资源、复制),支持自动发现多实例及告警通知,结合可视化仪表盘,可有效... 目录一、核心监控指标及配置1. 关键监控指标示例2. 配置方法二、自动发现与多实例管理1. 实践步骤

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker