高校新闻网-微信小程序

分类：菜鸟笔记作者：m0_53540438

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清空。

整个实验完成。

三、程序运行结果

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

四、问题总结与体会

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript小程序微信小程序

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot