软件工程课程作业--UON

最新推荐文章于 2024-07-25 14:34:55 发布

雨君老师

最新推荐文章于 2024-07-25 14:34:55 发布

阅读量225

点赞数

分类专栏：软件开发实验文章标签：软件工程前端 javascript

本文链接：https://blog.csdn.net/yujun1_11/article/details/126580225

版权

软件开发实验专栏收录该内容

7 篇文章 0 订阅

订阅专栏

UON

一、项目介绍

项目理念来源于朋友的朋友所发布在notion上的一个概念尝试，对于Fragments of a Hologram Rose（中文名：全息玫瑰碎片）的理念。全息玫瑰碎片有这样一种特点:如果你捡起任何一块碎片，将其照亮，每一块都会呈现出一朵完整的玫瑰图像。在δ波的作用下，我看到你正是那朵玫瑰，而我就是那块方糖。在“浪漫”主题下，关于那种近未来的高科技下低品质生活中所特有的的迷人的失落感，犹如《星际牛仔》片尾的那朵玫瑰，早已讲出Spike的故事——沙漠中的玫瑰，唯用鲜血浇灌。我看到pois便很自然的联想到了poison，“嗯，”我自大地想到，“这是一把双刃剑，或许如同卡斯塔尼达的性灵之旅，是堕落和迷乱，但也会让人真正地看到这个兔子洞究竟有多深。”继续发现，赶紧笑着起身去找了几颗糖放进嘴里。我发现口中的糖可以带来清凉，却不像UON那样轻柔、美好而宁静，它像迷雾的有神，也像灯的漆黑，似乎铺天盖地，却也有迹可循，不需要词与物的相互注释也可以将我引向它。
在这里插入图片描述

本项目想展示的浪漫就是对于全息玫瑰碎片的追寻，探索失落感。请添加图片描述
本项目的典型用户是任何对未来抱有幻想的人，这并不是亚比的小圈子内的狂欢，而是为大众献上的礼物。

本项目的典型故事情景或许是某个雨天，窝在宿舍，捧杯热饮，舒舒服服地看上一眼。

二、完成情况

由于taber和播放器的冲突，做了一次版本迭代。第一代有四个界面，可以自由调度。第二代删减到一个界面，但是实现了完整的功能。

一代版本

主页：有一个轮播图片和列表文章组成
在这里插入图片描述
共鸣：设定了背景图

我的：可以实现用户的登录

二代版本

主页：将原先的三个页面融合为一个，保留轮播图，将列表改为图标
在这里插入图片描述

点击UON自我介绍
在这里插入图片描述

在这里插入图片描述

共鸣界面：作为播放页面
在这里插入图片描述
播放列表：正在播放的歌曲和接下来要播放的歌曲

三、控件与技术

包括四个页面
主页index，详情页detail，共鸣页found，我的my
在这里插入图片描述

做UI设计的时候，用了一个组件库iView Weapp
在这里插入图片描述
关于其使用，用card做例子

使用情况

音频API

创建音频时需要先创建一个对象实例，从而引用该对象的方法和属性

var audioCtx=wx.createInnerAudioContext()

swiper组件
swiper组件是滑块视图容器，本项目中用于实现主界面轮播图。

slider组件
scroll-view组件用于实现可滚动视图区域。

animation动画使用
用于播放音乐时，专辑图片的转动。

四、测试及上线运行情况

本项目现阶段并没有正式上线
在这里插入图片描述

五、问题与解决

1.文本换行
找到的解决方法是在文本中添加\r\n，但是没能解决问题，后面发现要在中添加属性style=“white-space:pre-wrap”
2.组件库添加
这里耗费了很长时间
npm的权限不够
app.json
“usingComponents”: {
“i-button”: “…/…/dist/button/index”
}
在这里插入图片描述
3.底部taber和播放器冲突
原先的设计如下，但是在添加播放器后，出现冲突，只能将其删除

播放器不仅和底部冲突，还和背景冲突

4.代码包过大
我一开始认为是图片装多了，删除部分后，仍然超了，说明主要不是图片的问题。
在这里插入图片描述
按照网上的教程，分了包

      "subpackages":[
        {
          "root":"template/home", 
          "name":"home",  	
          "pages":[			
            "shop_house/shop_house"
          ],
          "independent":false  
        },
        {
          "root":"template/pay",
          "name":"pay",
          "pages":[
            "pay_house/pay_house"
          ],
          "independent":false
        },
        {
            "root":"template/hello",
            "name":"hello",
            "pages":[
              "pay_house/pay_house"
            ],
            "independent":false
          },
          {
            "root":"template/four",
            "name":"four",
            "pages":[
              "pay_house/pay_house"
            ],
            "independent":false
          }
      ],

在这里插入图片描述
参考

六、心得体会

前几次实验实际上基本是对代码的搬运，单个实验用到的组件也少，基本没有遇到问题。到这次实验，从想法到实现，全部由自己完成。将想法转化实现时，就需要考虑到很多问题，有些地方没考虑好就会影响整体布局。第一代产品，在添加播放器的时候，发现冲突问题，调试很久都没办法，只能直接砍掉底部页面切换，转为单个页面滑动。到第二代，只能是把一代的一些额外功能给它阉割，以便能实现基础功能。除了产品本身，还有很多其他的，比如关于第三方组件库调用，先是安装npm，然后又在程序里面添加，中途报了很多错误，只能慢慢一步一步回推，找出错误改正，是一个不断尝试的过程。