移动软件开发：实验5

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；2.能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1、创建项目

创建项目newsdemo，选择储存的文件夹，输入AppID，然后选择不使用云服务，并点击确定。

然后将app.json文件的pages内的logs改成detail,并添加pages/my/my，再保存，可以自动生成detail和my目录，并且删除 logs目录以及index.wxml,index.wxss,index.js,app.wxss,app.js的全部代码，并在index.js 和app.js内分别输入page和app自动补全函数。 创建images文件夹，将新闻图片和图标图片存入images文件夹内。然后在utils目录下创建common.js文件，并将压缩包内的代码复制到common.js文件内。

2.视图设计

2.1主页设计

在app.json内修改windows内的“navigationBarBackgroundColor”为“#328EEB”，修改“navigationBarTitleText”为“我的新闻网”，修改“navigationBarTextStyle”为“white”,可以修改导航栏如下图所示。

然后在app.json内添加tabBar属性，设置“首页”和“我的”两个页面。

"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组件设计新闻列表。

<!-- 轮播图 -->
<swiper indicator-dots autoplay 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='new-list'>
  <view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
  <image src='{{news.poster}}'></image>
  <text>◇{{news.title}}--{{news.add_date}}</text>
  </view>

</view>

然后在index.wxss内美化页面，调整容器以及图片的位置和大小。

swiper{
  height: 400rpx;
}
/*1-2 swiper中的图片*/
swiper image{
  width: 100%;
  height: 100%;
}
/*新闻列表区域样式*/
#news-list{
  min-height: 600rpx;
  padding: 15rpx;
}
.list-item{
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx soild gray;
}
.list-item image{
  width: 230rpx;
  height: 150rpx;
  margin: 10rpx;
}
.list-item text{
  width: 100%;
  line-height: 60rpx;
  font-size: 10pt;
}

然后在index.js的data内添加swiperImg和newsList数据，进行效果预览。

 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:[{
      id: '264698',
      title: '省退役军人事务厅来校交流对接工作',
      poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
      add_date: '2022-08-19'
    }]
  },

效果预览如下：

2.2新闻页面设计

新闻页面分为4个部分，分别为新闻标题区域，新闻图片区域，新闻正文区域，新闻日期区域，使用view组件和image组件设计。

<!--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>
</view>

然后是美化页面

/* pages/detail/detail.wxss */
.containere{
  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;
}

然后再detail.js的data内添加一条测试数据，此时页面展示如下：

2.3个人中心页面设计

个人中心页面主要包括两部分，分别是登录部分和新闻收藏部分。登陆部分用于显示用户的微信头像和昵称，收藏部分用于显示用户收藏的新闻。使用image,view,text组件设计个人中心页面。

<!--pages/my/my.wxml-->
<!-- 登录面板 -->
<view id='myLogin'>
    <block>
        <image id='myIcon' src='{{src}}'></image>
        <text id ='nickName'>{{nickName}}</text>
    </block>
</view>

<!-- 收藏 -->
<view id='myfavorites'>
  <text>我的收藏</text>
   <view id='new-list'>
      <view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
      <image src='{{news.poster}}'></image>
      <text>◇{{news.title}}--{{news.add_date}}</text>
  </view>
  </view>
</view>

然后在wxss内美化页面。然后在my.js的data内添加一条新闻数据，作为测试页面展示。

3.逻辑设计

3.1公共逻辑

使用提供的common.js文件。

3.2首页逻辑

首页的两个功能为显示新闻列表和跳转到新闻页面。在index.js的onLoad函数中通过getNewsList获取新闻列表，然后使用setData更新列表数据，进行编译，即可正确显示。

然后在index.wxml的text内绑定触摸事件"goToDetail"，并且使用data-id属性携带新闻的id编号，然后在index.js内实现goToDetail函数，首先获取data-id携带的新闻id编号，然后通过id编号进行页面跳转。

index.wxml:
<!-- 新闻列表 -->
<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>

index.js:
goToDetail:function(e)
  {
    let id=e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },

3.3新闻逻辑

接收页面跳转携带的新闻id编号，然后通过id编号进行新闻信息获取，更新数据article,即可展示对应的新闻。

detail.js:
onLoad:function(options) {
    let id=options.id
    let result=common.getNewsDetail(id)
    if(result.code=='200'){
      this.setData({article:result.news})
    }

然后实现收藏功能，在detail.wxml内添加两个button组件，通过wx.if来控制按钮的显示，以isAdd作为来作为判断条件，当isAdd为true时，显示“❤已收藏”，否则显示“❤点击收藏”。并且分别绑定事件cancelFavorites和addFavorites。

然后通过页面跳转携带的id,检查该新闻是否在缓存中，若已存在则将isAdd的值置为true，否则将isAdd的值置为false。

然后是addFavorites实现，获取当前新闻，然后添加到本地缓存，然后更新isAdd为true。cancelFavorites则是将该新闻从本地缓存中删除，然后更新isAdd为false。

3.3个人中心页面逻辑

首先通过wx.if来实现用户登录，未登录时，只显示按钮，登陆后，显示头像和昵称。并且绑定触摸事件“getMyInfo”。然后在my.js内实现getMyInfo函数，与实验一类似。

然后是收藏列表，在my.js的data内添加num变量，用来表示收藏列表的新闻的数目，然后实现getMyfavorites函数，读取本地缓存信息，获取全部的key信息以及收藏的新闻数据，然后将新闻添加到myList数组内，并且更新newsList和num数据。然后在getMyInfo内调用getMyfavorites，获取收藏列表。并且在onShow内判断用户是否登录，若登录，则更新收藏列表。

然后是收藏列表的新闻的跳转功能，与首页点击新闻跳转类似。

<!--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" bindtap="getMyInfo">未登录，点此登录</button>
</view>

<!-- 收藏 -->
<view id='myfavorites'>
  <text>我的收藏{{num}}</text>
   <view id='new-list'>
      <view class="list-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
      <image src='{{item.poster}}'></image>
      <text bindtap="goToDetail" data-id='{{item.id}}'>◇{{item.title}}--{{item.add_date}}</text>
  </view>
  </view>
</view>

<!--pages/my/my.js-->
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
    });
  },
  getMyInfo:function(e) {
    wx.getUserProfile({
      desc: '获取信息',
      success:(res)=>{
        this.setData({
          src:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName,
          isLogin:true
        })
        this.getMyFavorites()
      }
    })
  },

最后清除临时测试数据，使得界面更加美观。

三、程序运行结果

首先进行登录

然后浏览新闻，并且收藏新闻

然后回到个人中心，可以看到收藏列表已经有了新闻，点进新闻，然后取消收藏，再查看收藏列表，已经没有新闻了。

四、问题总结与体会

在实验过程中，逻辑层的渲染遇到问题，获取微信用户信息后，没有正确地修改图片变量以及昵称变量，通过查询资料和询问同学，编写修改变量部分，成功获取用户信息并显示出来。收藏列表都是直接读取缓存，然后根据新闻id进行展示，一开始由于缓存内储存了一些无关的内容，导致收藏列表展示时，有空白条，并且点进空白条，并没有新闻展示，然后直接清空了缓存，重新编译，可以正确显示。在此次实验中，学会了读取缓存信息，并且一边做实验一边进行调试，发现实验中的小错误，然后逐步改正。在学习新事物的过程中，我们或多或少会遇到一定的困难，和同学讨论以及上网查询资料是解决问题的有效方法。