移动软件开发——实验四

分类：菜鸟笔记作者：qq_47171671

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

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1 项目创建

本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。
1.1 首页功能需求
首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。
1.2 新闻页功能需求
新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。

​ 1.3 个人中心页功能需求
个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。

2 项目创建

3 页面配置

​ 3.1 创建页面文件

4_2

​ 3.2 删除和修改文件

​ 3.3 创建其他文件

4_3

4 视图设计

​ 4.1 导航栏设计

4_4

​ 4.2 tabBar 设计

​ 4.3 页面设计

​ 该部分主要是设计首页、个人中心、新闻页。并加入测试数据

4_5

4_6

4_7

5 逻辑实现

​ 5.1 公共逻辑

​ 创建common.js文件

​ 5.2 首页逻辑

4_8

​ 5.3 新闻页逻辑

4_10

​ 5.4 个人中心页逻辑

4_11

​ 5.5 清除临时数据

三、程序运行结果

列出程序的最终运行结果及截图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ftkbbx9D-1661261110390)(4_12.png)]

4_12

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

新闻页收藏按钮“点击收藏”显示不完整

4_9

解决方式：改变控件宽度。

代码：

index.js

Page({
  data: {
    //幻灯片素材
    swiperImg: [
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg'},
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg'},
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg'}
    ]
  },
  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
    })
  },
})

index.wxml

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
    <swiper-item>
      <image src="{{item.src}}" class="slide-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>

index.wxss

/**index.wxss**/
swiper{
  height: 400rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

#news-list {
  min-height: 600rpx;
  padding: 15rpx;
}

.list-item{
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid gray;
}

.list-item image{
  width:230rpx;
  height: 150rpx;
  margin: 10rpx;
}

.list-item text{
  width: 100%;
  display: block;
  line-height: 60rpx;
  font-size: 10pt;
}

detail.js

var common = require('../../utils/common')

Page({
  data: {
  },
  onLoad: function (options) {
    let id = options.id;
    let result=common.getNewsDetail(id)
    if(result.code='200'){
        this.setData({
            article: result.news  
        })
    }
    // 检查当前新闻是否在收藏夹中
    var article = wx.getStorageSync(id);
    if (article != '') {
        this.setData({
            isAdd: true
        })
    } 
    else {
       
            this.setData({
                isAdd:false
            })
    }
    },
    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
        });
    }
})

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>

detail.wxss

.container{
    padding: 15rpx;
  }
   
  .title{
    font-size: 35rpx;
    line-height: 35rpx;
    font-family: fangsong;
    text-align: center;
  }
   
  .poster image{
    width: 100%;
  }
   
  .content{
    text-align: left;
    font-size: 30rpx;
    line-height: 35rpx;
  }
   
  .add_date{
    font-size: 30rpx;
    text-align: right;
    line-height: 30rpx;
    /* 距离右侧与顶部的距离 */
    margin-right: 25rpx;
    margin-top: 20rpx;
  }
  button {
    width: 350rpx;
    height: 100rpx;
    margin: 20rpx auto;
  }

my.js

var common = require('../../utils/common')
// pages/my/my.js
Page({
    data: {
        num: 0
    },
    getMyInfo: function (e) {
        wx.getUserProfile({
            desc: '用于获取信息',
            success: (res) => {
                this.setData({
                    isLogin: true,
                    src: res.userInfo.avatarUrl,
                    nickName: res.userInfo.nickName
                })
                wx.setStorageSync('islogin', true)
            }
        })
        this.getMyFavorites();
    },
    goLogout() {
        wx.showModal({
            title: '提示',
            content: '您确定要退出登录吗',
            success: (res) => {
                if (res.confirm) { //这里是点击了确定以后
                    console.log('用户点击确定')
                    wx.setStorageSync('islogin', false)
                    this.setData({
                        src: '',
                        nickName: '',
                        isLogin: false
                    })
                } else { //这里是点击了取消以后
                    console.log('用户点击取消')
                }
            }
        })
    },
    getMyFavorites: function () {
        let info = wx.getStorageInfoSync();
        let keys = info.keys;
        let num = keys.length - 1;
        let myList = [];
        for (var i = 0; i < num; i++) {
            let obj = wx.getStorageSync(keys[i]);
            myList.push(obj);
        }
        this.setData({
            newsList: myList,
            num: num
        });
    },
    goToDetail: function (e) {
        let id = e.currentTarget.dataset.id;
        wx.navigateTo({
            url: '../detail/detail?id=' + id,
        })
    },
    onLoad(options) {
    },
    onShow: function () {
        if (this.data.isLogin) {
            this.getMyFavorites()
        }
    },
})

my.wxml

<view class="myLogin">
    <block wx:if="{{isLogin}}">
        <image class="myIcon" src="{{src}}"></image>
        <text class="nickName">{{nickName}}</text>
    </block>
    <button wx:else open-type="getUserInfo" bindtap="getMyInfo">
        未登录，点击登录
    </button>
    <button wx:if="{{isLogin}}" bindtap="goLogout">退出登录</button>
</view>
<view class="myFavorites" wx:if="{{isLogin}}">
    <view class="shoucang">我的收藏--{{num}}</view>
    <view class="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>
</view>

my.wxss

.myLogin {
    background-color: #328BBE;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
    .myIcon {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
}
    .nickName {
    color: white;
}
.myFavorites {
    padding: 20rpx;
}
    .myFavorites .shoucang {
    width: 100%;
    text-align: center;
    color: black;
    font-size: large;
}
    .news-list {
    min-height: 600rpx;
    padding: 15rpx;
}
    .list-item {
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid gray;
}
        .list-item image {
    width: 230rpx;
    height: 150rpx;
    margin: 10rpx;
}
        .list-item text {
    width: 100%;
    line-height: 60rpx;
    font-size: 10pt;
}

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

前端前端

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
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