个人项目实验报告

2023年夏季《移动软件开发》实验报告

姓名： 学号：

姓名和学号？
本实验属于哪门课程？	中国海洋大学23夏《移动软件开发》
实验名称？	个人项目：桑梓之旅——探寻家乡之美
博客地址？	XXXXXXX
Github仓库地址？	shineahead/Mobile_software_Hometown: 移动软件个人项目 (github.com)

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

1、以家乡为主题开发一个小程序

二、实验步骤

2.1 项目设计

• 初步的设想将该小程序的底部导航栏分为四块：主页、美食、景点、我的
• 由于此项目的设计灵感实在枯竭，故展示的内容较为老套，所以我把中心主要放在界面美化以及功能丰富上去，例如：在每道美食和旅游景点下面都可以进行评论等操作，提高用户的交互性

2.2 项目创建及配置

• 由于这部分比较简单，此处不再赘述

2.3 主页设计

主页：小程序的初始启动界面，那么应该是以展示为主

• 导航栏：此处随意选了一个配色，可能后面还会修改

• 轮播图：这里精选了四川的几个代表城市来进行展示，为了美观，将边框都进行了一些圆化处理

• 导航图：此处用三个图标来展示四川的特色：辣、玩以及大熊猫，这些几乎也能够代表四川大部分地方的特色了，所以放在较为明显的地方

• "四川发源"按钮：点击该按钮之后跳转到详情页面，详细解释四川的来历和发展等故事。同时，为该按钮设置hover-class属性，当按下按钮的时候会更改按钮的样式

• 四川杂闻：在这里讲述一些四川非常有趣的事情，例如：四川男人大多数是不是耙耳朵之类的事情，点击之后跳转到详情界面

• 四川发源页面

通过该页面可以跳转到另外一个页面，介绍四川省的发源以及湖广填四川的事件。整体的布局：图片、图片和文字配套描述。通过使用view组件的flex属性来进行布局。同时，为了美观，让图片的边框以及文字的边框都加上圆化处理

1. 顶部图片

2. 四川发源模块

3. 湖广填四川模块

• 杂闻详情

通过点击不同的杂闻，会携带不同的参数进行跳转，这里为了标识不同的杂闻，给不同的杂闻标记不同的id。整体布局：最上方是一张图片，接下来是发表信息、标题、正文内容

• 图片部分

• 发表信息

• 标题和正文：这里为了使整体的布局更加有趣一些，所以在文字中添加了一些小表情。这些小表情都采用浮动定位，方便布局

2.4 主页逻辑实现

主页的逻辑实现主要包括：1、点击"四川发源"按钮跳转到介绍四川的页面；2、点击四川杂闻列表跳转到对应的页面

• “四川发源”：通过给view组件绑定一个bindtap事件，便可以在JS文件中处理点击，比较容易，因为它不携带跳转参数

• 四川杂闻列表：点击列表中的元素跳转到对应的页面，需要携带id参数

• 但是由于目前各个页面的数据还没有写到接口中去，所以在这里先使用临时的JS数据来进行代替

• 为了方便管理数据，在utils里面管理所有的四川杂闻数据，然后提供接口给其他文件访问

• 于是现在可以点击不同的列表显示不同的按钮了

• 音乐播放：为了播放音乐，需要先做一些准备工作：先把指定播放音乐的路由确定，然后创建一个音乐组件的上下文。最后根据小程序的生命周期函数，在onShow函数中进行播放，在onHide函数中进行停止，如下图所示

2.5 美食设计

在美食这个模块，我的标题是——古川美食记。通过在这个界面展示不同的美食，并且可以点击进入不同美食的详情页。最开始只展示几道美食，通过不断下拉刷新加载新的数据，具体的样式仿照的是美团外卖的展示方式

• 在美食界面，仍然具有一个轮播图，不过此处的轮播图都是围绕四川味道这个主题来进行展开的

• 为了展示的方便，我在轮播图下面把要展示的美食分为了四类：川菜经典、川味小吃、川式烧烤、地方特色。并且点击不同的导航栏下面的展示列表便会有不一样的菜品，这样增加了用户的交互性，使得体验更加完整

• 接下来为了布局的多样性，在中间界面插入了一张图片，用来展示麻辣火锅的特点，起到承上启下的作用

