高校新闻网-微信小程序

Github仓库地址： https://github.com/xiaoli-guan/lab4.git

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1、项目创建

使用测试号，JavaScript基础模板创建新项目。

2、页面配置

基础模板初始化会自动生成一个简易的小程序，首页是index。我们还需要创建3个页面文件，包括index（首页页面）、detail（新闻页面）、my（个人中心页面）。

（1）将app.json文件内pages属性中“pages/logs/logs”删除

（2）在app.json文件pages属性中继续追加pages/detail/detail和pages/my/my

（3）删除utils文件夹和pages下的logs文件夹及其内部所有内容

（4）删除index.wxml和index.wxss、app.wxss中全部代码

（5）删除index.js中全部代码，并且输入关键词page，找到后面带有“function”字样的，选中让其自动补全函数

（6）删除app.js中全部代码，并且输入关键词app，找到后面带有“function”字样的，选中让其自动补全函数

本次实验中，已经提供了index页面的代码及图标素材和common.js文件。

下载地址如下：

https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip

接下来我们将index页面的代码替换掉原来的。将图片素材放到images文件夹内。将common.js放入utils文件夹内。再在项目列表中刷新资源管理器即可。

3、视图设计

（1）导航栏设计

小程序默认导航栏是黑底白字的效果，我们在app.json中的window属性进行修改。

"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#328EEB","navigationBarTitleText": "我的新闻网","navigationBarTextStyle":"white"},

（2）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":"我的"}]},

此时效果如下：

可以看到，此时已经可以切换首页和个人中心页了。

（3）页面设计

由于首页代码已经给出，所以接下来我们只需要设计个人中心页及新闻页。

个人中心页主要包含两个版块，登录面板和“我的收藏“。

my.wxml的代码如下：

<!--登陆面板-->
<view id = "myLogin"><block><image id = "myIcon"src="{{src}}"></image><text id = "nickName">{{nickName}}</text></block>
</view><!--我的收藏-->
<view id = "myFavorites"><text>我的收藏（1）</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>·{{news.title}} -- {{news.add_dat}}</text></view></view>
</view>

my.wxss下代码为：

/* 登录面板 */
#myLogin{background-color: #328eeb;height: 400rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}/*1-1头像图片*/
#myIcon{width: 200rpx;height: 200rpx;border-radius: 50%;
}/*1-2微信昵称*/
#nickName{color: white;
}/*我的收藏*/
#myFavorites{padding: 20rpx;
}

在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;
}

在my.js中加入临时测试数据：

