膳逸前端开发--小程序开发日记【一】

提示：本篇文章为学校项目实训的记录，所以可能会写的没头没尾的，不具有实际指导意义，因为是小组共同开发，所以不是自己负责的部分会在别的小组成员博客里。

---

前言

上次说到后台的前端开发基本完成，今天这篇文章来打开小程序的前端开发的大门。时隔近三周更新，带来了小程序前端的大爆发式更新（不是）。我会分几篇来进行讲解。其实下面的小程序端开发也是在框架已经搭建好的情况下进行的。使用Hbuilder X + 微信开发者工具进行开发。
前期其实在搭建过程中有很多麻烦事儿，但是网上都有很详细的教程，下面具体来谈谈开发的事儿。在此期间，后端小伙伴已经定义并实现了后端接口。

---

一、打卡记录显示

由于是要做一个基于AI的饮食助手，需要记录每日饮食的打卡。
基本的实现效果如下图

实现的效果有：
1.顶端显示用户图像和打卡天数和显示我的饭友单元格，这两个都是固定在页面顶部的。
2.下方区域显示打卡记录

二、效果详述

1.顶端显示用户图像等信息

如果用户尚未登录，则提示登录；
如果用户已经登录，显示用户的昵称、头像和打卡天数信息，右边的图标为发布打卡和分享验证码
下方显示的“我的饭友”是一个跳转链接
在下方是滑动窗口，由近到远显示用户的打卡记录
效果图如下

头像显示代码如下：

<!-- 顶部头像-干饭日记显示区域 -->
        <view class="top-container">
            <u-avatar :src="user.avatar || ''" shape="square" size="52"></u-avatar>
            <view class="info">
                <view v-if="flag == 'logout'" open-type="getUserInfo" @tap="loginOrRegister">
                    <text class="operate">注册 / 登陆</text>
                    <text class="remark">请登陆膳逸小程序</text>
                </view>
                <view v-if="flag == 'login'">
                    <text class="username">{{ user.username }} 的干饭日记</text>
                    <u-row>
                        <u-col><text class="phone">已经打卡 {{ checkInDays }} 天</text></u-col>
                    </u-row>
                </view>
            </view>
            <view @tap="navigateToEditPage">
                <u-icon name="edit-pen" color="#e6e6e6" size="38"></u-icon>
            </view>
            <view @tap='getMyCode'>
                <u-icon name="share" color="#e6e6e6" size="38"></u-icon>
            </view>
        </view>

2.我的饭友

代码如下：

 <!-- 我的饭友 -->
        <view class="navigator-container" @tap="navigateToFollowPage">
            <u-cell-group>
                <u-cell icon="account-fill" title="我的饭友" :isLink="true" arrow-direction="right"></u-cell>
            </u-cell-group>
        </view>

该处使用tap做跳转方法。

---

3.打卡显示页面

在这里使用u-list组件做展示，用scrolltolower做部分查询和接续查询。
前端template代码如下：

		<view>
			<view class="u-page">
			    <u-list @scrolltolower="scrolltolower" >
			        <u-list-item v-for="(item, index) in list" :key="index">
			            <view class="publicity-container">
			                <view>
			                    <text class="dairyDate">{{ formatTime(item.time) }}</text>
			                </view>
			                <view>
			                    <text class="dairyText">{{ item.text }}</text>
			                </view>
			                <!-- 这里显示图片 -->
			                <view class="image-container">
			                    <image v-for="(image, imgIndex) in splitImages(item.images)" :key="imgIndex" class="showPicture" :src="image" mode="widthFix"></image>
			                </view>
			                <view style="margin: 20rpx 5rpx 20rpx 5rpx">
			                    <u-line color="#717171"></u-line>
			                </view>
			                <view>
                                <view class="container">
                                    <view>
                                        <view>
                                            <view v-for="(row, index) in parseAnalysis(item.analysis)" :key="index" class="row">
                                                <text class="cell" :class="{ 'bold': index % 2 === 0, 'indented': index % 2 === 1 }">{{ row }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
			            </view>
			        </u-list-item>
			    </u-list>
			</view>
		</view>

fetchData方法显示如下：

		fetchData() {
            let that = this;
			let userIdStore = uni.getStorageSync('userId');
            if (!that.hasMore) {
                return;  // 如果没有更多数据，则不再发送请求
            }
            let data = {
                page: that.page,
                length: 10,
                userId: userIdStore,
                startTime: "",
                endTime: "",
                order: "desc"
            };
            that.ajax(that.api.searchUserCheck, 'POST', data, function(resp) {
                if (resp.data.code === 200 && resp.data.result && resp.data.result.list) {
                    if (resp.data.result.list.length < 10) {
                        that.hasMore = false;  // 如果返回的数据少于10条，则认为没有更多数据了
                    }
                    that.list = that.list.concat(resp.data.result.list);  // 将新数据追加到列表中
                    that.page += 1;  // 页数加1
                } else {
                    uni.showToast({
                        icon: 'error',
                        title: resp.data.msg || '加载失败'
                    });
                }
            });
        },

---

总结

这次开发的难度核心在与组件的固定与滑动处理，以及打卡记录的分段回显功能，下次带来我的饭友页面的实现。