2022年夏季《移动软件开发》实验报告
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;能够在开发过程中熟练掌握真机预览、调试等操作
二、实验步骤
1. 项目结构
2.视图设计
2.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":"我的"
}
]
},
2.2首页设计
2.2.1幻灯片设计
利用swiper实现幻灯片并使用wx:for实现幻灯片的图片替换
<!--幻灯片滚动-->
<swiper indicator-dots autoplay interval="5000" duration="500">
<block wx:for ="{
{swiperImg}}" wx:key ='swiper{
{index}}'>
<swiper-item>
<image src="{
{item.src}}" class="slide-image"></image>
</swiper-item>
2.2.2 新闻列表设计
使用wx:for设计每一条新闻的view,再使用data中的数据进行加载,由于在这个项目中要通过点击新闻跳转到新闻详细界面,因此需要添加跳转方法
<view id ='news-list'>
<view class='list-item' wx:for="{
{newsList}}" wx:for-item ="news"<