2023年夏季《移动软件开发》实验报告
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1.需求分析
本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。
首页功能需求如下：
（1）首页需要包含幻灯片播放效果和新闻列表；
（2）幻灯片至少要有3幅图片自动播放；
（3）点击新闻列表可以打开新闻全文。
新闻页功能需求如下：
（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；
（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；
（3）已经收藏过的新闻也可以点击按钮取消收藏。
个人中心页功能需求如下：
（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。
（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。
（3）收藏夹中的新闻可以直接点击查看内容。
（4）未登录状态下收藏夹显示为空。
2.页面配置与添加素材
在app.json中的pages属性下添加pages/detail/detail和pages/my/my，保存后生成detail页面和my页面
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
删除 index.wxml和index.wxss全部代码
删除index.js中全部代码，输入关键词page，找到Page选项回车自动补全函数
删除app.wxss中全部代码
删除app.js中全部代码，输入关键词app，找到App选项回车自动补全函数
在根目录下创建images和util文件夹，分别用于存储图片素材和JS文件
3.视图设计
3.1导航栏设计
在app.json中修改window属性配置导航栏效果
"window": {
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#328eeb",
"navigationBarTitleText": "我的新闻网",
"navigationBarTextStyle":"white"
}
3.2 tabBar设计
首先在app.json中追加tabBar的相关属性代码，属性解释见注释
"tabBar": {
"color": "#000",//颜色
"selectedColor": "#328eeb",//选中时的颜色
"list": [
{
"pagePath" : "pages/index/index",//切换页面的路径
"iconPath": "images/index.png",//tab图标
"selectedIconPath": "images/index_blue.png",//选中时tab图标
"text":"首页"//tab名字
},
{
"pagePath" : "pages/my/my",
"iconPath": "images/my.png",
"selectedIconPath": "images/my_blue.png",
"text":"我的"
}
]
}
3.3个人中心页设计
修改my.wxml文件
<!--登陆面板-->
<view id='myLogin'></view>
<!--我的收藏-->
<view id='myFavorites'></view>
为登陆面板和我的收藏区域添加内容
<!--登陆面板-->
<view id='myLogin'>
<block>
<image id='myIcon' src="{{src}}"></image>
<text id="nickName" >{{nickName}}</text>
</block>
</view>
<!--我的收藏-->
<view id='myFavorites'>
<text>我的收藏（1）</text>
<!--收藏的新闻列表-->
<view id='news-list'>
<view class='list-item' wx:for="{{newsList}}" wx:for-item = "news" wx:key="{{news.id}}">
<image src="{{newx.poster}}"></image>
<text>{{new.title}}--{{news.add_data}}</text>
</view>
</view>
</view>
修改my.wxss文件
/*登陆面板*/
#myLogin{
background-color: #328eeb;
height: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
/*头像图片*/
#myIcon{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
/*微信昵称*/
#nickName{
color: white;
}
/*我的收藏*/
#myFavorites{
padding: 20rpx;
}
3.4新闻页设计
修改detail.wxml代码
<view class="container">
<view class='title'>{{article.title}}</view>
<view class = 'poster'>
<image src='{{article.poster}}' mode='widthFix'></image>
</view>
<view class='content'>{{article.content}}</view>
<view class="add_date">时间：{{article.add_date}}</view>
</view>
修改detail.wxss代码
/*整体容器*/
.container{
padding: 15rpx;
text-align: center;
}
/*新闻标题*/
.title{
font-size: 14pt;
line-height: 80rpx;
}
/*新闻图片*/
.poster image{
width: 100%;
}
/*新闻正文*/
.content{
text-align: left;
font-size: 12pt;
line-height: 60rpx;
}
/*新闻日期*/
.add_date{
font-size:12pt;
text-align: right;
line-height: 30rpx;
margin-right: 25rpx;
margin-top: 20rpx;
}
4.逻辑实现
在各个页面的js文件顶端引用js文件，作用为使用common.js文件
var common = require('../../utils/common.js')
4.1主页逻辑
(1)新闻列表获取
新闻存储在newList变量中，因此在加载首页时（即启动onLoad函数）获取新闻，并赋值给newList
onLoad: function (options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList : list
})
}
(2)点击新闻跳转详情
在index.wxml的新闻列表项目的** 组件添加点击事件， data-id**属性携带新闻ID编号用于查询对应新闻
<!--新闻列表-->
<view id="news-list">
<view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
<image src="{{news.poster}}"></image>
<text bindtap="goToDetail" data-id="{{news.id}}">{{news.title}}--{{news.add_date}}</text>
</view>
</view>
index.js中定义goToDetail点击事件函数
goToDetail(e){
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻ID进行页面跳转
//?后面加参数名 + 后面为传递的参数值
wx.navigateTo({
url : '../detail/detail?id=' + id
})
},
此时点击首页的新闻标题，那么就可以跳转到detail界面，由于detail界面尚未设置接受函数，因此跳转到的页面内容仍为临时数据内容
4.2新闻页逻辑
(1)在首页逻辑中我们在跳转到detail界面时传递了新闻id，现在在新闻页接受id，并查询对应的新闻内容
在detail.js文件中进行修改
onLoad: function (options) {
let id = options.id
//common.js文件为我们提供了根据新闻编号查询新闻的接口
let result = common.getNewsDetail(id)
if(result.code == '200'){
this.setData({
article:result.news
})
}
}
保存后，再点击首页新闻标题即可进入对应新闻内容
(2)添加/取消新闻收藏
修改detail.wxml代码，追加两个组件作为添加/取消新闻收藏按钮，且通过wx:if和wx:else属性使其每次只存在一个
<view class="container">
<view class='title'>{{article.title}}</view>
<view class = 'poster'>
<image src='{{article.poster}}' mode='widthFix'></image>
</view>
<view class='content'>{{article.content}}</view>
<view class="add_date">时间：{{article.add_date}}</view>
<button wx:if = '{{isAdd}}' plain bindtap = 'cancleFavorites'>❤已收藏</button>
<button wx:else plain bindtap = 'addFavorites'>❤点击收藏</button>
</view>
对应wxss样式
button{
width: 250rpx;
height: 100rpx;
margin: 20rpx auto;
}
先修改onload函数，利用wx.getStorageSync(id)返回值判断是否已经收藏当前新闻，收藏isAdd = true 否则为 false
然后在detail.js中添加addFavorites和cancleFavorites事件函数
收藏功能使用到微信小程序API wx.setStorageSync()，能够非常简单实现添加收藏，获取收藏内容等功能
onLoad: function (options) {
let id = options.id
//检查当前新闻是否在收藏夹中
var article = wx.getStorageSync(id)
//已存在
if(article != ""){
this.setData({
article:article,
isAdd:true
})
}
else{
//common.js文件为我们提供了根据新闻编号查询新闻的接口
let result = common.getNewsDetail(id)
if(result.code == '200'){
this.setData({
article:result.news,
isAdd : false
})
}
}
},
addFavorites(options){
let article = this.data.article
wx.setStorageSync(article.id, article);
this.setData({
isAdd : true
})
},
cancleFavorites(options){
let article = this.data.article
wx.removeStorageSync(article.id)
this.setData({isAdd:false})
},
点击第一条新闻，跳转页面后显示未收藏，点击“点击收藏”，按钮显示为“已收藏”
回到主界面，再进入第一条新闻，显示已收藏
4.3个人主页逻辑
(1)获取微信用户信息
修改my.wxml代码，追加组件作为登录按钮，并使用wx:if和wx:else属性让未登录时只显示按钮，登陆后只显示头像和昵称
<!--登陆面板-->
<view id='myLogin'>
<block wx:if = '{{isLogin}}'>
<image id='myIcon' src="{{src}}"></image>
<text id="nickName" >{{nickName}}</text>
</block>
<button wx:else bindtap="getUserInfo">未登录，点此登录</button>
</view>
12345678
在my.js中编写getUserInfo函数，获取用户信息，并将信息更新到动态数据上
getUserInfo(){
let that = this
wx.getUserProfile({
desc: 'desc',
success(res){
console.log(res.userInfo)//这里可以在控制台输出用户信息
res = res.userInfo
that.setData({
isLogin : true,
src : res.avatarUrl,//设置用户头像
nickName : res.nickName//设置用户昵称
})
}
})
}
(2)获取收藏列表
修改my.wxml代码，将“我的收藏（1）”的“1”改为动态数据效果
修改my.wxml文件
<text>我的收藏（1）</text> 改为 <text>我的收藏（{{num}}）</text>
在my.js中的data中初始化num为0
继续在my.js中追加getMyFavorites函数，用于展示真正的新闻收藏列表。
getMyFavorites(){
let info = wx.getStorageInfoSync()//获取本地缓存信息
let keys = info.keys //获取全部key信息
let num = keys.length //获取收藏新闻数量
let myList = []
for(var i = 0;i < num;i++){
let obj = wx.getStorageSync(key[i])
myList.push(obj)//将新闻添加到新闻数组中
}
this.setData({
newsList:myList,//更新我的收藏新闻列表
num:num
})
},
然后在getUserInfo()中调用该函数
this.getMyFavorites()
初始化my.js中data的newsList为空，即删除临时新闻列表数据
这样收藏的功能实际上是将收藏信息保存到本地缓存，用户登录后读取缓存信息，将新闻放到“我的收藏”，并不算真正意义上的收藏，要想事项真正意义的收藏，则应该将用户信息和其收藏信息一并保存，如一并保存到云数据库，在读取用户信息后，到云数据库查询用户信息，进而读取用户收藏。
考虑到登陆成功后用户还可以手动更改新闻的收藏状态，因此修改my.js中的onShow函数（生命周期函数–监听页面显示），判断如果是登陆状态就刷新一下收藏列表。
onShow: function () {
if(this.data.isLogin){
//更新收藏列表
this.getMyFavorites()
}
},
(3)浏览收藏的新闻
点击收藏的新闻和在首页点击新闻跳转功能相似
修改my.wxml，在显示新闻标题的title的组件 添加点击函数goToDetail，并传递新闻id
<!--我的收藏-->
<view id='myFavorites'>
<text>我的收藏（{{num}}）</text>
<!--收藏的新闻列表-->
<view id='news-list'>
<view class='list-item' wx:for="{{newsList}}" wx:for-item = "news" wx:key="{{news.id}}">
<image src="{{news.poster}}"></image>
<text bindtap="goToDetail" data-id='{{news.id}}'>{{news.title}}--{{news.add_date}}</text>
</view>
</view>
</view>
在my.js中编写gotoDetail函数实现页面跳转，与首页新闻跳转一致
goToDetail(e){
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻ID进行页面跳转
//?后面加参数名 + 后面为传递的参数值
wx.navigateTo({
url : '../detail/detail?id=' + id
})
}
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
" alt=“image-20230905101613107” style=“zoom:80%;” />
四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
