实验四实验报告

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

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

（1）创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5glJBpKG-1661237215354)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820101802926.png)]

（2）页面配置

1、将app.json文件pages属性中的pages/logs/logs删除，在app. json文件pages属性中继续追加pages/ detail/ detail和pages/ my/ my，按快捷键Ctrl+S保存修改,然后会在pages文件夹下自动生成detail和my目录。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fpeK1vS8-1661237215357)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820102046420.png)]

3、删除utils文件夹中的所有内容，删除pages文件夹下的logs目录及其内部所有内容，删除index. wxml和index. wxss中的全部代码，删除index.js中的全部代码,并且输人关键词“page”找到第二个选项按回车让其自动补全函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oksqExRu-1661237215359)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820102258817.png)]

4、删除app.wxss中的全部代码，删除app. js中的全部代码,并且输人关键词“app"找到第一个选项按回车让其自动补全函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZimdG5K-1661237215360)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820102400273.png)]

5、创建images文件夹以及utils文件夹。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nimQNPnL-1661237215361)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820102631481.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQvLogt2-1661237215363)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820102835548.png)]

（3）视图设计

1、在app. json中对window属性进行重新配置来自定义导航栏效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2FhzueS-1661237215365)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820103003636.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99j82vJa-1661237215366)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820103011913.png)]

2、在app.json中追加tarBar的相关属性代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQsmyJ2n-1661237215367)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820103527528.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2y0WakgN-1661237215369)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820103643811.png)]

3、修改wxml代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1AU1JYV2-1661237215370)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820103918549.png)]

4、为组件添加wx:for属性循环显示幻灯片内容和新闻列表数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lJS2NIY6-1661237215371)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820104410663.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-symKcsdK-1661237215373)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820105045014.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFdmL5Aq-1661237215374)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820105933474.png)]

5、在js文件中data中临时录入几个测试数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AWAYAU15-1661237215375)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820110839584.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZCoUqZOV-1661237215376)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820110857533.png)]

6、使用组件进行整体布局。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8gMfUBnK-1661237215377)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820111508559.png)]

7、接着为这两个区域添加内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8zuoQgTd-1661237215378)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820111706031.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Hfsei6o-1661237215379)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820112159675.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmK71U52-1661237215380)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820112426703.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rxzfvHKn-1661237215381)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820112509494.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NId7gnQN-1661237215382)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820112529098.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bODb828J-1661237215383)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820112552464.png)]

8、由于新闻列表的样式与首页完全相同,没有必要重复样式代码,否则会造成冗余,可以将
index.wxss中新闻列表样式的相关代码挪到app.wxss中公共使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HsjxUTW8-1661237215384)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820112817113.png)]

9、为了进行布局和样式效果的预览,还需要在JS文件的data中临时录人测试数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35t3KDFH-1661237215385)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820113131125.png)]

10、由于暂时没有做点击跳转的逻辑设计,所以可以在微信web开发者工具顶端工具栏中找到“普通编译”下拉选项,选择“添加编译模式”,然后追加对于detail页面的直接浏览效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e0S3teAu-1661237215386)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820133947691.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYnLnr8j-1661237215388)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820134129439.png)]

11、使用组件进行整体布局。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8E6dC4P-1661237215389)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820134722089.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VSK2UXKf-1661237215390)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820135304775.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2TZvN3AM-1661237215391)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820135313542.png)]

12、为了进行布局和样式效果的预览,还需要在JS文件的data中临时录人一条测试数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OKIwDQS-1661237215392)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820135512892.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-79gz7yh5-1661237215393)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820135545751.png)]

13、在各页面的JS文件顶端引用公共JS文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CfD5FPTY-1661237215394)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820140029331.png)]

（4）首页逻辑

1、新闻列表展示使用了{{newsList}},因此需要在页面JS文件的onLoad函数中获取新闻列表,并更新到data属性的newsList参数中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nt4iXRbI-1661237215395)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820140522380.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QpZIDWg-1661237215396)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820140607733.png)]

2、若希望用户点击新闻标题即可实现跳转,需要首先为新闻列表项目添加点击事件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JX6qVYKL-1661237215398)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820140857517.png)]

3、为< text>组件添加了自定义触摸事件函数goToDetail,并且使用data-id属性携带了新闻ID编号。

教程里写的在对应的detail. js文件中添加goToDetail函数的内容，并不能够实现跳转，应该将goToDetail函数添加到index.js文件中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jaR9uHrf-1661237215399)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820143049716.png)]

