移动软件开发个人项目实验报告
跑步的浪漫：
①跑过春的浪漫，跑过秋的绚烂，跑过夏的炽烈，跑过冬的圣洁跑出生命精彩。
人生也像每一次的奔跑一样，永远都是孤独的。但你还是要这样一圈一圈地奔跑下去，精疲力尽也不能停下，直到完成任务，到达终点。在这个过程中，你会了解自己的能力，也明白自己的局限。
②跑步，不仅仅是跑出去，而是把自己找回来。
③村上春树在《当我谈跑步时，我谈些什么》中这样描述自己的跑步感受：“我不厌其烦、锲而不舍地坚持到了今日，也很愿意尽力坚持下去。正是长距离赛跑培养与塑造了现在的我，或多或少，或好或坏。只要可能，我今后也会跟类似的东西一起逐渐老去，送走人生。”
1、项目简介
①这个微信小程序的主体功能是跑步，该小程序中记录使用者在跑步过程中的跑步时长、跑步里程和跑步轨迹。在使用过程中，点击“Start”按钮可开始跑步记录时长、里程和轨迹，如果使用者想要休息一下，可以点“Stop”按钮暂停记录时长、里程和轨迹。
②为了让使用者在跑步过程中不感到枯燥，我还在跑步过程中添加了音乐播放的功能。背景音乐是“爱如海大”这首歌，给跑步提供别样的浪漫。当然音乐可以随时播放，随时暂停。
③为了让拖延症的人坚持运动，我还设计了一个运动任务清单的功能，使用者可以提前在任务清单上设定自己运动时间，运动的具体事项等等。
④因为室外跑步受天气的影响很大，所以我在小程序首页加入了当前位置天气状况的查询功能，便于使用者根据当天天气状况调整运动计划。
⑤在跑步过程中，使用者会经常查看时间，但是微信小程序的时间界面很小，只在右上角一个小框中，使用者在跑步的过程中是很难看清时间的。所以我专门制作了一个大一点的时间显示框，便于使用者在跑步过程中查看时间。
2、典型用户
①参加了OUC翼跑跑团的人
②热爱跑步的人
③想要锻炼身体但是有拖延症的人
④在跑步过程中喜欢听音乐的人
⑤认可跑步是一件十分浪漫的事的人
3、典型故事情景
①在西海岸校区，早上起来伸伸懒腰，用跑步唤醒新一天的自己。沐浴在清晨的第一缕阳光，贪婪的吮吸着青草的芳香，感受着露珠的生机，在跑步过程中看着小程序里跑步里程和跑步时长不断跳跃增加，感受生命中亮丽的色彩……
②选择一个气候宜人的天气，听着爱听的音乐，在外面自由自在地跑步，这个时候没人能打扰你，没人能左右你，你只是活在了当下的自由自在。当你伴随着音乐的旋律越跑越带劲儿的时候，仿佛进入了某种境界，这种境界无法言说，总是想让此种境界能多待一会，再多待一会儿。此时，所有的烦恼，压力，妄想，种种的负面情绪都烟消云散了，身体和精神达到了前所未有的契合。
③我们跑到山巅，仿佛可以和日月星辰对话；途经海边，仿佛可以和江河湖海晤谈；经过林间，仿佛可以和每一棵树交心；跑过草地，仿佛可以和每一株草私语。在跑步过程中，我们感悟到宇宙浩瀚，自然可畏，呼吸自由，生命可敬。
4、当前完成情况
当前已实现的功能如下：
①跑步记录时长和里程。
②可以生成跑步的轨迹
③跑步时随时播放和暂停音乐
④创建运动任务清单
⑤查询天气
⑥大时间框显示
5、包含的页面
① index页面
Index页面为微信小程序的首页，主要有包含“任务”和“跑步”的导航栏和查询天气的功能
②run页面
Run页面为跑步时的界面，具有开始运动（Start）和暂停运动（Stop）的按钮，同时具有查看跑步时长和里程、查看时间、跑步所在位置地图展示，也具有跑步时随时播放和暂停音乐的功能。
③ task页面
task页面是用来创建、修改、删除运动任务的页面，同时在这个页面也可以查看之前创建的运动任务，提醒使用者按时完成预定的运动任务。
④ model页面
model页面是用来选择创建运动任务时的背景模板的
⑤ editor页面
editor页面是编写运动任务的页面，可以预定任务时间，任务标题，具体任务内容
6、各个页面的控件以及技术
① index页面
控件：
使用的技术：
①这个页面并不需要很高深的技术，只需要将一些基础组件排布组合即可。这个页面相对难度较大的是用来实现页面跳转功能navigator组件，使用这个组件的时候需要注意的是用url属性确定需要跳转的页面，同时在app.json页面中加入这个页面的声明。
②因为index页面是微信小程序的首页，所以我需要将这个页面的布局修整得好看些，这个时候就需要用到flex，flex布局是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局，它提供了元素在容器中的对齐，方向以及顺序，可以动态调整大小和位置，其主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。
② run页面
控件：
使用的技术：
①跑步的界面主要使用了微信小程序的获取位置APIwx.getLocation()和地图组件map。首先实现一个计时器进行计时，通过wx.getLocation()获取坐标，把获取到的坐标存在一个数组中，通过坐标每隔一段时间获取里程，进行累加得到总里程。同时为了获取跑步时使用者的轨迹，就每个一段时间获取一个坐标在地图上显示出来，最终可以得到大致的跑步路线。
②获取跑步时候的位置时采用了API里面的火星坐标gcj02类型，但是这默认是wgs84 返回 gps 坐标，但是精确度不过高，所以要改为gcj02类型，gcj02 返回可用于 wx.openLocation 的坐标。
③设置播放音乐的功能时，通过wx.getBackgroundAudioManager获取全局唯一的背景音频管理器。同时，为了在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。使用onUnload和onHide事件中暂停音乐的播放，使用onShow调用播放事件。
④在这个界面获取当前时间首先需要在需要使用到时间的页面进行导入获取时间的util.js文件，其次获取在需要使用到时间的页面的js文件中调用util.js中的formatTime方法获取当前时间，最后到util.js文件中修改或者添加自己需要的函数。同时，一开始只能通过点击按钮去调用函数获取某一时刻的时间点，并不能实现时间的实时跳动，也就是说，如果想看时间只能不断点击按钮获取当前时间，所以我在onLoad函数里面设置一个定时器，每过一秒钟就调用一次getTime函数，从而获取到实时的时间。
⑤在这个微信小程序中，使用地图的时候，需要用到map组件的基础属性，比如显示带有方向的当前定位点，显示指南针，开启卫星图等等。
③ task页面
控件：
使用的技术：
①这个页面使用了之前我们做的6个小程序没有用到的组件scroll-view，它是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动。
② “我的运动任务”这个<text>组件一开始一直在页面中间的位置，没有位于我预定的该页面的顶端位置，而且也不能调整。所以我将该组件的position属性改为relative，然后再在可视化工具上通过鼠标拖动该组件，最终实现将该组件放在task页面的顶端。
④ model页面
使用的技术：因为模板是由四张图片组成，这四个模板有很高的相似性，所以在组件上使用wx:for控制属性绑定一个数组，然后使用数组中各项的数据重复渲染该组件。
⑤ editor页面
使用的技术：
①因为需要用到使用者编写的任务，所以需要表单组件form，它可以将组件内的用户输入的switch input checkbox slider radio picker 提交，同时当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
②为了取得使用者编写的任务，需要用到input 和textarea用来实现文本输入，但是它们之间的区别是input 用来实现文本输入，是单行的，textarea是多行的输入实现
7、测试及上线运行情况
首先一进入微信小程序是，看到的首页如下：
首先映入眼帘的是“海大蓝”的渐变背景，还有具有海大特色的海大校徽、校训等等。
有两个导航按钮，一个是“任务”，另一个是“跑步”，点击“任务”按钮可以加入任务界面，点击“跑步”按钮可以进入跑步界面
接下来就是天气查询的界面了，默认是地理定位为“山东省青岛市黄岛区”，也可以点击位置来更改位置。然后就是大致的天气信息：气温和天气预报及天气预报符号。如果想了解更多的天气信息，可以下拉，可以得到以下的界面：
这样就得到了更多天气情况的细节信息，比如湿度、气压等等，便于我们开展体育运动。
当我们点击“跑步”按钮的时候，就可以进入跑步的界面，如下图所示：
这个界面可以看成有4个部分组成，分别是：开始和暂停跑步，播放和暂停音乐，跑步数据的展示，跑步所在位置的地图。
点击“Start”按钮的时候，微信小程序就开始记录跑步时长和跑步里程了，点击“Stop”按钮的时候，微信小程序就会暂停记录跑步时长和跑步里程。
在“Start”按钮的右边有一个音乐的按钮，可以随时播放和暂停音乐。我设计的这个微信小程序默认进入跑步的页面就会马上播放音乐，如果点击暂停音乐的话，音乐图标会发生改变。如下图所示：
跑步的“Start”和“Stop”按钮之下是跑步的具体数据和时间，跑步的具体数据有跑步的里程和时长，为了方便使用者在跑步的过程中查看时间，我在这里还加入了大一点的时间框。
在此之下，是使用者在跑步过程中所在位置的地图，在该地图中可以标出使用者在跑步过程中的跑步轨迹。
以下是微信小程序在跑步的时候的运行截图（用手机端运行的，因为跑步的时候拿着电脑跑是不现实的）：
从以上的两张截图可以看出这个微信小程序会在使用者跑步的时候记录使用者的跑步时长、里程和轨迹。
如果在首页中点击“任务”按钮的话，就进入以下的界面：
因为现在还没有创建过任务，所以这里的任务列表是空白的，在“我的运动任务”这个文字框的右边有两个按钮，一个是创建任务，即加号图标那个，另一个是编辑任务，即纸笔图标的那个。
点击创建任务的按钮之后，可以进入以下界面：
这个是选择创建任务时的模板，共有4中模板可以选择，选中了喜欢的模板之后，点击保存即可正式进入编辑任务的界面：
然后我们就可以创建自己想要的运动任务了。日期是使用者做运动的预定日期，标题是是使用者做的运动，内容是运动的具体细节。比如下图所示：
通过日期选择器选择做运动的具体日期，然后再标题栏写上“跑步”这个运动项目，在内容栏写上具体运动的细节，比如“上午9点在西海岸校区跑2千米，在8分钟之内完成。”
编辑好了运动任务之后，点击保存就创建好了任务。
之后会自动跳转到“我的运动任务”界面，如下图所示：
这样就能看到我们刚刚创建的任务了。
如果任务完成了或者任务因为其他原因不能去做的时候，就点击一下“我的运动任务”文字框的右边那个纸笔按钮来删除任务。点击该按钮了之后，界面如下图所示：
然后点击需要删除的任务左边的对钩，然后再点击删除
然后再点击“完成”，
此时，需要被删除的任务就已经被删除成功了。
以上就是我的微信小程序测试及上线运行情况。
8、遇到的问题以及解决方法
①问题1：在制作跑步界面的时间时，一开始只能通过点击按钮去调用函数获取某一时刻的时间点，并不能实现时间的实时跳动，也就是说，如果想看时间只能不断点击按钮获取当前时间
解决方法：我在onLoad函数里面设置一个定时器，每过一秒钟就调用一次getTime函数，从而获取到实时的时间。
②问题2：在制作播放音乐功能的时候，发现音乐播放不了。
解决方法：查看微信小程序官方开发文档，发现音乐播放和暂停的方法发生了改变，就像之前我们做的第一个微信小程序获取微信头像和昵称的方法改变了一样，更改好了新方法之后就可以播放了。
③问题3：改了音乐播放的方法之后，发现过了一段时间音乐又不能播放了。
解决方法：经过不断在网上查找资料，发现是之前用到的网易云音乐API失效了的原因，更换另一个网易云音乐的API即可。
④问题4：在电脑定位总是不准确，一直定位在青岛市政府的位置，但是在手机端测试的时候定位是准确的。
解决方法：我在微信公众平台的微信开放社区找到了答案，wx.getLocation() 获取不了具体地址，获取的坐标都是政府坐标
⑤问题5：一开始就想记录跑步的里程，但是无从下手。
解决方法：首先实现一个计时器进行 计时，通过wx.getLocation()获取坐标，把获取到的坐标存在一个数组中，通过坐标每隔一段时间获取里程，进行累加得到总里程。
⑥问题6：在task页面中，“我的运动任务”这个<text>组件一直在页面中间的位置，但是我原本设计是在页面的顶端的，而且也不能调整。
解决方法：我将该组件的position属性改为relative，然后再在可视化工具上通过鼠标拖动该组件，最终实现将该组件放在task页面的顶端。
9、心得体会
①通过这个实验，我对微信小程序有了很深刻的认识和理解，对微信小程序各个文件、各个控件的作用都有了深刻的认识，知道使用它们的方法。
②在设计控件布局、界面UI的时候，花费了很多的时间和精力。比如界面中各个控件的配色看起来简单，但是实际设计中，需要尝试很多次才能找到合适的配色。
③这个微信小程序需要用到很多的API来获取更多的功能，之前在用Java写程序的时候，对API的理不够深刻，做完了这个微信小程序之后能熟练掌握API了。同时在使用API的过程中，我能深刻意识到微信小程序API具有方便的调起微信提供的能力的优点，如获取用户信息，本地存储等，节省了开发时间和精力。
④这是我第一次做微信小程序的大项目，能深刻感受到开发的整个流程。在设计微信小程序的功能时，需要站在用户的角度上思考问题，比如我制作的整个微信小程序需要为跑步适配天气查询、任务单、听音乐等功能。
⑤在做这个个人项目之前，我思考了“什么是浪漫”很久，想的多了，就发觉生活的每一件事都是非常浪漫的，只是我们没有愿意去感悟，因为这些事都太平淡、太平常了，做了这个项目之后，我也对生活多了一种了解，这本身也是一种浪漫。
⑥虽然在做这个个人项目之前，我还做了6个微信小程序的小实验，对微信小程序的开发有大体上的理解，但是在做个人项目的时候，还是遇到很多的问题没有见过，需要自己一个人慢慢查找资料。这个过程很艰难，也会让人觉得很急躁，但是经历了这个过程，我对信息检索的能力有了很大的提高，同时在解决了问题之后的成就感也在提醒我做这件事是有价值的。