2024年夏季《移动软件开发》实验报告
一、实验目标
二、实验步骤
1.预先准备
本次实验所要使用的图片素材与样例下载链接如下
https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip
解压后将images和utils文件夹替换到新建的项目中的相应位置即可
2.创建微信小程序项目以及内部文件修改配置
使用微信开发者工具创建一个新项目,并进行如下操作:
(1)删除utils文件夹及其内部所有内容。
(2)删除 pages文件夹下的 logs目录及其内部所有内容。
(3)删除index. wxml和 index. wxss中的全部代码。
(4)删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
(5)删除app. wxss中的全部代码。
(6)删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。
(7)添加一个新文件夹,命名为images,用下载的文件夹替换其内容。
(8)utils文件夹同上
3.初始化配置
(1)导航栏和下方的tab设计
在app.json中添加代码如下:
{
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "每🐏新闻-咩~",
"navigationBarBackgroundColor": "#328EEB"
},
"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": "我的"
}
]
}
}
4.页面设计
(1)首页设计
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}}'></image>
<text bindtap='goToDetail'data-id='{{news.id}}'>⬘{{news.title}}--{{news.add_date}}</text>
</view>
</view>
index.WXSS修改如下:
swiper{
height: 400rpx;
}
swiper image{
width: 100%;
height: 100%;
}
#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;
}
同时在index.js对数据进行初始化如下:
Page({
data:{
swiperImg:[
{src:'https://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg'},
{src:'https://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg'},
{src:'https://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg'}
],
newsList:[{ //这里的list你可以从提供的utils里面随便拿一个过来套上做测试样例
id: '',
title: '',
poster: '',
content: '',
add_date: ''
}]
},
})
效果如图
(2)个人中心页面设计
将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'wx:if='{{num}}'>
<view class='list-item'wx:for="{{newsList}}"wx:for-item="news"wx:key="id">
<image src='{{news.poster}}'></image>
<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;
}
/*收藏*/
#myFavorites{
padding: 20rpx;
}
#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;
}
js文件中对数据初始化如下:
Page({
/**
* 页面的初始数据
*/
data: {
nickName:'未登录',
src:'/images/index.png',
newsList:[{ //这里同上随便拿一条数据放进去当作样例
id: '',
title: '',
poster: '',
content: '',
add_date: ''
}],
num:0
},
})
(3)新闻页面设计
将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
<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;
}
JS文件与之前相同:
Page({
/**
* 页面的初始数据
*/
data: {
article:{ //记得填数据测试
id: '',
title: '',
poster: '',
content: '',
add_date: ''
},
},
})
此时效果如图
5.逻辑实现
(1)首先在每个文件夹的js中最上方添加如下代码引用存在utils里面的数据和函数
var common=require('../../utils/common.js')
(2)首页逻辑
将首页index.js文件添加代码如下:
Page({
······
goToDetail(e){ //该函数实现跳转至新闻页
let id=e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id='+id,
})
},
onLoad:function(options){ //该函数实现获取新闻列表信息
let list=common.getNewsList()
this.setData({newsList:list})
}
})
(3)新闻页逻辑
将detail.js文件添加代码如下:
Page({
······
onLoad(options) { //获得跳转时携带的ID编号,同时显示点击的新闻内容
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});
},
})
注意:现在把之前WXML中的button的注释去掉
(4)个人中心页逻辑
在my.js文件中追加代码如下:
getMyInfo:function(e){ //获取用户个人信息
let info=e.detail.userInfo;
this.setData({
isLogin:true,
src:info.avatarUrl,
nickName:info.nickName
})
this.getMyFavorites();
},
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
});
},
goToDetail(e){ //实现从收藏列表点击跳转到新闻页面
let id=e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id='+id,
})
},
同时在onShow函数中添加监听:
onShow() { //用于检测是否已经登陆,如果已经登陆就刷新收藏列表
if(this.data.isLogin){
this.getMyFavorites()
}
},
三、程序运行结果
四、问题总结与体会
在本次实验中按照实验方案进行微信小程序新闻网的制作,在实验过程中遇见的主要问题在于还是微信更新后getuserInfo接口无法再次使用,这里我调整了工具的版本为2.20.3.才能够调用接口
通过本次实验能够让我在开发过程中熟练掌握真机预览、调试等操作,同时掌握了本地缓存的使用方法,为我后期的项目数据存储提供了技术指导,收获颇丰。