2024年夏季《移动软件开发》实验报告
注：提供 common.js、图片文件、以及 index 页面的代码，下载地址：https://gaopursuit.oss-cnbeijing.aliyuncs.com/2022/demo4_file.zi
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；
2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1.首先创建项目，创建好页面文件，进行页面文件配置
-
在
pages文件夹中添加detail和my页面文件，并创建images和utils两个文件夹，分别存放图片素材和公共 JS 文件； -
将
tabBar栏中用到的图片素材添加到images文件夹中 -
在
utils文件夹中添加common.js文件
效果如下：
2.在app.json文件中进行导航栏和tabBar设计
- 导航栏背景色改为蓝色，字体为白色
- 在
app.json文件中追加tarBar相关属性代码
app.json文件代码如下：
{
"pages":[
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
"window":{
"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"
}
效果如下：
3.首页设计
- 幻灯片滚动：使用组件和wx:for循环来实现轮播图
- 新闻列表：使用组件和wx:for循环数组显示新闻列表数据
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文件代码如下：
/* 1-1 swiper组件*/
swiper{
height:400rpx;
}
/* 1-2 swiper中的图片*/
swiper image{
width:100%;
height:100%;
}
/*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;
}
index.js文件代码如下：
// pages/index/index.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
data: {
//幻灯片素材
swiperImg: [
{src: '/images/newsimage1.jpg'},
{src: '/images/newsimage2.jpg'},
{src: '/images/newsimage3.jpg'}
],
//临时新闻数据
newsList:[{
id: 略
title: 略
poster: 略
content: 略
add_date: 略
}]
}
})
效果如下：
4.个人中心页设计
-
登陆板块：显示用户的微信头像和昵称,自定义i如下
- myLogin:登录面板
- myIcon:微信头像图片
- nickName:微信昵称
- myFavorites:我的收藏
-
我的收藏：显示收藏在本地的新闻列表
my.wxml文件代码如下：
<!--pages/my/my.wxml-->
<view id='myLogin'>
<block>
<image src="{{src}}" id='myIcon' />
<text id='nickeName'>{{nickName}}</text>
</block>
</view>
<view id='myFavorites'>
<text>我的收藏({{num}})</text>
<view id='news-list'>
<view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="id">
<image src="{{news.poster}}"/>
<text>{{news.title}}--{{news.add_date}}</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;
}
#myFavourites{
padding: 20rpx;
}
my.js文件代码如下：
Page({
data:{
nackName:'未登录',
src:'/images/index,png',
newsList:[{
id: 略
title: 略
poster: 略
content: 略
add_date: 略},
{ id: 略
title: 略
poster: 略
content: 略
add_date: 略
}]
}
})
效果如下：
5.新闻页设计
- 新闻页包括新闻标题、新闻图片、新闻正文和新闻日期组件
detail.wxml文件的代码如下：
<view class="container">
<view class="title">{{article.title}}</view>
<view class="poster">
<image src="{{article.poster}}" mode="widthFix"/>
</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;
}
detail.js文件代码如下：
Page({
/**
* 页面的初始数据
*/
data: {
//临时新闻数据
article:{
id: 略
title: 略
poster: 略
content: 略
add_date: 略
}
},
}
效果如下：
6.公共逻辑实现
- 在
common.js文件中添加函数getNewsList和getNewsDetail,分别用于获取新闻列表信息和指定ID的新闻正文内容
common.js文件代码如下：
//模拟新闻数据
const news = [
{ id: 略
title: 略
poster: 略
content: 略
add_date: 略},
{ id: 略
title: 略
poster: 略
content: 略
add_date: 略},
{ id: 略
title: 略
poster: 略
content: 略
add_date: 略}
];
//获取新闻列表
function getNewsList() {
let list = [];
for (var i = 0; i < news.length; i++) {
let obj = {};
obj.id = news[i].id;
obj.poster = news[i].poster;
obj.add_date = news[i].add_date;
obj.title = news[i].title;
list.push(obj);
}
return list; //返回新闻列表
}
//获取新闻内容
function getNewsDetail(newsID) {
let msg = {
code: '404', //没有对应的新闻
news: {}
};
for (var i = 0; i < news.length; i++) {
if (newsID == news[i].id) { //匹配新闻id编号
msg.code = '200'; //成功
msg.news = news[i]; //更新当前新闻内容
break;
}
}
return msg; //返回查找结果
}
// 对外暴露接口
module.exports = {
getNewsList: getNewsList,
getNewsDetail: getNewsDetail
}
7.首页逻辑
- 新闻列表展示：使用{{newsList}}数组
- 点击跳转新闻内容，为
<text>组件添加自定义事件goToDetail，并且使用data-id属性携带了新闻ID编号
修改后的index.wxml文件代码如下：
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
<block wx:for="{{swiperImg}}" wx:key="index">
<swiper-item>
<image src="{{item.src}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<view id='news-list'>
<view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="id">
<image src="{{news.poster}}"/>
<text bindtap = 'goToDetail' data-id='{{news.id}}'>{{news.title}}--{{news.add_date}}</text>
</view>
</view>
修改后的index.js文件代码如下：
// pages/index/index.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
/**
* 页面的初始数据
*/
data: {
//幻灯片素材
swiperImg: [
{src: '/images/newsimage1.jpg'},
{src: '/images/newsimage2.jpg'},
{src: '/images/newsimage3.jpg'}
],
//临时新闻数据
newsList:[{
id: 略
title: 略
poster: 略
content: 略
add_date: 略
}]
},
/**
* 自定义函数--跳转新页面浏览新闻内容
*/
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
})
},
})
8.新闻页逻辑
- 修改
detail.js文件，在新闻页接受ID编号，并查询对应的新闻内容、 - 修改
detail.wxml文件代码，添加两个<button>组件来添加/取消收新闻的按钮，并对detail.wxss`和detail.js``文件进行相应修改
修改后的detail.wxml文件代码如下：
<view class="container">
<view class="title">{{article.title}}</view>
<view class="poster">
<image src="{{article.poster}}" mode="widthFix"/>
</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>
修改后的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;
}
button{
width: 250rpx;
height: 100rpx;
margin:20rpx auto;
}
修改后的detail.js文件代码如下：
Page({
data: {
//临时新闻数据
article:{
id: 略
title: 略
poster: 略
content: 略
add_date: 略
}
},
onLoad(options) {
let id = options.id
var article = wx.getStorageSync(id)
if (article != '') {
this.setData({
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 () {
let article = this.data.article;
wx.removeStorageSync(article.id);
this.setData({
isAdd: false
});
},
})
效果如下：
9.个人中心页逻辑
- 获取微信用户信息
- 获取收藏列表
- 浏览收藏的新闻
修改后的my.wxml文件代码如下：
<!--pages/my/my.wxml-->
<view id='myLogin'>
<block wx:if="{{isLogin}}">
<image src="{{src}}" id='myIcon' />
<text id='nickeName'>{{nickName}}</text>
</block>
<button wx:else bindtap="getMyInfo">
<view bindtap="getLoginCode">未登录，点此登录</view>
</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="id">
<image src="{{news.poster}}"/>
<text bindtap='goToDetail' data-id="{{news.id}}">{{news.title}}--{{news.add_date}}</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;
}
#myFavourites{
padding: 20rpx;
}
修改后的my.js文件代码如下：
var common = require('../../utils/common.js') //引用公共JS文件
Page({
data:{
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
nickName:'未登录',
src:'/images/index.png',
newList:[{
id: 略
title: 略
poster: 略
content: 略
add_date: 略
}]
},
getLoginCode() {
return new Promise((resolve, reject) => {
wx.login({
success(res) {
resolve(res.code)
},
fail(err) {
reject(err)
}
})
})
},
getMyInfo:function(e){
wx.getUserProfile({
desc: '获取信息',
success:res=>{
console.log(res.userInfo)
let info = res.userInfo;
this.setData({
isLogin:true,
src:info.avatarUrl,
nickName:info.nickName
});
this.getMyFavorites();
},
})
},
onShow() {
if(this.data.isLogin){
this.getMyFavorites()
}
},
goToDetail:function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id='+id,
})
},
getMyFavorites:function(){
let info = wx.getStorageInfoSync();
let keys = info.keys;
let num = keys.length;
let myList = [];
for(var i = 0;i<num;i++){
let obj = wx.getStorageSync(keys[i]);
myList.push(obj);
}
this.setData({
newsList:myList,
num:num
});
},
onLoad: function() {
this.getMyInfo();
},
})
效果如下：
三、程序运行结果
首页：
新闻页：
收藏：
个人中心页：
四、问题总结与体会
url: '../detail/detail?id='+id,
})
},
getMyFavorites:function(){
let info = wx.getStorageInfoSync();
let keys = info.keys;
let num = keys.length;
let myList = [];
for(var i = 0;i<num;i++){
let obj = wx.getStorageSync(keys[i]);
myList.push(obj);
}
this.setData({
newsList:myList,
num:num
});
},
onLoad: function() {
this.getMyInfo();
},
})
效果如下：
[外链图片转存中...(img-QCU3UScj-1725265761677)]
[外链图片转存中...(img-sAGN6m5x-1725265761677)]
### 三、程序运行结果
首页：
[外链图片转存中...(img-IvHfnAPq-1725265761678)]
新闻页：
[外链图片转存中...(img-eWuyVAub-1725265761678)]
收藏：
[外链图片转存中...(img-vhFvfU37-1725265761678)]
个人中心页：
[外链图片转存中...(img-w8TLivKw-1725265761679)]
### 四、问题总结与体会
在项目开发过程中，我深刻体会到了前端开发不仅仅是编写代码，更是对所学知识的综合运用。通过这个项目，我不仅巩固了基础技能，还学会了如何将理论知识与实际应用相结合，提高了自己的编程能力和解决问题的能力。前端技术日新月异，只有不断学习新知识、新技术，才能跟上行业的发展。在项目开发过程中，我意识到持续学习的重要性，并努力提升自己的技术水平。
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
