2024年夏季《移动软件开发》实验报告
实验课程 | 中国海洋大学24夏《移动软件开发》 |
---|---|
实验名称 | 实验5:高校新闻网 |
Github仓库地址 | https://github.com/ReyDelCampNou/wechatdev/tree/master/exp5 |
一、实验目标
1、学习使用快速启动模板创建小程序的方法;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
/*swiper区域样式*/
swiper{
height: 400rpx;
}
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: '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
})
},
})
- 完成
my.wxml
<!--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="getUserInfo" bindgetuserinfo="getMyInfo">未登录,点此登录</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>
- 完成
my.wxss
/* pages/my/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;
}
- 完成
my.js
(略去部分自动生成的函数)
// pages/my/my.js
var common = require('../../utils/common.js')
Page({
/**
* 页面的初始数据
*/
data: {
nickName: '',
src: '',
num: 0,
newsList:[]
},
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
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
if(this.data.isLogin){
this.getMyFavorites()
}
},
getMyInfo: function(e){
let info = e.detail.userInfo;
this.setData({
isLogin:true,
src: info.avatarUrl,
nickName: info.nickName
})
this.getMyFavorites();
},
goToDetail: function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url:'../detail/detail?id='+id
})
}
})
- 完成
detail.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>
- 完成
detail.wxss
/* pages/detail/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
// pages/detail/detail.js
var common = require('../../utils/common.js')
Page({
/**
* 页面的初始数据
*/
data: {
article:{}
},
/**
* 生命周期函数--监听页面加载
*/
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(){
let article = this.data.article;
wx.removeStorageSync(article.id);
this.setData({isAdd:false});
}
})
- 完成
common.js
(由于不可抗力删去新闻列表)
//模拟新闻数据
const news = [ ];
//获取新闻列表
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
}
三、程序运行结果
主页
新闻详情页
收藏
个人界面
登录
四、问题总结与体会
-
发现收藏列表中总有一个空数据,推测为返回时自带的空数据,于是修改
my.js
中的函数getMyFavorites
:let num = keys.length-1;
在返回时去除了空数据。
-
登录问题采用实验一中的方法解决,修改基础库至
2.16.1
。