Re:从0开始的小程序开发——毕设全过程记录

第一行:咕咕咕。 

第二行:感谢美图秀秀对我毕设的大力支持。

一、基础框架

后端:MVC模式

前端:MVVM模式

Re:从0开始的小程序开发——毕设全过程记录_第1张图片

二、ui设计

一、首页设计

Re:从0开始的小程序开发——毕设全过程记录_第2张图片

用swiper组件实现首页轮播图(黑马教的是利用页面生命周期函数获取轮播图数据并显示,利用onload页面一加载即获取数据,可惜我没有合适的素材接口,甚至图片都是我自己用美图秀秀p的)

利用noticebar组件实现公告

Re:从0开始的小程序开发——毕设全过程记录_第3张图片

利用navigator组件配合图片实现点击后页面跳转,跳转到tabbar页面的话则需要配合switchTab使用。

用tabbar组件实现底部导航栏功能,用pagepath实现点击后页面跳转,利用icon和selecticon实现点击后不同图标功能

二、文档部分设计

三、商品列表设计

Re:从0开始的小程序开发——毕设全过程记录_第4张图片

Re:从0开始的小程序开发——毕设全过程记录_第5张图片 Re:从0开始的小程序开发——毕设全过程记录_第6张图片

利用uni-fab组件实现悬浮按钮功能,修改组件样式要从uni-fab文件中,修改uni-fab.vue文件,可通过查找uniicon.tff文件(用在线字体编辑器来查找tff文件or修改tff文件),修改uni-icon中的type属性来修改悬浮按钮的样式,修改颜色同样要从vue文件中修改。

用linethrough实现的text划线

底部元素总是被导航栏遮挡,搜了一下说是利用边距属性增加一个tabbar高度的下边距就可以,即padding-bottom: var(--window-bottom),但是我试了试不太行,不知道是不是不兼容h5的问题(微信开发者工具不太灵敏老是不显示修改,所以我实时调试都是在h5页面中进行的),所以增加了一个高度50px的view利用上边距来占空。

四、我的页面设计

五、编辑页设计

利用editor组件,分列标题和文本部分

为了让它更高大上一点所以用@tap事件增加撤销按钮

六、登录页面设计

Re:从0开始的小程序开发——毕设全过程记录_第7张图片Re:从0开始的小程序开发——毕设全过程记录_第8张图片

注册页:利用form组件实现表单设计并利用rules对输入内容进行限制,利用showtoast实现点击按钮跳出提示内容。

登陆页:普普通通的input输入框,但是利用函数根据输入字符串的长度判断输入正确与否

七、成为会员页设计

Re:从0开始的小程序开发——毕设全过程记录_第9张图片

再次感谢美图秀秀对我的大力支持,依旧是利用navigator组件实现跳转,打算直接跳转到购买页面,但是还没写,不知道还来不来得及写。 

八、来点音乐页设计

三、数据库链接

四、其他问题

1. 

大无语了,我不会真的要毕不了业吧。 

重新编一下一般就可以了,虽然我也不知道为啥。

2. 发布出现错误

Re:从0开始的小程序开发——毕设全过程记录_第10张图片

是说文件太大了超过限制,可以压缩图片或者对小程序分包,分包可以看官网教程分包(官方文档yyds!)

3.30:好羡慕写论文的同学,我一个菜鸡自学写系统真的好难。

4.1:搞什么高大上的vue,课设都是javaweb项目或者无框架前端

4.9:正好趁这个机会系统地学一下系统开发,未来的全栈开发工程师就是我!

4.13:我搞开发最大的问题:审美不行。ui设计太丑了啊啊啊啊啊

4.14:我真是一个合格的摆烂人

4.15:我真的能毕业吗

4.16:官方文档也太好用了吧

4.17:紫色真的好好看哦

4.19:完了,我又在摆烂了

4.24:摆烂人延毕警告

你可能感兴趣的:(————专业课相关————,前端,vue.js,ui)