当前位置: 首页 > 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…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...