当前位置: 首页 > news >正文

仿网易云小程序(一)

目录

一、项目准备

二、项目初始化

1.新建项目

2.封装service请求

 三、底部导航栏的设计

 四、MV页面的设计

1.将获取到的数据进行渲染

2.播放量数据进行处理转换

3.时长数据进行处理转换

 五、MV组件的抽离封装

 六、请求的抽离video

 七、下拉重新请求新的数据

 八、跳转到视频播

一、项目准备

网易云开发接口文档:网易云开发接口文档

根据开发接口文档里面的教程在本地去开启虚拟服务器,从而可以获得对应的数据 

 

二、项目初始化

1.新建项目

新建一个空文件夹,然后打开微信开发者工具新建一个云开发的微信小程序项目。

2.封装service请求

这里采用ES6的相关语法,返回一个promise,之后在对应组件中去引入zjerequest即可进行相应的请求

const BASE_URL="http://localhost:3000"
class ZJERequest{request(url,method,params){return new Promise((resolve,reject)=>{wx.request({url:BASE_URL+url,method:method,data:params,success:function(res){
resolve(res)},fail:function(err){
reject(err)}})})}get(url,params){return this.request(url,"GET",params)}post(url,params){return this.request(url,"post",params)}
}
const zjerequest=new ZJERequest()
export default zjerequest

之后在对应的组件去发送请求

 三、底部导航栏的设计

1.首先先建立两个主要的文件夹home-music和home-video

2.在app.json文件里面去设置对应的标题和图片

 四、MV页面的设计

1.将获取到的数据进行渲染

 

2.播放量数据进行处理转换

在使用vue中,我们知道直接使用fliter就可以实现过滤器的功能,但是在原生微信小程序中没有这个概念,官方给出了一种 WXS脚本语言,  wxml中无法调用在页面的js中定义的函数(就是说在wxml文件里面不能直接写filter来对某个数据进行操作,需要去js文件里面对数据进行处理然后再响应到页面或者说在新文件wxs里面去写一个函数实现filter,然后在wxml里面引入这个模块,然后再使用模块里面的方法去进行处理),但是wxml可以调用wxs中定义的函数

  • wxs的语法类似于JavaScript,但是wxs和JavaScript时完全不同的两种语言
  • wxs有自己的数据类型
  • wxs不支持类似于ES6及以上的语法
  • wxs遵守CommonJS规范

 第一种解决方法,在js文件里面进行处理

 

 但是这种方式比较繁琐,需要在每一次修改完data里面的数据之后再重新使用setData去进行重新赋值

第二种解决方法,在wxs文件封装一个对数据处理的函数

3.时长数据进行处理转换

这个跟播放量数据处理是同个道理,同样是封装一个函数

function formatDuration(duration){duration=duration/1000var minute=Math.floor(duration/60);var second=Math.floor(duration)%60return minute+":"+second
}

 五、MV组件的抽离封装

将video遍历的每个item封装成一个公共的组件,方便代码管理

(1)首先先创建一个公共组件文件夹components,然后创建一个video-item-v1组件

(2)接收传送过来的数据

 (3)使用组件

 六、请求的抽离video

在发送请求的时候,将请求条数等写在组件的js文件中,会显得比较繁琐,所以可以采用将这个请求封装在其他的文件中,在每一次想要重新请求的时候可以直接把需要的条数传进去就可以了

 注意要使用await和async

 七、下拉重新请求新的数据

小程序里面有属于自己的监听下拉到底部的API

当滚动到底部时,根据是否还有数据去判断是否还要继续请求数据

八、上来重新请求数据

当滚动到最顶部的时候,会显示刷新,并且重新请求一开始的数据

 八、跳转到视频播放

给组件添加一个点击事件,同时将点击的对象内容昨晚一个属性绑定到当前对象身上,这样就能直接通过点击获取到这个对象身上的全部数据,同时进行页面的跳转

