1000字范文 > OUC-移动软件开发-实验4

OUC-移动软件开发-实验4

时间：2018-10-17 19:50:01

相关推荐

OUC-移动软件开发-实验4

实验4

一、实验目标

二、实验步骤

1. 搭建小程序页面，美化样式

💡 配置Tabbar

"tabBar": {"color": "#000000","selectedColor": "#328EEB","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./images/index.png","selectedIconPath": "./images/index_blue.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "./images/my.png","selectedIconPath": "./images/my_blue.png"}]},

💡 index 首页设计

编写 wxml 和 wxss 文件，具体代码如下：

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500"><block wx:for="{{swiperImg}}" wx:key="index"><swiper-item><image src="{{ item.src }}" class="slide-image"></image></swiper-item></block></swiper><view id="news-list"><view class="list-item" wx:for="{{newsList}}" wx:key="{{ item.id }}"><image src="{{ item.poster }}"></image><view class="right"><text>🔷{{ item.title }}</text><text> -- {{item.add_date}}</text></view></view></view>

/**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 .right {display: flex;flex-direction: column;justify-content: space-around;}.list-item text {width: 100%;line-height: 60rpx;font-size: 10pt;}

具体效果如下：

💡 个人中心页设计

代码如下：

<view id="myLogin"><block><image id="myIcon" src="{{ src }}"><text id="nickName">{{ nickName }}</text></image></block></view><view id="myFavorites"><text>我的收藏</text><view id="news-list"><view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{ news.id }}"><image src="{{ news.poster }}"></image><view class="right"><text>🔷{{ news.title }}</text><text> -- {{news.add_date}}</text></view></view></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;}#myFavorites {padding: 20rpx;}

核心js代码：

// pages/my/my.jsdata: {// 临时微信用户昵称和头像nickName: '未登录',src: '../../images/index.png',// 临时新闻数据newsList: [{id: '264698',title: '省退役军人事务厅来校交流对接工作',poster: 'https://gaopursuit.oss-cn-//newsimage1.jpg',content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',add_date: '-08-19'}]},

实际效果如下：

💡 新闻页设计

先用wxml和wxss搭建页面的框架，后用 js 文件添加临时测试数据，

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

/* pages/detail/detail.wxss */.container {padding: 15rpx;text-align: center;}/* 新闻标题 */.title {font-size: 14pt;line-height: 80rpx;}/* 新闻图片 */.poster image {width: 100%;/* width: 700rpx; */}/* 新闻正文 */.content {text-align: center;font-size: 12pt;line-height: 60rpx;}/* 新闻日期 */.add_date {font-size: 12pt;text-align: right;line-height: 30rpx;margin-right: 25rpx;margin-top: 20rpx;}

// pages/detail/detail.jsdata: {article: {id: '264698',title: '省退役军人事务厅来校交流对接工作',poster: 'https://gaopursuit.oss-cn-//newsimage1.jpg',content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',add_date: '-08-19'}},

具体效果如下：

逻辑部分

💡 首页逻辑在onLoad()生命周期函数中，请求首页的新闻数据，并赋值给首页的 data点击新闻item，跳转到对应新闻的详情页（具体是在导航的时候传递参数，参数是新闻对应的 id ）

核心代码如下：

<view class="list-item" wx:for="{{newsList}}" wx:key="index" bindtap="goToDetail" data-id="{{item.id}}"><image src="{{ item.poster }}" mode="widthFix"></image><view class="right"><text>🔷{{ item.title }}</text><text> -- {{item.add_date}}</text></view></view>

// index.js// 跳转到详情页goToDetail(e) {// console.log("跳转id", e.currentTarget.dataset.id);wx.navigateTo({url: '../detail/detail?id=' + e.currentTarget.dataset.id,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({newsList: common.getNewsList()})},

// detail.jsonLoad(options) {this.setData({query: options})// 根据 id 获取新闻数据let msg = common.getNewsDetail(this.data.query.id);console.log(msg);if(msg.code == 200) {this.setData({article: msg.news})}else {this.wx.showToast({title: '无您查找的文章',duration: 1000,})}},

💡 收藏功能的逻辑

实现思路如下：

在LocalStorage中存入一个数组，当作收藏夹。点击收藏按钮，则先从LocalStorage中读取收藏夹，将当前新闻 push 到收藏夹中，再将收藏夹存入LocalStorage中。点击取消收藏，先从LocalStorage中读取收藏夹，将当前新闻从收藏夹中删除，再将收藏夹存入LocalStorage中。

核心代码如下：

// 添加收藏addFavor() {// 将当前新闻 push 入收藏夹，既放入 localStoragelet FavorList = [];FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');FavorList.push(this.data.article)this.setData({isAdd: true})wx.setStorageSync('FavorList', JSON.stringify(FavorList))},// 取消收藏cancelFavor() {// 需要取消收藏的新闻下标let index = 0let FavorList = [];FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');// 找下标FavorList = FavorList.filter(each => {return each.id != this.data.query.id})// 删除元素wx.setStorageSync('FavorList', JSON.stringify(FavorList))this.setData({isAdd: false})},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({query: options})// 根据 id 获取新闻数据let msg = common.getNewsDetail(this.data.query.id);if (msg.code == 200) {this.setData({article: msg.news})// 查找是否被收藏let FavorList = [];FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');FavorList.forEach(each => {if (each.id == this.data.query.id) {this.setData({isAdd: true})}})} else {this.wx.showToast({title: '无您查找的文章',duration: 1000,})}},

💡 个人页的逻辑

个人也需要实现的逻辑有以下两个：

实现登录功能。这个在实验1中用到过，即调用微信最新的getUserProfile接口。用户登录后，获取在LocalStorage收藏夹中的新闻，并动态渲染在页面上。有了前面的铺垫，此处信手拈来。

// 用户登录函数getUserProfile() {wx.getUserProfile({desc: '获取用户头像、昵称',success: (res) => {// 获取个人信息this.setData({src: res.userInfo.avatarUrl,nickName: res.userInfo.nickName,isLogin: true})// 获取收藏新闻this.getFavorList();}})},// 获取收藏新闻getFavorList(){let FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]')this.setData({newsList: FavorList,FavorCount: FavorList.length})},/*** 生命周期函数--监听页面显示*/// 作用是，如果用户已登录，每次进入个人页，都会动态刷新收藏列表。// 取消收藏cancelFavor() {// 需要取消收藏的新闻下标let index = 0let FavorList = [];FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');// 找下标FavorList = FavorList.filter(each => {return each.id != this.data.query.id})// 删除元素wx.setStorageSync('FavorList', JSON.stringify(FavorList))this.setData({isAdd: false})},onShow() {if(this.data.isLogin) {this.getFavorList()}},