新闻微信小程序

二、实验步骤

新建项目

新建一个空的微信小程序项目。

配置文件

1. 在pages页面下配置index相关文件，logs相关文件以及detail相关文件；

2. 在utils文件夹下配置common.js文件，在image文件夹下导入相关图片素材；

3. 新建images文件夹，在文件夹下导入所需图片素材；

导航栏设计与实现

使用navigation-bar组件配置上导航栏，使用custom-tab-bar组件配置底部导航栏，使用内置的icon图标，通过onChange函数更新图标

onChange(event) {
      this.updateActiveTabBar(event.detail),
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    }

页面设计与实现

首页

设计新闻浏览页面如下：

1. 使用swiper标签实现新闻轮播图的功能：

   <swiper class="swiper-container" style="height: 415rpx; width: 750rpx; display: block; box-sizing: border-box" indicator-dots indicator-color="white" autoplay interval="3000" circular>
      <block wx:for="{
      {swiperList}}">
         <swiper-item>  
           <image src="{
      {item}}" mode="aspectFit" style="width: 750rpx; height: 415rpx; display: inline-block; box-sizing: border-box"></image>  
         </swiper-item> 
       </block>
   </swiper>

   对应JavaScript函数实现功能：

   data: {
       swiperList: [
         'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
         'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg',
         'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg'
       ],
   }

1. 使用van-divider标签分割面板

   <van-divider
     contentPosition="center"
     customStyle="color: #8b8b8b; border-color: #8b8b8b; font-size: 14px;"
   >
     最新消息
   </van-divider>

2. 使用view标签、image标签和text标签实现新闻列表功能

   </van-divider>
       <view id="news-list">
           <view class='list-item' hover-class="hover-item" hover-start-time="50" hover-stay-time="200" 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}}\n{
      {news.add_date}}</text>  
       </view>
   </view>

   goToDetail函数和onLoad通过读取common.js中的news接口来实现新闻列表的输出：

   goToDetail: function(e) {
       //获取携带的data-id数据
       let id = e.currentTarget.dataset.id;
       //携带新闻id进行页面跳转
       wx.navigateTo({
         url: '../detail/detail?id=' + id
       })
     },
   ​
     onLoad: function(options) {
       //获取新闻列表
       let list = common.getNewsList()
       //更新列表数据
       this.setData({
         newsList: list
       })
     },

   对应的wxss代码，在原有的基础上对界面进行了优化。

   /* 列表项目 */  
   .list-item {  
     display: flex;  
     flex-direction: row;  
     border-bottom: 1rpx solid gray;  
     padding: 10rpx 0; /* 上下间隔 */  
     margin-bottom: 10rpx; /* 底部间隔 */  
     border-radius: 10rpx; /* 圆角 */  
     background-color: #fff; /* 背景色，可选 */  
     transition: all 0.3s ease; /* 过渡效果 */  
   }  
     
   /* 新闻图片 *