姓名? | 王建享 |
---|---|
本实验属于哪门课程? | 中国海洋大学24夏《移动软件开发》 |
实验名称? | 实验5:高效新闻网 |
博客地址? | 2024年夏季《移动软件开发》实验5报告-CSDN博客 |
Gitee仓库地址? | miniNewsApp: |
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
实现的额外功能
-
使用了云开发,利用数据库获取对应的数据
-
摒弃了文档中已经被弃用的用户数据获取,修改为了新版本的用户信息获取方式
创建一个微信小程序
创建一个数据库的数据集合,并为其添加数据
添加页面组件
<!--pages/user/user.wxml--> <view id='myLogin'> <block > <button open-type="chooseAvatar" bindchooseavatar="changeHead" class="avatarButton"> <image class="myIcon" src="{{headImg}}" mode="widthFix"/> </button> <input type="nickname" placeholder="微信昵称"/> </block> </view> <view id='myFavorites'> <text>我的收藏{{num}}</text> <view id='news-list'> <view class='list-item' wx:for='{{newsList}}' wx:key='{{item.id}}'> <image src='{{item.poster}}'></image> <text bind:tap="goToDetail" data-id="{{item.id}}">{{item.title}}--{{item.add_date}}</text> </view> </view> </view> <!--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> <!--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 bind:tap='cancelFavorite'>已收藏</button> <button wx:else plain bind:tap='addFavorite'>点击收藏</button> </view>
编写对应样式
/**index.wxss**/ #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; } swiper{ height:400rpx; } swiper image{ height: 100%; width: 100%; } /**user.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; } .avatarButton{ padding: 0; border-radius: 50%; width: 200rpx !important; height: 200rpx; align-items: center; justify-content: center; } /**detail.wxss**/ .container{ padding:15rpx; text-align: center; } .title{ font-size: 14pt; line-height: 80rpx; } .poster image{ width: 700rpx; } .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; } /**app.wxss**/ #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%; display: block; line-height: 60rpx; font-size: 10pt; }
编写页面逻辑
下面对页面逻辑的关键部分进行分析,详细代码见上方gitee链接
获取云开发数据库中数据部分
const db = wx.cloud.database(); db.collection('news').where({}).get().then(res =>{ this.setData({ newsList:res.data }) })
获取缓存中数据部分
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 })
添加以及清除缓存
addFavorite:function(options){ let article = this.data.article; wx.setStorageSync(article.id, article);//添加缓存 this.setData({ isAdd:true }) }, cancelFavorite:function(){ let article = this.data.article; wx.removeStorageSync(article.id);//清除缓存 this.setData({ isAdd:false }) },
获取用户头像(需用户选择使用微信头像作为头像,配合wxml中的button使用)
<block > <button open-type="chooseAvatar" bindchooseavatar="changeHead" class="avatarButton"> <image class="myIcon" src="{{headImg}}" mode="widthFix"/> </button> <input type="nickname" placeholder="微信昵称"/> </block> changeHead(event){ this.setData({ headImg:event.detail.avatarUrl }) },
实验中遇到的问题及解决办法
问题:收藏后个人页面无法正常更新
原因及解决办法:更新收藏界面应该放在onShow的生命周期函数而不是onLoad当中
三、程序运行结果
四、实验总结与体会
本次实验编写了一个新闻类微信小程序,有了前面4次编写的经验,这次的编写过程相比之前顺利了许多,但本次的实验也不是一无所获的,本次实验过程中也遇到了收藏后页面无法正常更新的问题,之前数据的更新都是在同一个页面之中的,所以在本页面更新完数据就可以出发onload,但是这一次数据的更新是在另一个页面当中的,因此应该在onshow中就直接更新页面,而不是在onload中对页面进行更新。