/*** 页面的初始数据*/data: {//临时微信用户昵称和头像nickName:"未登录",src:"/images/index.png",//临时收藏夹新闻数据newsList:[{id: '305670',title: '我校在第八届安徽省“互联网+”大学生创新创业大赛再创佳绩',poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',add_date: '2022-08-11'}]},

此时的个人中心页面的效果如下：

接下来就是新闻页的设计。新闻页是用于给客户浏览新闻全文的，需要用户点击首页的新闻列表，然后在新窗口打开该页面。

由于此时还没有做点击跳转，我们可以在顶端工具栏中找到“普通编译”下拉选项。选择“添加编译模式”。然后追加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>

detail.wxss的代码如下：

/* pages/detail/detail.wxss */
/*整体容器*/
.container{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代码如下：

  /*** 页面的初始数据*/data: {article:{id: '305670',title: '我校在第八届安徽省“互联网+”大学生创新创业大赛再创佳绩',poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',content: '7月4日—8月10日，由安徽省教育厅、合肥市人民政府、淮北市人民政府联合主办的第八届安徽省“互联网+”大学生创新创业大赛暨中国国际“互联网+”大学生创新创业大赛选拔赛在线上举办。我校参赛项目团队历经省级复赛网评、决赛路演答辩、金奖排位赛等多轮次比拼，斩获金奖3项、银奖10项、铜奖23项，其中3个项目由省赛组委会推荐入围国赛。',add_date: '2022-08-11'}},

此时detail页面的效果如下：

然后把编译模式换回普通编译。

4、逻辑实现

（1）公共逻辑

comnon.js文件已经提供好了。我们只需要在各个js文件顶部加入这行代码就能引用了。

var common = require('../../utils/common.js') //引用公共JS文件

（2）首页逻辑

首页主要有两个功能需要实现，一是展示新闻列表，二是点击跳转到对应的内容进行浏览。

index文件已经写好了。我们只需在detail.js内添加goToDetail函数的内容即可。

/*** * 自定义函数--跳转新页面浏览新闻内容*/goToDetail:function(e){//获取携带的data-id数据let id = e.currentTarget.dataset.id;//携带新闻的ID进行页面的跳转wx.navigateTo({url: '../detail/detail?id='+id})},

现在已经可以从首页跳转到新闻页了。

（3）新闻页逻辑

新闻页只要有两个功能，一是显示对应新闻，二是可以添加/取消新闻收藏。

先在detail.js代码里修改onLoad函数。

/*** 生命周期函数--监听页面加载*/onLoad(options) {//获取页面跳转来时携带的数据let id = options.idlet result = common.getNewsDetail(id)//获取到新闻内容if(result.code == '200'){this.setData({article:result.news})}},

此时点击新闻已经可以跳转到对应的详细新闻了。

接下来就是设计添加/取消收藏功能

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>

对应的wxss文件添加代码：

/*“点击收藏”按钮*/
button{width:250rpx;height:100rpx;margin: 20rpx auto;
}

对应js代码的onLoad函数修改为：

 /*** 生命周期函数--监听页面加载*/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})}}},

继续在js文件中追加addFavorites函数和cancelFavorites函数。

 /*** 添加到收藏夹*/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});},

此时新闻页已经有收藏功能了。

（4）个人中心页逻辑

个人中心页主要有3个功能需要实现，获取微信用户信息；获取收藏列表；浏览收藏的新闻。

修改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="getUserProfile"bindtap = 'getMyInfo' type = 'primary'>未登录，点击登录</button>
</view>

注意，getUserInfo函数停止使用了，现在使用最新的getUserProfilr函数。

然后在my.js的page内部追加getMyInfo函数

// 获取用户信息getMyInfo: function(e) {wx.getUserProfile({desc: '展示用户信息',success: (res) => {console.log(res)this.setData({isLogin: true,src: res.userInfo.avatarUrl,nickName: res.userInfo.nickName})}})},

此时，登录功能已经完成。效果如下：

接下来就是获取收藏列表了。

修改my.wxml中的：

<text>我的收藏{{num}}</text>

在my.js文件的data中追加num：0，

紧接着在my.js中追加函数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})},

然后在my.js中的getMyInfo中追加关于getMyfavorites的调用

this.getMyfavorites();

然后修改onShow函数

 /*** 生命周期函数--监听页面显示*/onShow:function() {//如果已经登录if(this.data.isLogin)//更新收藏列表this.getMyfavorites()},

此时已经可以更新收藏列表了。

最后一步就是点击跳转浏览新闻了。

在my.wxml中的中追加点击事件

 <text bindtap="goToDetail"data-id = "{{news.id}}">◇{{news.title}} -- {{news.add_dat}}</text>

在my.js添加goToDetail函数

/*** * 自定义函数--跳转新页面浏览新闻内容*/goToDetail:function(e){//获取携带的data-id数据let id = e.currentTarget.dataset.id;//携带新闻的ID进行页面的跳转wx.navigateTo({url: '../detail/detail?id='+id})},

完成。

最后一步，就是清楚临时数据了。

把index.js中的data.newsList数据清空；

把detail.js的data.article数据清空

把my.js的data.newsList、nickName、src清空。

整个实验完成。

三、程序运行结果

四、问题总结与体会

本次实验十分成功，并没有遇到什么大问题。经过这四次小程序实验，我已经对小程序制作有了初步的了解，遇到的小问题也能快速解决。总的来说，实验还是很有趣的，对我的帮助也很大。