2022年夏季《移动软件开发》实验报告
| 实验名称？ | 实验4：高校新闻网
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；
2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
（列出实验的关键步骤、代码解析、截图。）
删app.json文件的,"pages/logs/logs"
在app.json文件加上,"pages/detail/detail"
3.获取并存放播放图标
创建images文件夹将图标存放进去
4.app.json的代码
navigationBarBackgroundColor的设置使得导航栏的颜色为蓝色；
navigationBarTitleText为导航栏上所显示的文字；
navigationBarTextStyle设置导航栏上字体的颜色；
{
"pages":[
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#328EEB",
"navigationBarTitleText": "我的新闻网",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.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/index.png",
"selectedIconPath": "images/index_blue.png",
"text": "我的"
}
]
}
}5.app.wxss的代码
/*新闻列表区域样式*/
/*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;
}
6.my.js的代码
Page({
/**
* 页面的初始数据
*/
data: {
//临时微信用户昵称和头像
num:0
},
//获取微信用户信息
getUsrProfile(e){
wx.getUserProfile({
desc: 'desc',
success:(res)=>{
console.log(res)
this.setData({
isLogin:true, //确认登陆状态
src:res.userInfo.avatarUrl, //更新图片来源
nickName:res.userInfo.nickName //更新昵称
})
this.myFavorites()
}
})
},
myFavorites:function(){
let info = wx.getStorageInfoSync(); //读取本地缓存
let keys = info.keys; //获取全部key信息
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:function(e){
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
wx.navigateto({
url:'../detail/detail?id='+id
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
//如果已经登录
if(this.data.isLogin){
//更新收藏列表
this.myFavorites()
}
},
})7.my.wxml的代码
<!--登陆面板-->
<view id="myLogin">
<block wx:if="{{isLogin}}">
<image id="myIcon" src="{{src}}"></image>
<text id="nickName">{{nickName}}</text>
</block>
<button wx:else bindtap="getUsrProfile">未登录，点此登录</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>
8.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>
9.detail.wxss的代码
.container{
padding: 15rpx;
text-align: center;
}
.title{
font-size: 14pt;
line-height: 80rpx;
}
.content{
text-align: left;
font-size: 12pt;
line-height: 6-rpx;
}
.add_date{
font-size: 14pt;
line-height: rpx;
text-align: left;
margin-top: 20rpx;
margin-right: 25rpx;
}
/*“点击收藏”按钮*/
button{
width: 250rpx;
height: 100rpx;
margin: 20rpx auto;
}10.detail.js的代码
const common = require("../../utils/common")
// pages/detail/detail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
//添加到收藏夹
addFavorites:function(option)
{
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}); //更新按钮显示
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(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
})
}
}
},
})三、程序运行结果
（列出程序的最终运行结果及截图。）
四、问题总结与体会
（描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。）
1.问题：实验四遇到的问题和实验一一样，老师所给的获取微信用户信息的方式不可行。
解决：把getUserInfo改为getUserProfile。
2.收获
作为一个计算机人要有发展且灵活的变通能力
3.课程安排
目前老师的课程安排，对于我个人而言，非常合适。
原文地址：https://www.jb51.cc/wenti/3284183.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
