2023年夏季《移动软件开发》实验报告
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目; 2.能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1.创建项目
2.删除和修改模板文件
3.创建其他文件
4.根据个人喜好设置导航栏样式(app.json)
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#328EEB",
"navigationBarTitleText": "校园新闻网",
"navigationBarTextStyle": "white"
},
5.底部导航栏设计
在app.json中添加以下代码
"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": "我的"
}
]
}
6.公共样式设计
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/*新闻列表区域样式*/
/*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;
}
7.首页设计
<!--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>
8.个人主页设计
<!--pages/my/my.wxml-->
<!--登陆面板-->
<view id = "myLogin">
<block wx:if = "{{isLogin}}">
<image id = "myIcon"src="{{src}}"></image>
<text id = "nickName">{{nickName}}</text>
</block>
<button wx:else open-type="getUserProfile"bindtap = 'getMyInfo' type = 'primary'>
未登录,点击登录
</button>
</view>
<!--我的收蔵-->
<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>
9.新闻详情页设计
<!--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>
10.逻辑实现
(1)首页逻辑实现
首页要完成的逻辑功能主要是更新新闻列表和跳转新闻详情页
// 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进行页面跳转
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList: list
})
}
})
(2)详情页逻辑
首页要完成的逻辑功能主要是添加收藏夹、取消收藏
// pages/detail/detail.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
//获取页面跳转来时携带的数据
let id = options.id
//检查当前新闻是否在收藏夹中
var article = wx.getStorageSync(id)
//已存在
if(article != ''){
this.setData({
article:article,
isAdd:true
})
}
//不存在
else{
let result = common.getNewsDetail(id)
//获取到新闻内容
if(result.code == "200"){
this.setData({
article:result.news,
isAdd:false
})
}
}
},
/**
* 添加到收藏夹
*/
addFavorites:function(options){
let article = this.data.article;
wx.setStorageSync(article.id,article);
this.setData({isAdd:true});
},
//取消收藏
cancelFavorites:function(options)
{
let article = this.data.article;
wx.removeStorageSync(article.id);
this.setData({isAdd:false});
}
})
(3)个人主页逻辑
个人主页要完成的逻辑功能主要是获取用户信息、获取收藏列表、跳转新闻详情页
var common = require('../../utils/common.js') //引用公共JS文件
// pages/my/my.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
// 获取用户信息
getMyInfo: function(e) {
wx.getUserProfile({
desc: '展示用户信息',
success: (res) => {
console.log(res)
this.getMyfavorites();
this.setData({
isLogin: true,
src: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
})
}
})
},
//获取收藏列表
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){
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻的ID进行页面的跳转
wx.navigateTo({
url: '../detail/detail?id='+id
})
}
})
三、程序运行结果
1.首页
2.个人主页
3.登录
4.登录后的个人主页
5.新闻详情页
6.收藏
7.显示收藏列表
8.从收藏列表进入新闻详情页
9.取消收藏
10.取消收藏后,收藏列表随之发生变化
四、问题总结与体会
这次试验我学会了更多编写小程序的知识,可以帮助我更好的、更漂亮的写个人项目。