2022年夏季《移动软件开发》实验报告
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1、项目创建与配置
按照之前实验介绍的步骤进行项目的创建和配置。本项目一共需要3个页面,即首页、新闻页和个人中心页,其中首页和个人中心页需要以tabBar的形式展示,可以点击tab图标互相切换。
1.1 首页功能需求
(1)首页需要包含幻灯片播放效果和新闻列表;(2)幻灯片至少要有3幅图片自动播放;(3)点击新闻列表可以打开新闻全文。
1.2 新闻页功能需求
(1)阅读新闻全文的页面需要显示新闻标题、图片、正文和日期;(2)允许 点击按钮将当前阅读的新闻添加到本地收藏夹中;(3)已经收藏过的新闻也可以点击按钮取消收藏。
1.3 个人中心页功能需求
(1)未登录状态下显示登录按钮,用户点击以后可以显示微信头像和昵称。(2)登录后读取当前用户的收藏夹,展示收藏的新闻列表。(3)收藏夹中的新闻可以直接点击查看内容。(4)未登录状态下收藏夹显示为空。
2、视图设计
在进行实验时,进行了自己的一些小改动,整体没有变动多少。
2.1 导航栏及 tabBar 设计
app.json 文件代码如下:
{
"pages":[
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#328eeb",
"navigationBarTitleText": "我的新闻网",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color": "#000",
"selectedColor": "#328eeb",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/index.png",
"selectedIconPath": "images/index_blue.png",
"text": "首页"
},
{
"pagePath": "pages/my/my",
"iconPath": "images/my.png",
"selectedIconPath": "images/my_blue.png",
"text": "我的"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
上述代码可以更改导航栏背景色为蓝色、字体色为白色,并可以切换首页和个人中心页,运行效果如下:
2.2 首页设计
首页主要包含两部分内容,即幻灯片滚动和新闻列表。
index.wxml 文件代码如下:
<!--pages/index/index.wxml-->
<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
<block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
<swiper-item>
<image src="{{item.src}}"></image>
</swiper-item>
</block>
</swiper>
<!--新闻列表-->
<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.wxss 代码如下:
/*2-1新闻列表容器*/
#news-list {
min-height: 600rpx;
padding: 15rpx;
}
/*2-2列表项目*/
.list-item{
display: flex;
flex-direction: row;
border-bottom: 1rpx solid gray;
}
/*2-3新闻图片*/
.list-item image{
width:230rpx;
height: 150rpx;
margin: 10rpx;
}
/*2-4新闻标题*/
.list-item text{
width: 100%;
line-height: 60rpx;
font-size: 10pt;
}
2.3 个人中心页设计
个人中心页主要包含两个板块,即登录面板和“我的收藏”,登录面板用于显示用户的微信头像和昵称,“我的收藏”用于显示收藏在本地的新闻列表。
my.wxml 代码如下
<!--pages/my/my.wxml-->
<view class="myLogin">
<block wx:if="{{isLogin}}">
<image class="myIcon" src="{{src}}"></image>
<text class="nickName">{{nickName}}</text>
</block>
<button wx:else open-type="getUserInfo" bindtap="getMyInfo">
未登录,点击登录
</button>
<button wx:if="{{isLogin}}" bindtap="goLogout">退出登录</button>
</view>
<view class="myFavorites" wx:if="{{isLogin}}">
<view class="shoucang">我的收藏--{{num}}</view>
<view class="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.wxss 代码如下:
/* pages/my/my.wxss */
.myLogin {
background-color: #328BBE;
height: 500rpx;
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;
}
.myFavorites .shoucang {
width: 100%;
text-align: center;
color: black;
font-size: large;
}
.news-list {
min-height: 600rpx;
padding: 15rpx;
}
.list-item {
display: flex;
flex-direction: row;
border-bottom: 1rpx solid gray;
}
.list-item image {
width: 230rpx;
height: 150rpx;
margin: 10rpx;
}
.list-item text {
width: 100%;
line-height: 60rpx;
font-size: 10pt;
}
2.4 新闻页设计
新闻页是用于给用户浏览新闻全文的,需要用户点击首页的新闻列表,然后在新窗口中打开该页面。新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。
wxml代码如下:
<!--pages/detail/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>
<button wx:if="{{isAdd}}" plain bindtap="cancelFavorites">♥已收藏</button>
<button wx:else plain bindtap='addFavorites'>♥点击收藏</button>
</view>
wxss代码如下:
/* pages/detail/detail.wxss */
.container {
padding: 15rpx;
text-align: center;
}
.title {
font-weight: 800;
font-size: 14pt;
line-height: 80rpx;
}
.poster image {
width: 700rpx;
}
.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;
margin-bottom: 20rpx;
}
button {
width: 250rpx;
height: 100rpx;
margin: 20rpx auto;
}
3、逻辑实现
3.1 首页逻辑
首页主要有两个功能:一是展示新闻列表,二是点击新闻标题可以跳转对应的内容页面进行浏览
index.js 代码如下:
// pages/index/index.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
data: {
//幻灯片素材
swiperImg: [{
src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg'
},
{
src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg'
},
{
src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg'
}
],
},
goToDetail: function (e) {
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻id进行页面跳转
var islogin = wx.getStorageSync('islogin')
if (islogin) {
wx.navigateTo({
url: '../detail/detail?id=' + id
})
} else {
wx.showModal({
title: '提示',
content: '你还没有登陆,将跳转至登录界面',
success: (res) => {
if (res.confirm) { //这里是点击了确定以后
wx.switchTab({
url: '../my/my',
})
} else { //这里是点击了取消以后
console.log('用户点击取消')
}
}
})
}
},
onLoad: function (options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList: list,
})
},
})
3.2 新闻页逻辑
新闻页有两个功能:一是显示对应新闻,二是可以添加/取消新闻收藏
detail.js 代码如下:
// pages/detail/detail.js
var common = require('../../utils/common')
Page({
data: {},
onLoad: function (options) {
let id = options.id
// 检查当前新闻是否在收藏夹中
var article = wx.getStorageSync(id)
if (article != '') {
this.setData({
article: article,
idAdd: true
})
} else {
let result = common.getNewsDetail(id)
if (result.code == '200') {
this.setData({
article: result.news
})
}
}
},
addFavorites: function (options) {
let article = this.data.article;
wx.setStorageSync(article.id, article);
this.setData({
isAdd: true
});
},
cancelFavorites: function () {
let article = this.data.article;
wx.removeStorageSync(article.id);
this.setData({
isAdd: false
});
},
})
3.4 个人中心页面逻辑
个人中心页主要有三个功能:一是获取微信用户信息;二是获取收藏列表;三是浏览收藏的新闻。
my.js 代码如下:
// pages/my/my.js
Page({
data: {
num: 0
},
getMyInfo: function (e) {
wx.getUserProfile({
desc: '用于获取信息',
success: (res) => {
this.setData({
isLogin: true,
src: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
})
wx.setStorageSync('islogin', true)
}
})
this.getMyFavorites();
},
goLogout() {
wx.showModal({
title: '提示',
content: '您确定要退出登录吗',
success: (res) => {
if (res.confirm) { //这里是点击了确定以后
console.log('用户点击确定')
wx.setStorageSync('islogin', false)
this.setData({
src: '',
nickName: '',
isLogin: false
})
} else { //这里是点击了取消以后
console.log('用户点击取消')
}
}
})
},
getMyFavorites: function () {
let info = wx.getStorageInfoSync();
let keys = info.keys;
let num = keys.length - 1;
let myList = [];
for (var i = 0; i < num; i++) {
let obj = wx.getStorageSync(keys[i]);
myList.push(obj);
}
this.setData({
newsList: myList,
num: num
});
},
goToDetail: function (e) {
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id,
})
},
onLoad(options) {
},
onShow: function () {
if (this.data.isLogin) {
this.getMyFavorites()
}
},
})
三、程序运行结果
1、个人页面
2、首页
3、新闻详情
四、问题总结与体会
下面介绍我做的一些小改动(改动后代码即之前所附代码):
1、新增登出功能。
这一步是和登录功能相适配,实验文档给出的是,当 用户选择登录后,会一直保持登录状态(以在微信开发者平台为例),除非重新编译,我这里添加一个登出功能,当用户保持登录状态时,重新编译也不会登出,除非用户选择”退出登录“,相关代码如下:
my.wxml 中,对于登录按钮,适配登出按钮
<button wx:else open-type="getUserInfo" bindtap="getMyInfo"> 未登录,点击登录 </button> <button wx:if="{{isLogin}}" bindtap="goLogout">退出登录</button>
my.js 中新增登出函数,代码如下:
goLogout() { wx.showModal({ title: '提示', content: '您确定要退出登录吗', success: (res) => { if (res.confirm) { //这里是点击了确定以后 console.log('用户点击确定') wx.setStorageSync('islogin', false) this.setData({ src: '', nickName: '', isLogin: false }) } else { //这里是点击了取消以后 console.log('用户点击取消') } } }) },
实现的是,当用户点击退出登录的按钮时,出现提示窗进行挽留,当用户再次点击确定退出后才登出,然后将存在 Storage 中的 islogin 改为false(islogin 用来表明用户是否处于登录状态)。
2、修改还未确定登录就显示个人收藏
原文档中,对用户收藏数据的判断是简单的对本地数据进行计数,在测试时,出现用户还未选择登录,个人收藏的数目就发生改变,不符合正常逻辑,因此我将个人收藏及收藏新闻列表设置为登录后可看,同时对 “收藏--” 的样式进行了修改。
my.wxml 部分代码修改如下:
<view class="myFavorites" wx:if="{{isLogin}}"> <view class="shoucang">我的收藏--{{num}}</view> <view class="news-list"> 新闻收藏列表 </view> </view>
3、限制新闻的浏览须在登录状态下使用
在原文档中, 新闻详情页面以及新闻的收藏功能无论是否登录都能使用,不符合设定,因此我在跳转至详情界面时对是否登录进行了判断,如果没有登录,则进行提示用户当前未登录,将跳转至登录界面,用户点击确定则跳转登录,取消则相安无事。
goToDetail: function (e) { //获取携带的data-id数据 let id = e.currentTarget.dataset.id; //携带新闻id进行页面跳转 var islogin = wx.getStorageSync('islogin') if (islogin) { wx.navigateTo({ url: '../detail/detail?id=' + id }) } else { wx.showModal({ title: '提示', content: '你还没有登陆,将跳转至登录界面', success: (res) => { if (res.confirm) { //这里是点击了确定以后 wx.switchTab({ url: '../my/my', }) } else { //这里是点击了取消以后 console.log('用户点击取消') } } }) } },
4、根据个人口味修改了一些样式
对一些我不太习惯的样式进行了调整,比如标题加粗,格式转换,加大空白等等,不再赘述。
5、总结
这个实验同样给出了源代码,但是其中的一些细节处理的比较粗糙,在跟着完成实验的过程中就能感受出来,因此我做出了一些调整,期待下一个实验🌹🌹🌹