微信程序开发实验4

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

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1、项目创建及页面配置

本次实验有三个页面需要设计，创建一个空项目并在项目中创建images文件夹、添加三个页面

 

2、视图设计

2.1 导航栏和tabbar设计

 

 

 

2.2 页面设计

2.2.1 首页设计

预计首页设置成如下的样式

 

在index.wxml中加入如下的代码，在index.wxss中加入如下的样式

 

在index.wxml中加入for循环，循环显示幻灯片和列表的内容

 

 

在index.js中加入一些测试数据

 

首页的预期效果图如下图所示

 

2.2.2 个人中心的设计

在my.wxml中加入如下的代码，在my.wxss中加入 如下的样式

可见这里的for循环，循环加载newslist的内容，并将循环的元素命名为news

 

 

 

在my.js中加入如下的测试数据

 

个人中心页面的预期效果如下图所示

 

2.2.3 新闻页面的设计

在detail.wxml中加入如下的代码，在detail.wxss中加入如下的样式

 

 

 

在detail.js中加入如下的测试数据

 

新闻页面的效果预计如下图所示

 

3、逻辑的实现

3.1 公共逻辑的实现

公共逻辑要实现两个功能并暴露接口，功能包括获取新闻列表和获取新闻内容

在js文件中加入数据

 

 

将公共的逻辑和相应的数据添加到common文件中，在common.js中加入如下的函数。

getNewsList函数获取新闻列表，getNewsDetail获取新闻的内容

在js文件中暴露接口

 

在其他的js文件中要使用common的js函数时使用如下语句获取common对象

3.2 首页逻辑的实现

 

首页逻辑包括获取新闻列表、跳转到相应的新闻页面

 

如图所示，在onload函数中引用getNewsList函数获取新闻的列表并更新数据。

为了实现点击跳转到相应的新闻页，在js文件中加入函数goToDetail，使用navigateTo跳转到新闻业并在url中附加参数id

3.3 新闻页逻辑的实现

在detail.js中加入下面的逻辑

 

 

用onload函数接收url传递过来的id，使用common中的函数根据id获取新闻内容。

add和cancel函数是关注和取消关注的按钮，使用wx的函数将关注信息储存在本地的缓存中，并用setdata将isadd信息反置。

3.4 个人中心的逻辑实现

个人中心要实现三个功能，用户的登录、个人收藏的加载

在js中加入如下的数据

 

在js文件中加入如下的逻辑

 

 

 

点击按钮触发getuserinfo函数获取用户信息，函数的内容参考实验1.

getmy函数用来获取新闻的列表，通过wx的函数获取本地的缓存获取相应的新闻列表。

gotodetail和index的gotodetail函数的功能相同，可以跳转到相应的页面。

3.4 清除临时数据

清除index.js、my.js、detail.js中用来测试的临时数据

三、程序运行结果

列出程序的最终运行结果及截图。

1、首页展示

 

2、新闻页面展示

 

3、新闻页面点击收藏展示

 

4、个人中心展示

 

5、个人中心登录展示

 

四、问题总结与体会

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

问题：个人中心页面点击登录后，会弹出身份授权的弹窗，弹窗还没有关闭，收藏信息就自动更新了。

解答：使用getuserprofile函数获取用户信息会有一个身份信息的授权弹窗。我们写的函数是只要触发了登录按钮，就会读取本地信息并更新数据。这里可以添加一个变量并用wx:if组件，当这个变量为真时，再更新数据，这个变量的真假可以在getuserprofile函数中更新。

体会

这个实验我们实现了一个简单的新闻小程序，综合所学知识，并在开发过程中熟练引用了真机预览、调试等操作。学习到了wx:for和wx:else、幻灯片组件、调用本地缓存的函数和共有函数、共有数据的使用。

实验内容虽然比较多，但是实验文档很详细，所以做起来并没有很大的困难。