vue小程序开发（四）首页 推荐

最新推荐文章于 2024-08-02 20:40:11 发布
最新推荐文章于 2024-08-02 20:40:11 发布
阅读量1.7k 收藏 4
点赞数 3
分类专栏： uni-app 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45915904/article/details/124161989
版权

vue小程序开发（四）首页 推荐

编写 首页-推荐 模块

功能介绍

  • 接口文档
  • 数据动态渲染
  • moment.js 的使用
  • “热门”列表的基于scroll-view的分页加载

在组件中能用生命周期组件没有太多,使用mouted(){}

推荐-最顶部模块

接口调用（新）

url:"http://service.picasso.adesk.com/v3/homepage/vertical",
data:{
    limit:30,
    order:"hot",
    skip:0
}

接口调用结果

home-recommend/index.vue

<template>
<view>
    <!-- 推荐 开始 -->
    <view class="recommend_wrap">
        <view class="recommend_item" 
              v-for="item in recommends"
              :key="item.id"
              >
            <image :src="item.thumb"></image>
    </view>
    </view>

    <!-- 推荐 结束 -->
    </view>

</template>

<script>
    export default {
        data(){
            return{
                //推荐列表
                recommends:[]
            }
        },
        mounted(){
            this.request({
                url:"http://service.picasso.adesk.com/v3/homepage/vertical",
                data:{
                    limit:30,
                    order:"hot",
                    skip:0
                }

            })
                .then(result=>{
                console.log(result);
                this.recommends=result.res.homepage[1].items;
            })
        }
    }
</script>

<style>

</style>

结果

home-recommend/index.vue

<template>
<view>
    <!-- 推荐 开始 -->
    <view class="recommend_wrap">
        <view class="recommend_item" 
              v-for="item in recommends"
              :key="item.id"
              >
            <image  mode="widthFix" :src="item.thumb"></image>
    </view>
    
    </view>
    <!-- 推荐 结束 -->
    </view>

</template>

<script>
    export default {
        data(){
            return{
                //推荐列表
                recommends:[]
            }
        },
        mounted(){
            this.request({
                url:"http://service.picasso.adesk.com/v3/homepage/vertical",
                data:{
                    limit:30,
                    order:"hot",
                    skip:0
                }

            })
                .then(result=>{
                console.log(result);
                this.recommends=result.res.homepage[1].items;
            })
        }
    }
</script>

<style lang="scss" scoped>
    .recommend_wrap{
        //flex布局
        display:flex;
        flex-wrap: wrap;
        .recommend_item{
            width: 50%;
            border: 5rpx solid #fff;
        }

    }

</style>

mode=“widthFix” 图片高度自适应 》》 知识点隶属于微信小程序基础

css 中的 flex 布局需要掌握，排版一般都会用到

结果

推荐-月份模块

月份模块标题样式

省略了上方四张图片的相关代码

home-recommend/index.vue

<template>
<view>
    <!-- 月份开始 -->
    <view class="moneths_wrap">
        <view class="moneths_title">
            <view class="moneths_title_info">
                <view class="moneths_info">
                    <text>18 /</text>
                    01 月
   				 </view>
                <view class="moneths_text">你负责美丽就好</view>
   			 </view>
            <view class="moneths_title_more">更多 > </view>
   		 </view>
        <view class="moneths_content"></view>
    </view>
    <!-- 月份结束 -->
</view>
</template>

<style lang="scss" scoped>
    .moneths_wrap {
        .moneths_title {
            display: flex;
            //   space 属性作用就是左边一块 右边一块
            justify-content: space-between;
            padding:20rpx;
            .moneths_title_info {
                color:$color;
                font-size:30rpx;
                font-weight: 600;
                // 使得两行 变成 一行
                display: flex;
                .moneths_info {
                    text{
                        font-size: 36rpx;
                    }
                }

                .moneths_text {
                    font-size: 34rpx;
                    color:#666;
                    margin-left: 30rpx;
                }
            }

            .moneths_title_more {
                font-size: 24rpx;
                color:$color;
            }
        }

        .moneths_content {

        }
    }