• 最后就是集中展示菜品的地方了，通过上面的点击事件，可以在这里展示不同的菜品，并且我想先加载部分菜品，等用户使用上拉操作的时候再加载一些菜品。这样一步一步加载符合现在小程序的设计思路，也增加了用户的体验性

不仅如此，我还设计了通过点击不同的美食界面跳转到对应的详情页面。详情页面需要展示的信息有：标题、图片、简介、评分以及评论区。这些元素能够极大地丰富界面并增加用户的体验性

• 标题和图片

• 简介和评分

• 评论区：如下图所示，当评论区中没有评论的时候，会显示当前评论区为空，当评论数量不等于0的时候，该条信息则不用显示。目前打算的是使用微信小程序的本地缓存来进行评论的存储和展示

2.6 美食逻辑实现

美食界面的主要逻辑如下：1. 点击不同的菜系显示不同的菜品列表 2.点击美食进入对应的详情页 3. 上拉刷新页面 4. 下拉加载更多数据

1. 点击不同的菜系：切换菜品系列待会再处理，此处先切换文字即可

2. 点击美食进入对应的详情页

3. 上拉刷新页面

4. 下拉加载更多数据

首先需要在food.js中维护一个变量count，用来表示当前页面所需展示的美食数量，然后下拉触发事件不断增加count的值，这样就可以实现下拉加载更多数据的操作了

• 设置下拉触底距离

• 设置上拉触底的事件

• 点击不同的种类展示不同的川菜菜品

• 点击发表评论

• 收藏按钮的实现：点击收藏美食，再次点击之后取消收藏

2.7 景点设计

景点界面的整体便是为了展示十大景区人气榜单，故上面的贴图仅是为了给用户展示排版等。其次，在中间还会插入一段文字，用来向用户建议去四川旅游

• 展示图片和文字界面

• 景区列表，由于此处没有导入数据，所以在此处仅展示模板界面

• 详情界面：点击不同的景点可以对应跳转到对应的详情页。同样的，在详情页也可以进行发表评论

2.8 景点逻辑设计

景点的逻辑设计只有点击景区跳转到对应的详情页面

• 给不同的景区设置不同的id，并且在跳转的时候携带不同的id进行处理，从而能够获取到不同的信息

• 成功进行了跳转

• 在景区详情页面进行评论的功能类似于在美食界面的评论，所以此处不再赘述

2.9 我的设计

这个界面是个人中心，可以在这里展示一些个人的基础信息，如：昵称、性别、生日等等属性。此外，还可以在这里查看个人收藏界面，也即个人收藏的美食列表

• 导航栏设计：最开始想的是个人页面的导航栏和主页保持一致性，这样显得比较合理。之后觉得如果把到导航栏进行清空，与下面的页面共同显示图片的话比较美观。所以首先需要在json文件中设置自定义导航栏属性，之后就可以随意的自定义了。

• 背景图设计：为了使界面比较美观，所以在这里采用层叠的方式进行布局：最下面的是背景图，然后便是信息框，最上面展示的是头像，即

• 性别选择：为了实现性别选择的布局，首先去到微信官方文档去找如何设置样式。未果之后直接在百度上进行检索，发现对于radio样式的设置比较麻烦
  1. 默认的样式选择

• 2. 选中的样式

• 3. 对勾的样式

• 最后仿照上述样式设置完成之后

• 生日选择：由于微信小程序自带有picker选择器，可以自定义mode属性：选择地区、时间等等，这里需要其使用date属性，便可以成功选择时间日期

• 最后整体页面布局的样式如下：整个用户信息框利用一个form表单进行限制，这样可以使得点击提交按钮之后可以拿到所有对应的信息

• 我的收藏界面

  我的收藏界面需要展示出在美食界面收藏的食物，并且我还添加了一个美食推荐的模块，可以随机给用户推荐一些美食

• 此外，点击不同的美食图片也可以跳转到对应的美食详情界面，在详情界面如果取消收藏之后，回到该界面的时候页面数据也进行重新更新了
• 不仅如此，从下图中可以看出：我给每道美食都设置了一个喜爱程序的评分，通过点击不同的星星便可以给不同的美食标记不同数量的喜爱程度，能够增加与用户的互动性。并且为了避免枯燥，菜品的收藏顺序是按照左右依次排布的顺序。

• 在美食收藏的下面便是杂闻收藏，通过在主页的杂闻详情页面进行收藏，可以在这里展示不同的文章列表。同样地，点击不同的列表也可以跳转到对应的详情页面

• 最后，我在此页面的底部加入了查看更多的图片，通过点击该图片，可以跳转到美食页面进行美食浏览

2.10 我的逻辑设计

个人中心界面的主要逻辑包括：1.点击生日进行生日选择 2.点击头像进行头像更换 3.点击查看收藏按钮查看自己的收藏 4.点击提交修改来提交信息到后台进行处理

• 生日绑定事件：给picker组件绑定一个事件，在选择生日的时候进行替换处理，通过bindchange属性来进行绑定

• 查看收藏：收藏界面暂时还没有进行设计，所以只是先补充跳转代码，之后再进行收藏界面的编写

• 提交修改：在这里有一个小逻辑需要注意——即当用户输入的信息不够完整的时候不予显示，在屏幕中间提示用户注意

• 修改头像：通过点击头像触发image组件的点击事件，然后进行头像的替换。在这里只是简单地把新头像的临时文件路径给存储了下来，并没有存储在数据库中，所以后续还需要进一步完善其功能

三、程序运行结果

• 主页展示

• 美食界面展示

• 美食详情页展示

• 景点界面展示

• 我的界面展示

• 我的收藏界面

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

4.1 遇到的问题

• 问题一：音乐的url正确但是无法播放音乐

• 解决：在网上查找了很多博客，并且学习了创建音乐上下文的方法未果后，是不是有可能该音乐的域名还没有进行配置，所以导致的跨域报错。在域名新增了该音乐路由之后果然不报错了…

• 问题二：当输入text框的内容含有大量的英文或者数字的时候，显示无法换行

• 解决：在文字中加入该样式即可解决

  <text style="word-break: break-all;">{{item.content}}</text>
  

• 问题三：各大音乐平台的url地址会发生变化，可能是为了防止恶意爬取信息
• 解决：暂时还未想到解决方法，不能使用了之后重新获取一下即可
• 问题四：收藏美食的评分无法获取参数
• 解决：原来是我只给了左边的image绑定事件，没有给右边的绑定事件

4.2 收获和体会

• 在任何的开发过程中都会遇到很多bug之类的，但是重要的是要学会如何快速地定位到问题的所在，可以通过控制台打印、调试断点以及简单的推理来解决
• 体会到了设计页面的辛苦，拿一个设计好的页面进行开发渲染比较容易，遇到问题解决问题即可。但UI设计的闹心之处在于设计出来的界面达不到自己想要的效果却木得任何办法
• 通过这四周的移动软件开发课程，个人还是收获颇丰的，学会了很多有用的东西，假如之后自己有一些奇思妙想也可以使用小程序来进行实现
• 最后的体会就是自己还有很多的东西都没来得及学，假期还以为移动软件开发会写安卓APP，还提前准备了一点点…但是事实说明计划还是赶不上变化….

4.3 对于课程安排的建议

课程安排挺合理的，通过跟着文档动手写代码便可以学到知识。只是文档中没有给出某些代码的解释，如果能够给

• 在任何的开发过程中都会遇到很多bug之类的，但是重要的是要学会如何快速地定位到问题的所在，可以通过控制台打印、调试断点以及简单的推理来解决
• 体会到了设计页面的辛苦，拿一个设计好的页面进行开发渲染比较容易，遇到问题解决问题即可。但UI设计的闹心之处在于设计出来的界面达不到自己想要的效果却木得任何办法
• 通过这四周的移动软件开发课程，个人还是收获颇丰的，学会了很多有用的东西，假如之后自己有一些奇思妙想也可以使用小程序来进行实现
• 最后的体会就是自己还有很多的东西都没来得及学，假期还以为移动软件开发会写安卓APP，还提前准备了一点点…但是事实说明计划还是赶不上变化….

4.3 对于课程安排的建议

课程安排挺合理的，通过跟着文档动手写代码便可以学到知识。只是文档中没有给出某些代码的解释，如果能够给
出未出现过的代码解释的话就更好了