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.id
let 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清空。
整个实验完成。
三、程序运行结果
文章来源:https://www.toymoban.com/news/detail-483815.html
四、问题总结与体会
本次实验十分成功,并没有遇到什么大问题。经过这四次小程序实验,我已经对小程序制作有了初步的了解,遇到的小问题也能快速解决。总的来说,实验还是很有趣的,对我的帮助也很大。文章来源地址https://www.toymoban.com/news/detail-483815.html
到了这里,关于高校新闻网-微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!