</style>

效果

选中代码块 快捷键ctrl+shift+p 显示插件提示框，选择generate css tress即可

快捷键 ctrl + D 选中view 删除所有的view

src/uni.scss

$color:#d52a7e;

npm install moment

http://momentjs.cn/

月份格式输出

<template>
    <view>
        <!-- 月份开始 -->
        <view class="moneths_wrap">
            <view class="moneths_title">
                <view class="moneths_title_info">
                    <view class="moneths_info">
                        <text>{{monthes.DD}} /</text>
                        {{monthes.MM}} 月
                    </view>
                    <view class="moneths_text">{{monthes.title}}</view>
                </view>
                <view class="moneths_title_more">更多 > </view>
            </view>
            <view class="moneths_content"></view>
        </view>
        <!-- 月份结束 -->
    </view>
</template>

<script>
//导入 moment.js    
import moment from "moment";
export default {
    data() {
        return {
            //推荐列表
            recommends: [],
            //月份  对象
            monthes: {}
        };
    },
    mounted() {
        this.request({
            url: "http://service.picasso.adesk.com/v3/homepage/vertical",
            data: {
                limit: 30,
                order: "hot",
                skip: 0
            },
        }).then((result) => {
            console.log(result);
            //推荐模块
            this.recommends = result.res.homepage[1].items;
            //月份模块
            this.monthes = result.res.homepage[2];
            //将时间戳 改成 18号/月 moment.js
            this.monthes.MM = moment(this.monthes.stime).format("MM");
            this.monthes.DD = moment(this.monthes.stime).format("DD");
            console.log(this.monthes);
        });
    },
};
</script>

大图变缩略图

图片渲染

image标签中的mode

aspectFit 等比例拉伸

aspectFill 填满

优化月份模块

问题

当请求未返回时显示undefined，优化便是解决这个问题

做判断

快捷键 替换代码

ctrl + h

推荐-热门模块

基本布局

response数据格式：

代码：

home-recommend/index.vue

<template>
    <view v-if="recommends.length > 0">
        <!-- 热门 开始 -->
        <view class="hots_wrap">
            <view class="hots_title">
                <text>热门</text>
            </view>
            <view class="hots_content">
                <view class="hot_item" v-for="item in hots" :key="item.id">
                    <image mode="widthFix" :src="item.thumb"></image>
                </view>
            </view>
        </view>

        <!-- 热门 结束 -->
    </view>
</template>


<script>
import moment from "moment";
export default {
    data() {
        return {
            // 热门
            hots: [],
        };
    },
    mounted() {
        this.request({
            url: "http://service.picasso.adesk.com/v3/homepage/vertical",
            data: {
                limit: 30,
                order: "hot",
                skip: 0,
            },
        }).then((result) => {
            //获取热门数据的列表
            this.hots = result.res.vertical;
        });
    },
};
</script>

<style>
  .hots_wrap {
    .hots_title {
      padding: 20rpx;
      text {
        border-left:10rpx solid $color;
        padding-left: 20rpx;
        font-size: 34rpx;
        font-weight: 600;
      }
    }

    .hots_content {
      display: flex;
      flex-wrap: wrap;
      .hot_item {
        width: 33.33%;
        border: 3rpx solid #fff;
        image {
          
        }
      }
    }
  }
</style>

使用scroll-view改造容器

分页功能分析
  • 使用 scroll-view 标签充当分页的容器（小程序内置标签
  • 绑定滚动条触底时间 scrolltolower
  • 实现分页逻辑

实现头部固定

目前效果：

目标效果：

需要实现头部固定变不变

思路：

给容器定个高度，应该是整个屏幕的高➖头部的高，底部的bar不用管，因为小程序把底部剔除出来了

过程：

  1. 将根标签改成scroll-view，加入scroll-y表示上下滑动
  1. 固定上方头部

注意 - 号左右有空格键

100vh 代表整个屏幕的高度，此处忽略底部bar

