微信小程序前端设计实战 ————高校新闻网

最新推荐文章于 2025-06-10 15:14:30 发布

Ngaizean

最新推荐文章于 2025-06-10 15:14:30 发布

阅读量1.7k

点赞数 43

分类专栏： OUC-MSD 文章标签：微信小程序前端小程序

本文链接：https://blog.youkuaiyun.com/y_y_z_y_y_z/article/details/141832735

版权

2022年夏季《移动软件开发》实验报告

实验名称	实验3：微信小程序前端设计实战 ————高校新闻网
博客地址	https://blog.youkuaiyun.com/y_y_z_y_y_z?spm=1000.2115.3001.5343
Github仓库地址	https://github.com/Jamesonlong191207

一、实验目标

综合所学知识创建完整的前端新闻小程序项目
能够在开发过程中熟练掌握真机预览、调试等操作
创新点
- 优化轮播图的设计逻辑, 轮播图的图片不再是静态进行渲染, 而是根据新闻列表中的图片进行拉取, 动态更换, 不一样的新闻列表, 轮播图随之改变.
- 进一步优化轮播图, 用户发现轮播图的图片吸引时并打算点击时, 可同样实现跳转新闻详情页, 不再拘束于非得点击新闻列表才能进行跳转, 有更丰富的交互逻辑和体验
- 具体创新点实现见文末

二、实验步骤

数据准备和环境搭建

本程序需要多条高校新闻条目, 以及一些图标, 资源已在仓库中同步上传
环境搭建前文已经详细阐述, 此处不再赘述. 选择手动创建, 不适用模板即可
在pages统同级目录下, 新建images和utils分别用于储存图片资源和公共代码资源.
文件结构见下图
- detail和my页面分别用于新闻的详情页和个人用户页面
- 创建这两个页面后, 需要在app.json的Windows属性中进行引用.

页面设计

导航栏设计, 在app.json中进行编写

"window": {
     
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "海大新闻网"
 },

tabbar页面配置, 在app.json中进行编写. 主要实现底部任务栏的跳转. 官方文档给出tanbar的详细用法, 此处主要设置底部任务栏的样式和图标. 小程序一共分为3个tab页, 每一个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" : "我的"
      }
    ]
  }

主页面页面设计, 即编写index.wxml和index.wxss

<!--pages/index/index.wxml-->
<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{
      {swiperImg}}" wx:key='index'>
    <swiper-item>
      <image src="{
      {item.src}}"></image>
    </swiper-item>
  </block>
</swiper>
<!--新闻列表-->
<view id='news-list'>
  <view class='list-item' wx:for="{
      {newsList}}" wx:for-item="news" wx:key="id">
    <image src='{
      {news.poster}}'></image>
    <text bindtap='goToDetail' data-id='{
      {news.id}}'>◇{
    {news.title}}——{
    {news.add_date}}</text>
  </view>
</view>

主要使用了swiper组件实现图片的轮播效果
新闻列表采用微信提供的列表渲染, 并实现点击条目的任意处进行跳转详情页

/*新闻列表区域样式*/
/*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%;

最低0.47元/天解锁文章