<video-item-v1 item="{{item}}"  bindtap="handleVideoItemClick" data-item="{{item}}"></video-item-v1>
handleVideoItemClick:function(event){// 获取idconst id=event.currentTarget.dataset.item.id// 页面跳转wx.navigateTo({url: './../detail-video/index?id='+id,})

相关文章:

仿网易云小程序(一)

目录 一、项目准备 二、项目初始化 1.新建项目 2.封装service请求 三、底部导航栏的设计 四、MV页面的设计 1.将获取到的数据进行渲染 2.播放量数据进行处理转换 3.时长数据进行处理转换 五、MV组件的抽离封装 六、请求的抽离video 七、下拉重新请求新的数据 八、跳转到…...

【C++】vector模拟实现及其应用

文章目录vector的介绍vector的使用及其实现vector的定义vector iterator 的使用vector空间增长问题vector的增删查改vector的介绍 vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素…...

JS看这一篇就够啦,JS基础大全,可用于快速回顾知识,面试首选

1 JS简介 更多JS内容可以看MDN&#xff1a;点击传送 浏览器分成两部分&#xff1a;渲染引擎和 JS 引擎 渲染引擎&#xff1a;用来解析HTML与CSS&#xff0c;俗称内核&#xff0c;比如 chrome 浏览器的 blink &#xff0c;老版本的 webkitJS 引擎&#xff1a;也称为 JS 解释器…...

武汉凯迪正大GB4208外壳防护等级试具

一、IP1X 试验探棒 产品概述&#xff1a; 符合IEC61032图1试具A、GB16842试具A、GB4208IP1、IEC60529IP1、IEC60065 等标准要求。用于防止手背触及的防护检验。 技术参数&#xff1a; 1、探球直径&#xff1a;50mm 2、挡板直径&#xff1a;45mm 3、挡板厚度&#xff1a;…...

Cent OS 从零部署ruoyi-cloud教程

1、java环境安装 https://blog.csdn.net/m0_61035257/article/details/125705400 Java_home设置 https://blog.csdn.net/m0_51104427/article/details/123924893 2、mysql安装 https://blog.csdn.net/ShockChen7/article/details/126965940 若安装的是Mysql8&#xff0c;建议…...

ChatGPT相关核心算法

ChatGPT 的卓越表现得益于其背后多项核心算法的支持和配合。本文将分别介绍作为其实现基础的 Transformer 模型、激发出其所蕴含知识的Prompt/Instruction Tuning 算法、其涌现出的思维链能力、以及确保其与人类意图对齐的基于人类反馈的强化学习算法。 1.基于Transformer的预…...

Python导入模块,Python import用法(超级详细)

使用 Python 进行编程时&#xff0c;有些功能没必须自己实现&#xff0c;可以借助 Python 现有的标准库或者其他人提供的第三方库。比如说&#xff0c;在前面章节中&#xff0c;我们使用了一些数学函数&#xff0c;例如余弦函数 cos()、绝对值函数 fabs() 等&#xff0c;它们位…...

大量产品“GPT 化”,开源大模型 AI 应用开发框架发布

大型语言模型&#xff08;LLM&#xff09;的出现&#xff0c;让我们看到了 AI 在自然语言处理方面的潜力&#xff0c;它涌现出来的创造力和思维能力令人叹为观止&#xff0c;并在新一代人机交互领域释放了大量的想象空间。 目前&#xff0c;决策者、产品负责人和开发者都在抢滩…...

STM32——IIC总线(MPU6050应用)

目录 一、IIC介绍 二、MPU6050 三、MPU6050实例 四、EEPROM ---------------------------------------------------------------------------------------------------------------------------- 每次都是IIC好没新意啊&#xff0c;我决定这次录视频的时候举两个例子&…...

ADB使用经验

adb是Android Debug Bridge的缩写&#xff0c;是一种用于与Android设备通信的命令行工具。它可以通过USB连接或Wi-Fi连接&#xff0c;允许开发者在计算机和Android设备之间进行文件传输、安装应用程序、调试应用程序等操作。要使用adb&#xff0c;需要先将Android设备与计算机连…...

详解LinkedHashSet和LinkedHashMap

目录 一.LinkedHashSet和LinkedHashMap 1.基本介绍 2.与HashSet和HashMap的区别 3.LinkedHashSet和LinkedHashMap具体的方法 1.LinkedHashSet 2.LinkedHashMap 二.模拟代码实现LinkedHashMap 三.具体应用 一.LinkedHashSet和LinkedHashMap 1.基本介绍 顾名思义,根据名…...

C++ LinuxWebServer 2万7千字的面经长文(下)

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; Linux Web Server项目虽然是现在C求职者的人手一个的项目&#xff0c;但是想要吃透这个项目&#xff0c;还是…...

RK3568平台开发系列讲解(驱动基础篇)IO 模型的分类

🚀返回专栏总目录 文章目录 一、阻塞 IO二、非阻塞 IO三、IO 多路复用四、信号驱动五、异步 IO沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将针对IO模型进行分类。 假设有这样一个场景,从磁盘中循环读取 100M 的数据并处理,磁盘读取 100M 需要花费 20 秒的…...

ChatGPT 有哪些 “激动人心的时刻“?以及自己的一些思考

文章目录一、前言二、主要内容三、一些思考&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 近日&#xff0c;英伟达创始人兼 CEO 黄仁勋与 OpenAI 联合创始人及首席科学家伊尔亚-苏茨克维 (Ilya Sutskever) 展开了一次 “炉边谈话”。 黄仁…...

Thingsboard开源物联网平台智慧农业实例快速部署教程(二)【手把手部署UI与动态数据】

Thingsboard开源物联网平台智慧农业实例快速部署教程&#xff08;二&#xff09;【部署UI与动态数据】 文章目录Thingsboard开源物联网平台智慧农业实例快速部署教程&#xff08;二&#xff09;【部署UI与动态数据】1. 页面总览2. 设备2.1 数据字段定义2.2 设备映射关系2.3 添加…...

Redis事务

1、事务概要 Redis事务是一个单独的隔离操作&#xff1a; 事务中的所有命令都会序列化、按顺序地执行。事务在执行的过程中&#xff0c;不会被其他客户端发送来的命令请求所打断。 Redis事务的主要作用 串联多个命令&#xff0c;防止别的命令插队。 事务的3个命令 MultiExe…...

【蛤蟆先生去看心理医生】

第一章 整个人都不太好 人物性格描述蛤蟆热情、时尚、爱冒险&#xff0c;现在抑郁&#xff0c;不能自拔獾智慧、威严河鼠关心朋友&#xff0c;有点絮叨鼹鼠体贴善良 第二章 擎友前来相助 讲诉了鼹鼠和河鼠对蛤蟆情况的担忧和讨论。鼹鼠回忆起过去蛤蟆时髦的打扮和充满活力的生…...

JAVA开发与运维(云安全产品)

在现在的开发和运维中&#xff0c;云生态组件的使用率非常高&#xff0c;很少公司自己维护自己的物理机&#xff0c;网络流量 &#xff0c;监控&#xff0c;第三方中间件&#xff0c;除了少数涉密程度高的部分和公司外&#xff0c;大多数的企业都在使用云生态。比如我们正在开发…...

[Few-shot learning] Siamese neural networks

这篇文章主要介绍的是Siamese Neural Network经典论文&#xff1a; Gregory Koch, et al., Siamese Neural Networks for One-shot Image Recognition. ICML 2015。 神经网络能够取得非常好的效果得益于使用大量的带标签数据进行有监督学习训练。但是这样的训练方法面临两个难题…...

利用qiankun框架在自己项目中集成拖拽式低代码数据可视化开发平台

目前微前端已经是很成熟的技术了&#xff0c;各大公司都推出了自己的微前端框架&#xff0c;比如蚂蚁的qiankun&#xff0c;京东的micro-app&#xff0c;如果你的子应用不使用vite构建的话&#xff0c;我会更加推荐后者&#xff0c;micro-app使用更加简单&#xff0c;micro-app…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...