分页

分页主要参数：

skip ： 跳过多少条

  • 当我们请求第一页的时候，跳过0条
  • 当请求第二页的时候，需要跳过30条
  • 当请求第三页数据时，需要跳过60条

提取出来 ，方便改动

data() {
    return {
        //推荐列表
        recommends: [],
        //月份  对象
        monthes: {},
        // 热门
        hots: [],
        //请求的参数
        params: {
            limit: 30,
            order: "hot",
            skip: 0,
        },
        //是否还有下一页
        hasMore: true,
    };
}

实现底部触发

底部触发函数 handleToLower

@scrolltolower="handleToLower"

hasMore：表示是否还有数据

getList()：封装了请求

handleToLower() {
    /**
       * 1 修改参数 skip += limit
       * 2 重新发送请求 getList()
       * 3 请求回来成功 hots 数据的叠加
       */
    if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
    } else {
        //弹窗提示用户
        uni.showToast({
            title: "已经没图片啦",
            duration: 2000,
        });
    }
},

getList()

获得接口的数据

经过调试，发现视频中 length的方法并不能判断是否有图片数据

通过数据观察，发现当没有数据的时候，接口中code的返回值为1，有数据的时候，接口的code的返回值为0

拼接热门数据（es6）：this.hots = […this.hots, …result.res.vertical];

//获取接口的数据
getList() {
    this.request({
        url: "http://service.picasso.adesk.com/v3/homepage/vertical",
        data: this.params,
    }).then((result) => {
        console.log(result);

        //判断还有没有下一页数据
        if (result.code === 1) {
            this.hasMore = false;
            return;
        }

        //第一次发请求的时候
        if (this.recommends.length === 0) {
            //推荐模块
            this.recommends = result.res.homepage[1].items;
            //月份模块
            this.monthes = result.res.homepage[2];
            //将时间戳 改成 18号/月 moment.js
            this.monthes.MM = moment(this.monthes.stime).format("MM");
            this.monthes.DD = moment(this.monthes.stime).format("DD");
            console.log(this.monthes);
        }

        //获取热门数据的列表
        //改成数组拼接的方式 es6
        this.hots = [...this.hots, ...result.res.vertical];
    });
}

首页 - 专辑

功能分析

  • 使用 setNavigationBarTitle 修改 页面标题
  • 发送请求获取数据
  • 使用 swiper 轮播图组件
  • 使用 scroll-view 组件实现分页
  • 点击跳转到 专辑详情页

setNavigationBarTitle

在组件中动态修改主题

动态修改页面标题

home-album/index.vue

mounted() {
    //修改页面标题
    uni.setNavigationBarTitle({title:"专辑"});
}

专辑接口：

http://service.picasso.adesk.com/v1/wallpaper/album

轮播图实现

<template>
    <view>
        <!-- 
        swiper
        1 自动轮播 autoplay
        2 指示器  indicator-dots
        3 衔接轮播 circular

        4 swiper 
        默认高度 150px
        5 image
        默认的宽度 320px =》 基本样式中 重置了 100%
        默认高度 240px
        6 计算图片的宽度和高度的比例
        7 把图片的比例也写到 swiper标签样式
        8 默认宽高 100%
        -->
        <!-- 轮播图 开始 -->


        <!-- 轮播图结束 -->
        <view class="album_swiper">
            <swiper
                    autoplay
                    indicator-dots
                    circular
                    >
                <swiper-item
                             v-for="item in banner"
                             :key="item.id"
                             >
                    <image :src="item.thumb"></image>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
data(){
    return{
        params:{
            limit:30,
            order:"new",
            skip:0
        },
        //轮播图数组
        banner:[],
        //列表数组
        album:[]
    }
}
,
    mounted() {
        //修改页面标题
        uni.setNavigationBarTitle({title:"专辑"});
        this.getList();
    },

        methods:{
            //获取接口的数据
            getList(){
                this.request({
                    url:"http://service.picasso.adesk.com/v1/wallpaper/album",
                    data:this.params
                })
                    .then(result=>{
                    console.log(result);
                    this.banner = result.res.banner;
                    this.album = result.res.album;
                })
            }
        }
};
</script>

<style lang="scss" scoped>
.album_swiper{
    swiper{
        //750rpx
        height: calc( 750rpx / 2.3);
        image{
            height: 100%;
        }
    }
}
</style>

列表数据渲染

接口文档

P29

https://www.jianshu.com/p/fb1d1ad58a0b

https://www.showdoc.cc/414855720281749?page_id=3678621017219602

接口文档
推荐: http://service.picasso.adesk.com/v3/homepage/vertical
专辑 http://service.picasso.adesk.com/v1/wallpaper/album
分类: http://service.picasso.adesk.com/v1/vertical/category
分类-最新-热门 http://service.picasso.adesk.com/v1/vertical/category/i d / v e r t i c a l 专 辑 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m 专 辑 − 详 情 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m / {id}/vertical 专辑 http://service.picasso.adesk.com/v1/wallpaper/album 专辑-详情 http://service.picasso.adesk.com/v1/wallpaper/album/id/vertical专辑http://service.picasso.adesk.com/v1/wallpaper/album专辑−详情http://service.picasso.adesk.com/v1/wallpaper/album/{id}/wallpaper
图片评论 http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment

出错

net::ERR_PROXY_CONNECTION_FAILED

当处理一个错误超过一个小时，且错误不在代码在环境，可以重新构建环境，而不是一直找错！

WWWOWhite
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue开发小程序是怎么做到的？
m0_71729058的博客
06-08 2369
Vue、 React 和 Angular 是当前应用最广的三大前端框架，仅从 GitHub 趋势来看，Vue 更是排在了第一位，目前已经达到了 17 万的 Star。目前，不管是 BAT 大厂，还是创业公司，Vue 都有广泛的应用，对于任何一个前端工程师来说，Vue 都是一门非常值得我们学习的前端框架。但在国内小程序成为移动开发的破局者之后，Vue的名字又经常和小程序关联在了一起，下面我们就一同探究两者之间的关系。......
【用vue开发微信小程序】（uni-app）（自用，不推荐参考）
热门推荐
sp_zhaoyun的博客
07-29 3万+
笔记自用
Vue主界面精美模板分享_vue网站模板
2401_85123458的博客
06-11 933
这里是网址图像联网会显示，圆角头像（可以自己更换）这里点击按钮事件自己添加。
3分钟了解Vue开发小程序的技术原理
凡泰极客Blog
04-08 2141
Vue、 React 和 Angular 是当前应用最广的三大前端框架，仅从 GitHub 趋势来看，Vue 更是排在了第一位，目前已经达到了 17 万的 Star。 目前，不管是 BAT 大厂，还是创业公司，Vue 都有广泛的应用，对于任何一个前端工程师来说，Vue 都是一门非常值得我们学习的前端框架。 但在国内小程序成为移动开发的破局者之后，Vue的名字又经常和小程序关联在了一起，下面我们就一同探究两者之间的关系。 一、首先认识下Vue Vue.js（读音 /vjuː/, 类似于 view） 是一套构建
vue小程序开发（一） uni-app基本学习
Mr.White的博客
04-14 7721
vue小程序开发（一） uni-app基本学习脚手架搭建项目新建页面样式和sass基本语法数据展示数据循环条件编译计算属性事件传参方式组件组件的简单使用示例组件传递参数父向子传递数据子向父传递数据全局共享数据组件插槽未使用插槽在组件中添加插槽生命周期介绍当小程序模拟器无反应时 脚手架搭建项目 全局安装 npm install -g @vue/cli 创建项目 vue create -p dcloudio/uni-preset-vue my-project 启动项目(微信小程序) npm ru
浅入了解Vue开发小程序的技术原理
POHOU23的博客
04-06 4701
受到Vue的影响，以及Vue众多的开发者，不少组织将小程序二次开发，以类似Vue语法的形式进行小程序开发（最后通过自己的工具转成原生小程序的语法），比如美团的mpVue（Vue.js in mini program）。 市场上比较成熟的小程序容器技术-FinClip，通过集成SDK便可让自己的APP快速拥有小程序运行能力。
uniApp+Vue3+Vite微信小程序开发指南
青柠豆腐
06-01 2308
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html。webstorm 下载地址：https://www.jetbrains.com/webstorm/
从 Vue.js 到微信小程序 - 框架语法差异与开发技巧
笔记、经验、日常分享
04-05 1037
小程序虽然有一些独特的地方,但其核心的开发思路和 Vue 是非常相似的。作为一名有 Vue 开发经验的开发者,如果想快速掌握小程序开发,需要了解 Vue 和小程序在设计上的主要差异,这样可以更好地过渡和适应小程序的开发模式。
uniapp + vue3微信小程序开发（1）框架搭建
qq_39404437的博客
04-22 2万+
uniapp + vue3 开发微信小程序
使用Vue开发微信小程序1
qq_33977080的博客
04-02 8213
1. 安装vue脚手架 npm install -g vue-cli 2. 创建项目 vue init mpvue/mpvue-quickstart truth_hold 输入appid 一路回车 3. 安装依赖 npm install npm run dev 最后将项目导入到微信开发者工具中。 4. 当出现的时候需要安装依赖 出现 npm install sass-loader node-sass --save-dev 然后报错，在package.json中修改node-sass的版本为7.
vue开发小程序 获取用户地理位置
qq_44953527的博客
05-10 821
1.vue 中开发小程序，按照官方文档调用 getLocation() API后一直显示 要在app.json 进行permission配置。报错如下 2.vue中大部分的全局配置在pages.json中，但添加permission后依然报提示 3.最终找到配置permission位置在manifest.sjson中 4.配置代码如下 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示"
Vue开发megalo-基于Vue的小程序开发框架
05-05
1、Megalo 是基于 Vue（Vue@2.6.6） 的小程序开发框架，让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案，只需要少量改动即可完成 H5 和小程序之间的...
Vue微信小程序开发中的实践
05-13
本资源旨在为开发者提供一个全面的Mpvue项目介绍和使用教程，帮助你快速上手和深入理解如何在微信小程序开发中有效利用Vue.js。 主要特性： Vue.js全兼容：Mpvue保留了Vue.js的所有特性，支持数据驱动和组件化的...
【Vue小程序】商城开发 第二节
12-24
在本节"【Vue小程序】商城开发 第二节"中，我们将深入探讨使用Vue.js框架进行微信小程序的商城应用开发。Vue.js是一个轻量级、高性能的前端框架，以其易学易用、组件化开发和良好的生态系统而备受开发者喜爱。在微信...
【Vue小程序】商城开发 第四节 上
12-24
在本节"【Vue小程序】商城开发 第四节 上"中，我们将深入探讨使用Vue.js技术构建微信小程序商城的关键技术和实践。Vue.js是一款轻量级的前端JavaScript框架，以其易用性和灵活性深受开发者喜爱，而将其应用于微信小...
微信小程序_对接腾讯实时音视频_多人会议
分享程序相关知识
08-02 617
如何对接腾讯实时音视频的多人会议产品，从开通服务到对接完成，一 一讲解。
从零开始写一个微信小程序
最新发布
2301_79507619的博客
08-02 241
下载并安装[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。- 参考[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)学习更多功能和组件。- 前往[微信公众平台](https://mp.weixin.qq.com/)注册一个小程序账号。- 在微信开发者工具中，点击“上传”按钮，上传代码。
微信小程序之计算器
ch_s_t的专栏
07-25 1317
data-*是微信小程序的自定义属性，由data-前缀加上自定义的属性名，自定义属性值表示要传递的数据 ，在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据。
微信小程序实现聊天界面，发送功能
番茄Salad
07-24 2276
【代码】微信小程序实现聊天界面，发送功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WWWOWhite

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值