（5）新闻页逻辑

1、在首页逻辑中已经实现了页面跳转并携带了新闻ID编号,现在需要在新闻页接收ID编号,并查询对应的新闻内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ljE8RMX8-1661237215400)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820143545124.png)]

2、修改detail,wxml代码,追加两个组件作为添加/取消收藏新闻的按钮。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zPl6cBEH-1661237215400)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820143950468.png)]

对应的wxss文件添加。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KR4pToTw-1661237215401)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820144048059.png)]

对应的onLoad函数代码修改如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRX42JNa-1661237215402)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820144607747.png)]

3、继续在detail. js文件中追加addFavorites和cancelFavorites函数,用于点击添加/取消新
闻收藏。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9gMGzmaU-1661237215403)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820150101172.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wkGjJgB-1661237215404)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820150129875.png)]

（6）个人中心页逻辑

1、修改my.wxml代码,追加组件作为登录按钮，并且使用wx:if和wx:else属性让未登录时只显示按钮，登录后只显示头像和昵称。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZrhlEiO-1661237215405)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820150714920.png)]

2、在my. wxml页面修改< button >组件的代码,为其追加获取用户信息事件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iafp67hW-1661237215406)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820150959884.png)]

3、在my.js文件的Page()内部追加getMyInfo函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSPKlsIC-1661237215407)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820151217698.png)]

4、修改my.js文件中getMyInfo函数的代码,将信息更新到动态数据上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wXe3WjOA-1661237215407)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820151607895.png)]

5、修改my.wxml代码,将“我的收藏”后面的数字更改为动态数据效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gt4s2qkj-1661237215409)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820152036636.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9czPx6u7-1661237215410)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820152146271.png)]

6、继续在detail.js文件中追加getMyFavorites函数,用于展示真正的新闻收藏列表。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7hBaXNDJ-1661237215410)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820152600684.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vYM2f5Kg-1661237215411)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820152611901.png)]

7、修改my.js中的getMyInfo函数,为其追加关于getMyFavorites函数的调用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glIvHhMb-1661237215412)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820152924512.png)]

出现了报错。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFKhe8pE-1661237215413)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820154807083.png)]

然后发现教程出现了问题，教程里有一个文件出错了，导致我的代码位置写错了，后来将getMyFavorites写到了my.js中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WkmjUNdQ-1661237215414)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820154945970.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGwSJwyS-1661237215415)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820155040290.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UR0erMl-1661237215416)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820160345067.png)]

8、点击浏览已经收藏的新闻和首页的点击跳转新闻内容功能类似,首先修改my.wxml收藏列表的代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4AQwQvW3-1661237215418)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820160532961.png)]

9、在对应的my. js文件中添加goToDetail函数的内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2jDNxta-1661237215419)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820160744678.png[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCk6Y0zP-1661237216987)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820162943702.png)]]

10、最后需要清除或注释掉一开始为了测试样式录人的临时数据,以免影响整体逻辑效果。

三、程序运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tYXJg46O-1661237215420)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820162956136.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-536ijYQn-1661237215421)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820163025835.png)]

四、问题总结与体会

1、一开始从index页面跳转到detail页面的教程有些错误，修改代码的文件写错了，所以导致我的页面不能实现跳转，后来又重新看了一下教程发现，在对应的detail. js文件中添加goToDetail函数的内容，并不能够实现跳转，应该将goToDetail函数添加到index.js文件中。

2、后来的报错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-72rFXXtM-1661237215422)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220820154807083.png)]

也是因为getMyFavorites写的位置不对，后来修改了位置就正确了。

3、最后我的收藏部分的显示并不正确，我的显示我的收藏显示的数量要比我真正收藏的数量多一个，后来检查了一遍my.wxml收藏列表的代码，发现循环有些问题，修改代码之后显示正常。

ail. js文件中添加goToDetail函数的内容，并不能够实现跳转，应该将goToDetail函数添加到index.js文件中。

2、后来的报错

[外链图片转存中…(img-72rFXXtM-1661237215422)]

也是因为getMyFavorites写的位置不对，后来修改了位置就正确了。

3、最后我的收藏部分的显示并不正确，我的显示我的收藏显示的数量要比我真正收藏的数量多一个，后来检查了一遍my.wxml收藏列表的代码，发现循环有些问题，修改代码之后显示正常。