2024年夏季《移动软件开发》实验报告
Gitee仓库地址? | https://gitee.com/plumagee/summerWeb
一、实验目标
- 综合所学知识创建完整的前端新闻小程序项目;
- 能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
- 页面配置:在创建项目完成后,对初始页面进行删除和修改,并引入images文件夹用于存放图片素材,引入utils文件夹用于存放common.js公共函数,全部完成后的目录结构如下所示:
-
视图设计
- 导航栏设计
"window": { "navigationBarTextStyle": "white", "navigationBarTitleText": "我的新闻网", "navigationBarBackgroundColor": "#328EEB" },
- tabBar设计:在app.json中追加tarBar的相关属性
"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": "我的" } ] },
- 页面设计——首页设计:分为两部分,幻灯片使用swiper组件,新闻列表使用view组件,内部使用数组循环。在JS文件的data中写入幻灯片素材和临时新闻数据,用于效果预览。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}}" class="slide-image"></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 bind:tap="goToDetail" data-id="{{news.id}}">{{news.title}} -- {{news.add_date}}</text> </view> </view>
- 页面设计——个人中心页设计:分为登录面板和我的收藏两部分,整体使用view组件进行布局。在JS文件的data中临时录入测试数据用于效果预览。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 bind:tap="goToDetail" data-id="{{news.id}}">{{news.title}} -- {{news.add_date}}</text> </view> </view> </view>
- 此外,由于新闻列表的样式和首页完全相同,因此可以把index.wxss中新闻列表样式相关的代码挪到app.wxss中共同使用。
- 页面设计——新闻页设计:首先添加编译模式,追加对于detail页面的直接浏览效果。新闻页整体使用view组件布局,同样可以在data中临时录入测试数据用于效果预览。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 bind:tap="cancelFavorites">已收藏</button> <button wx:else plain bind:tap="addFavorites">点击收藏</button> </view>
-
逻辑实现
- 公共逻辑部分:使用提供的common.js文件。
- 首页逻辑:一是新闻列表展示,需要在onload函数中获取新闻列表,并更新到data属性的newList参数中;二是点击新闻标题实现页面跳转,添加goToDetail函数实现并携带新闻ID编号。具体代码如下:
//跳转新页面浏览新闻内容 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}) },
- 新闻页逻辑:一是显示对应新闻,需要在新闻页接收ID编号,并查询对应新闻内容;二是添加/取消新闻收藏,需要在detail.wxml中添加两个button组件,并使用wx:if和wx:else属性使其每次只存在一个,然后添加addFavorites和cancelFavorites函数用于点击添加/取消新闻收藏。具体detail.js代码如下:
//添加到收藏夹 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 }); }, /** * 生命周期函数--监听页面加载 */ 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 }) } } },
- 个人中心页逻辑:一是获取微信用户信息:修改button组件,追加用户信息事件,然后追加getMyInfo函数,控制台输出成功后,将信息更新到动态数据上;二是获取收藏列表,追加getMyFavorites函数,用于展示新闻收藏列表,然后修改onShow函数,判断如果是登录状态就刷新收藏列表;三是添加goToDetail函数,与首页的点击跳转类似,用于实现点击浏览已经收藏的新闻。具体my.js代码如下:
//获取微信用户信息 getMyInfo:function(e){ console.log(e.detail.userInfo); 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: function(e) { //获取携带的data-id数据 let id = e.currentTarget.dataset.id; //携带新闻id进行页面跳转 wx.navigateTo({ url: '../detail/detail?id=' + id }) }, /** * 生命周期函数--监听页面显示 */ onShow:function() { if(this.data.isLogin){ this.getMyFavorites() } },
-
清除测试过程中录入的临时数据
三、程序运行结果
-
首页
-
个人页——未登录
-
个人页——已登录
-
新闻页
-
收藏/取消收藏新闻
-
收藏/取消收藏新闻——个人页相应展示
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
- 遇到问题:当没有收藏任何一条新闻时,用于存放收藏数量的num数组仍显示为1
- 解决办法:清理缓存,重新编译后num初值变为0
- 收获:通过本次实验,我对如何开发一个较为完善可用的前端小程序,有了更加深刻的认识,提高了我的小程序开发的综合能力。