从零开始的小程序开发看这一篇就够了#5(适用于有基础)

Annyufeng

已于 2023-09-04 16:56:08 修改

阅读量45

点赞数

文章标签： javascript 微信小程序开发语言 ecmascript

于 2023-09-04 16:54:55 首次发布

本文链接：https://blog.csdn.net/Annyufeng/article/details/132672891

版权

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

步骤一页面创建

现根据教程创建导入所需文件

步骤二导航栏设计

修改颜色和字体颜色和题目

并且在底部创建进入个人页面的按钮增加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": "我的"
      }
    ]
  },

步骤三主页设计

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key='swiper{{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="{{news.id}}">
    <image src='{{news.poster}}'></image>
    <text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
  </view>
</view>




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

利用commom.js里的data：

步骤四个人中心页设计

主要包含登录面板和我的收藏

<view id='myLogin'>
<block>
  <image src="{{src}}" id='myIcon'/>
  <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}}"></view>
    <image src="{{news.poster}}" />
    <text>〇{{news.title}}--{{news.add_date}}</text>
  </view>
</view>



/* pages/my/my.wxss */
#myLogin{
  background-color: #328EEB;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#myIcon{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
#nickName{
  color: white;
}
#maFavorites{
  padding: 20rpx;
}

步骤五新闻业设计

<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>



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

button {
  width: 250rpx;
  height: 100rpx;
  margin: 20rpx auto;
}