2024年夏季《移动软件开发》实验报告
本实验属于哪门课程 | 中国海洋大学24夏《移动软件开发》 |
---|---|
实验名称 | 实验5:高校新闻网 |
Github仓库地址 | https://github.com/spchara/remote-software-develop-lab.git |
一、实验目标
- 综合所学知识创建完整的前端新闻小程序项目;
- 能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1 创建项目
创建空白项目
由于这一次我们需要创建多个页面了,所以需要在app.json
的pages
属性中添加新的页面路径
导入老师提供的 common.js、图片文件、以及 index 页面的代码
2 添加导航栏和底部导航条
修改app.json
,代码如下
"window": {
"navigationBarBackgroundColor": "#328EEB",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的新闻网"
},
"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":"我的"
}
]
},
这里其实遇到了一些问题,解决之后就成功显示老师给的页面了。具体问题和解决过程在第四部分说明
3 完成页面设计
3.1 主页设计
主页设计使用老师提供的代码
3.2 个人中心页设计
个人中心页包含两个板块:
-
登录面板:
在未登录时显示默认头像和登录键,登陆后显示微信头像与名称
-
我的收藏:
在未登录时显示为空,登陆后显示用户收藏的文章列表
暂时先不完成登录与否的显示,先完成页面设计,并添加相应的css,在报告末尾展示
具体代码:
<view id="myLogin">
<block>
<image id="myIcon" src='{{src}}'></image>
<text id="nickName">{{nickName}}</text>
</block>
</view>
<view id="myFavourite">
<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>
3.3 新闻页设计
新闻页需要包含:标题、新闻图片、新闻日期、收藏\取消收藏按钮
代码如下,并添加相应css
<scroll-view class="scrollarea" scroll-y type="list">
<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="cancelFavourites">♥取消收藏</button>
<button wx:else plain bindtap="addFavourites">♡点击收藏</button>
</view>
</scroll-view>
4 业务逻辑实现
4.1 公共逻辑实现
包含提供模拟数据的模拟接口,由老师提供的代码实现
提供接口,返回预存的新闻列表。以及id对应的单个新闻
4.2 主页逻辑以及页面跳转
主页逻辑包括轮播图、列表显示新闻、以及点击跳转
均由老师提供的代码实现
4.3 新闻页面逻辑实现
在首页逻辑中,实现了页面跳转并携带新闻的id编号,新闻页需要做的则是接受id编号之后,通过id查询对应的新闻内容,并渲染出来。对应代码
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
})
}
}
},
同时需要实现收藏与取消收藏的功能,故而还需要一个变量isAdd
用于保存,并写出相应的绑定函数来改变状态
addFavourites: function(options){
let article = this.data.article;
wx.setStorageSync(article.id,article);
this.setData({
isAdd:true
});
},
cancelFavourites:function(options){
let article = this.data.article;
wx.removeStorageSync(article.id);
this.setData({
isAdd:false
});
},
4.4 个人中心页逻辑实现
个人中心页有三个主要功能:
-
获取用户信息
用实验一同款的技术即可实现,不过也会遇到实验一的同款问题,更新的基础库不支持,所以需要调低基础库版本
对应代码:
<button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击登录</button>
getMyInfo:function(e){ console.log(e.detail.userInfo); let info = e.detail.userInfo; this.setData({ isLogin:true, src:info.avatarUrl, nickName:info.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]); console.log(obj) myList.push(obj); } this.setData({ newsList:myList, num:num }); },
在上面的登录函数中调用这个函数,即可实现登录后读取对应收藏的效果
考虑到登陆后也会有收藏、取消收藏的需求,修改如下代码
onShow() { if(this.data.isLogin){ this.getMyFavorites(); } },
-
浏览收藏的新闻
写一个主页同款的跳转即可
goToDetail:function(e){ let id = e.currentTarget.dataset.id; wx.navigateTo({ url: '../detail/detail?id='+id }) },
5 最后一步
从学校官网上搜集新闻,保存为本地的模拟数据即可
三、程序运行结果
首页
新闻详情页
点击收藏
用户登录
四、问题总结与体会
问题:
-
Q:在导入老师提供的index文件之后,index无法正常显示
初步检查之后,我发现老师提供的
index.json
中data
没有正确初始化需要使用的数组,即newList
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'} ], newsList:[] },
-
Q:上一步修改之后,虽然图片可以显示了,却又无法正确显示导航栏
产生警告
由于 skyline 页面的 navigationStyle 是 custom,app.json 中的 window 配置 navigationStyle、navigationBarTextStyle、navigationBarTitleText、navigationBarBackgroundColor 是不生效的
研究许久之后,我删除了
app.json
中的这一行代码"renderer": "skyline",
导航栏渲染终于正常
-
Q:实验手册所给代码有一处错误:在从本地缓存获取收藏列表的过程中,实验手册中有一布通过info.key的长度来获得收藏的数量,实际上是有问题的,因为本地缓存有一个
logs
。因此实际上num
的值应当为keys.length-1
getMyFavorites:function(){ let info = wx.getStorageInfoSync(); let keys = info.keys; let num = keys.length; ......
体会
这次实验中我第一次实现了微信小程序里多个页面之间的跳转、数据传递、以及本地缓存的使用,为个人项目的实现提供了更进一步的技术基础