vuejs移动端开发笔记
文章平均质量分 86
以实战为线索,深入vuejs移动端开发,app、小程序和uni-app移动端开发实战。
特立独行的猫a
csdn技术男猫哥,高级嵌入式软件工程师、c++软件工程师、全栈工程师。专注分享c++、QT、嵌入式linux、Android、HarmonyOS、前端小程序、AIoT(物联网+人工智能)、单片机、通信技术、开发工具等相关内容。
展开
-
UniApp实现漂亮的音乐歌词滚动播放效果
通过使用UniApp的组件和API,我们可以轻松实现音乐歌词的滚动播放效果。关键在于监听音频的播放时间,并根据时间更新歌词的显示和滚动位置。这里面有个悬而未决的问题,就是这个滚动显示,有时候会滚动到最上方或最下方,导致在视野区域看不到。如何让歌词能够根据进度居中显示?原创 2024-09-07 10:30:15 · 908 阅读 · 0 评论 -
使用UniApp实现自定义音乐播放器组件封装(简单轻量级,完美支持H5/小程序/Android)
通过上述代码封装,我们实现了一个功能齐全的自定义音乐播放器组件。这个组件不仅提供了基本的播放控制功能,还支持进度控制、时间显示和事件处理。希望这篇文章能帮助你理解如何使用UniApp框架封装自定义组件,并在实际项目中应用。imovie: 爱电影小程序uni-appuni-app 影视类小程序开发从零到一 | 开源项目分享_uniapp 开源项目-CSDN博客APP体验地址:关注微信公众号【毛青年】,回复“影视”获取。原创 2024-09-03 22:46:04 · 1271 阅读 · 0 评论 -
uniapp开发打包的app远程升级功能的实现
uniapp官方推荐的都需要使用它自家的云端基于 uniCloud 云函数实现,使用倒是简单了,但是需要依赖它,还得安装管理后台。实际如果有自己的服务器资源的话,把升级文件放到服务器目录,自己去实现app远程升级,也不是什么麻烦事。虽然应用商店也能发布,但是每次都要审核,在局域网搭建自己的升级服务就显得很有必要了。这里主要针对打包的app升级,小程序的在线升级简单,在微信公众平台就支持。官方推荐App升级中心 uni-upgrade-center,它提供了 App 的版本更新服务。原创 2024-07-30 22:49:10 · 1194 阅读 · 0 评论 -
微信小程序登陆并获取用户信息详解(openid、session_key)
在小程序开发过程,js中所看到的wx.xxx(),其本身就含有一个接口请求,只是一些请求路径和请求参数都已经内嵌了xxx里面了。所以在wx.xxx()首先,你需要在小程序中调用 wx.login 接口,这会向微信服务器发送请求以获取一个临时的 code。wx.login({// res.code 是微信返回的临时登录凭证// 发送 res.code 到你的服务器进行换取 openId 和 sessionKey} else {console.log('登录失败!})原创 2024-07-29 20:39:08 · 5691 阅读 · 0 评论 -
uni-app 影视类小程序开发从零到一 | 开源项目分享
在数字娱乐时代,移动设备已成为我们生活中不可或缺的一部分,尤其是对于电影爱好者而言,随时随地享受精彩影片成为一种日常需求。爱影家,一款基于 uni-app 开发的影视类小程序,正是为此而生。它不仅提供了丰富的影视推荐,还融入了个性化知乎日报等内容,是不错的学习练手素材,同时可以关注电影动态,分享给有需要的小伙伴。原创 2024-07-20 19:20:07 · 2566 阅读 · 18 评论 -
Vue3 + uni-app 微信小程序:仿知乎日报详情页设计及实现
通过本文的介绍,我们不仅学习了如何使用Vue 3结合微信小程序构建知乎日报详情页,还深入了解了从前端设计到开发调试的全过程。希望这篇文章能帮助你提升前端开发技能,为用户提供更优质的移动阅读体验。原创 2024-07-18 22:07:15 · 2099 阅读 · 0 评论 -
使用uni-app和Golang开发影音类小程序
本项目旨在开发一个个人影音类小程序,用户可以浏览、搜索和播放视频内容。我们将使用uni-app进行前端开发,Golang进行后端开发,MongoDB数据存储,并通过RESTful API进行前后端通信。最好的学习方法就是在项目中练。采取两个措施:1.定一个小目标,不是挣它一个亿啊,而是实现某个具体的项目任务。2.去做,去实现它,并把过程心得分享出来。按这两种方法,是最好的学习实践。比如学习一款新单片机,如何一周上手,两周做项目呢?原创 2024-07-12 00:02:11 · 1674 阅读 · 0 评论 -
搭建图片缓存服务器,解决图片访问403 Forbidden问题
403 Forbidden错误表示服务器理解请求,但拒绝授权。这通常是因为请求的资源受到访问控制列表(ACL)或其他权限设置的限制。例如当三方应用访问微博图片,会出现的原因,是因为微博开启了“图片反盗链微博反盗链的原理,就是在浏览器请求头)里添加Referer信息,然后判断“图片来源如果是自家网站,那就发出,而如果是别人的,那就发出。原创 2024-07-11 23:14:44 · 962 阅读 · 0 评论 -
Pinia:Vue 2 和 Vue 3 中更好用的状态管理框架
Pinia是由Vue.js的核心维护者之一尤雨溪参与设计的下一代状态管理库,旨在提供一种更直观、更灵活的方式来管理Vue应用的状态。不同于传统的Vuex,Pinia从底层开始构建,充分利用Vue 3的新特性,特别是Composition API,使得状态管理变得更加自然和高效。Pinia凭借其现代化的设计理念、与Vue 3的深度融合、以及对Vue 2的良好兼容性,成为了Vue应用状态管理的新标准。无论你是Vue 2的忠实用户,还是Vue 3的探索者,Pinia都值得作为首选状态管理框架纳入你的开发工具箱。原创 2024-07-04 22:15:00 · 1279 阅读 · 0 评论 -
豆瓣最新能用的api合集总结
豆瓣网(Douban)作为一个集合了书籍、电影、音乐等多个领域的评论和评分平台,提供了丰富的API接口供开发者使用。通过这些API,开发者可以轻松地获取和处理豆瓣网上的各种数据,实现与豆瓣服务的无缝集成。本文将为您介绍最新的豆瓣API合集及其使用方法。接下来将详细介绍每个类别下的重要接口及其使用示例。原创 2024-06-20 21:48:49 · 12167 阅读 · 0 评论 -
uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)
uni-list是Uni-App框架内置的一个列表组件,它以简洁、灵活的方式封装了列表展示逻辑,支持多种列表项布局,如文本、图标、图片等组合展示。通过uni-list,开发者可以轻松创建美观、响应式的列表界面,无需从零开始编写复杂的布局代码,大大提升了开发效率。uni-app官网uni-list 列表 - DCloud 插件市场uni-list组件的强大之处在于其高度的可定制性。除了基本的文本展示,它还支持图片、图标、开关、滑动操作等多种元素的嵌入,以及不同的布局模式(如左图右文、上下结构等)。原创 2024-06-20 22:03:11 · 3834 阅读 · 0 评论 -
go 语言爬虫库goQuery 的详细使用(知乎日报详情页解析示例)
知乎日报这个案例很经典,有比较完整的API,很值得模仿学习。也很简单,唯一需要注意的是日报详情的设计,因为知乎日报的详情接口,竟返回的是html,这.....uniapp小程序开发 | 从零实现一款影视类app (后台接口实现,go-zero微服务的使用)_uniapp开源影视app-CSDN博客GoQuery是专为Go(Golang)语言设计的一个强大的HTML解析和查询库。它模仿了jQuery的API风格,使得在Go中处理HTML文档变得简单且直观。原创 2024-06-18 22:41:23 · 1623 阅读 · 0 评论 -
uniapp小程序开发 | 从零实现一款影视类app (后台接口实现,go-zero微服务的使用)
go-zero是一个集成了各种工程实践的 web 和 rpc 框架。通过弹性设计保障了大并发服务端的稳定性,经受了充分的实战检验。go-zero 包含极简的 API 定义和生成工具 goctl,可以根据定义的 api 文件一键生成 Go, iOS, Android, Kotlin, Dart, TypeScript, JavaScript 代码,并可直接运行。go-zero 缩短从需求到上线的距离文档介绍。原创 2024-06-05 22:20:46 · 2094 阅读 · 0 评论 -
uniapp小程序开发 | 从零实现一款影视类app (横向滚动和下拉刷新的实现)
uniapp小程序开发实战系列,完整介绍从零实现一款影视类小程序。包含小程序前端和后台接口的全部完整实现。这里介绍下我的电影小程序的完整实现过程,作为笔记存档。该篇介绍下实现过程中遇到的横向滚动和下拉刷新的实现。电影展示界面,是个明显的横向滚动。在没实现之前,一直以为可能需要借助listView或者uni-grid组件来实现,最后发现都不行。最终仅使用内置组件的scroll-view配合flex布局就完美达到效果啦。这里总结分享下,给需要的小伙伴。原创 2024-06-04 22:15:00 · 2695 阅读 · 0 评论 -
uni-app小程序开发实战 | (从零设计一款个人中心页面,最详细)
个人中心页面很常用,几乎每个app里面都少不了。同时个人中心页也较简单,可以作为UI项目练手,熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面,并详细介绍从零的实现过程,分享给有需要的小伙伴,需要的可以收藏。原创 2024-05-30 22:10:52 · 3876 阅读 · 0 评论 -
uni-app的网络请求库封装及使用(同时支持微信小程序)
在uni-app中,常见的网络库主要是基于uni-app内置的uni.request()方法,这是一个统一的网络请求接口,支持HTTP和HTTPS协议,可以处理GET、POST等请求方法。这个API提供了基本的HTTP请求功能,可以满足大部分应用的网络通信需求。除此之外,由于uni-app是基于Vue.js的,所以也可以使用一些适用于前端的JavaScript网络库如axios 第三方库,支持Promise API,有丰富的拦截器、配置选项和错误处理。原创 2024-05-30 21:45:00 · 7841 阅读 · 0 评论 -
uniapp中使用mockjs模拟接口测试总结(swiper轮播图示例)
网上的大多数教程和使用都较麻烦,且有的不支持小程序平台,有的仅是针对H5或者后台的nodejs环境。这里完整总结下如何在uni-app中简单使用Mock.js模拟接口测试。使用很简单,没有网上介绍的那么复杂,同时也给出个首页swiper轮播图的mock接口使用示例。Mock.js 是一个前端模拟数据生成工具,它可以帮助前端人员在开发过程中模拟后端接口的返回数据,以便在开发和测试阶段能够独立于后端进行工作,从而实现前后端的分离开发。Mock.js官网Mock.js的Github地址主要功能和特点。原创 2024-05-24 20:24:02 · 2160 阅读 · 11 评论 -
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
几年前,笔者自学了vue这一优秀的前端框架,但苦于没项目练手,无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台,实现了前端和后台的整体功能。整体方案介绍参见博文《》,前端使用vue-admin-beautiful框架,后端使用go-zero微服务框架,几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面:后续有机会介绍下我这个终端监控云平台小项目的具体实现,挺有意思的。几年前还用到过几个地方的公交客户现场,客户挺喜欢这个功能的。原创 2024-05-15 22:50:31 · 4676 阅读 · 1 评论 -
typescript中的class与interface和type的区别
在 TypeScript 中,type、interface 和 class 分别具有自己的用途和特点。type适用于定义类型别名、联合类型、交叉类型等,并且不需要运行时信息。interface主要用于定义对象的类型和形状,支持继承和实现。class既包含类型信息,也包含实际的属性和方法实现。在实际开发中,我们应根据需求选择合适的类型声明方式。虽然 type 和 interface 在很多场景下可以互换使用,但它们在某些特定场景下有着各自的优势。原创 2024-02-19 22:45:00 · 3601 阅读 · 0 评论 -
基于最新 Vite+Vue3+VantUI移动端应用项目搭建
Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口,并表示自己 ”再也回不去 webpack 了“ 。这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。Vite官网地址:https://vitejs.dev/使用Vite的优点:最简单直观的一点,那就是快啊。和Webpack相比,Vite 具有以下特点:...原创 2021-11-16 19:40:30 · 4501 阅读 · 0 评论 -
Vue3.0入门 + Vant3.0移动端实践(三)使用Cordova打包Android App
接着上面两节,把做成的h5小应用打包成android的app放置在手机上看看效果。如何把一个h5应用打包成android的app? 使用Cordova就是一种简单不错的办法。当然也有其他的一些办法如使用HBuilderX这一强大的IDE工具,里面支持打包Android或ios的app,微信小程序等。或者一些第三方的打包平台,也支持把h5的应用打包成app,但有可能是收费的。使用HBuilderX的话若开发体系都是基于HBuilder则是不错的选择,但太依赖于HBuilder。而使用Cordo原创 2021-11-13 17:40:35 · 6775 阅读 · 2 评论 -
好用的轻量级http接口测试工具(替代PostMan)
这款神器叫rest client,是vscode编辑器的一个免费插件。真好用,还很轻量级,免下载安装。在vscode扩展里搜索rest client,找到后安装即可。使用方法:在vscode中新建个文件,注意后缀名需要改为.http后缀并保存。接下来在文件中就可以写接口测试啦,格式如下:post http://127.0.0.1:8888/open/cmdSetContent-Type:application/json{ "sn": "00a02a66e52477dc",.原创 2021-08-26 19:41:07 · 5171 阅读 · 1 评论 -
Vue打包后Echarts图表不显示问题解决
最近发现一奇怪问题,正常本机测试情况下,echarts图表显示的没问题。但是只要打包后部署到nginx里,第一次首页加载没问题,但进入其他tab页面再返回首页时,echarts图表就是显示不出来了。监测控制台也没有任何的错误输出。网上有很多的说辞和办法,但试过了都没有效果。最后经过不断的尝试摸索,终于解决啦。有的说是生命周期和渲染顺序问题,说大家习惯了在mounted生命周期里面发送请求,mounted意思是页面已挂载完成,可以拿到dom节点了,这也说明echarts图表的dom结构也会在mount原创 2021-08-25 13:08:48 · 3758 阅读 · 9 评论 -
基于Vue3的好用的前端框架UnitUI分享
UnitUI是目前我见过最流畅的基于最新Vue3的前端UI框架。git地址:https://gitee.com/unitui/unituicli3其中它的菜单、路由和鉴权做的挺独特,相当不错且与众不同,既简单又实用。简单有多简单呢?在组件管理中导出不同的路由和菜单json,然后存在后端,根据不同的用户类别返回不同的路由和菜单json进行路由生成和菜单生成从而实现鉴权。Unitui意为组件式UI框架,unituicli3指基于vue3搭建的一个项目,可以通过这个框架可以快速搭建一个vue开发项目。 U原创 2021-08-22 11:02:46 · 2599 阅读 · 0 评论 -
Vue的Nginx前端代理配置
当用vue开发好前端需要打包时,一般都需要配置下代理方便访问后台接口,避免出现找不到链接或者跨域问题。记录下配置,假如vue中配置的跟url是/mock-server ,实际接口地址是127.0.0.1:8886则nginx.conf文件中,增加如下配置:location /mock-server { proxy_pass http://127.0.0.1:8886; #api请求地址的实际地址 rewrite ^.+mock-server/?(.*)$ /$1 break; #原创 2021-08-20 19:40:39 · 1751 阅读 · 0 评论 -
Vue3.0入门 + Vant3.0移动端实践(二)轮播图模块封装及首页完善
接着上一篇的来,上一篇做好了底部的导航栏模块,接下来继续完善首页。先记录下之前遇到的问题,Vue中img图像src变成"[object Module]"无法正确加载的问题。我在vue项目的js中,使用了require('../asserts/image.png')这种形式。网上查了很多资料,说是因为file-loader默认采用ES模块语法,即import '../image.png';然而Vue生成的是CommonJS模块语法,即require('../image.png');二者不一致。要么让fil原创 2021-02-04 19:38:32 · 2922 阅读 · 0 评论 -
Vue3.0入门 + Vant3.0移动端实践(一)环境搭建及首页底部导航栏设计
Vue3.0出来了,感觉Vue3.0比2.0好用多啦,且据说性能也有不少的提升,那么今后拥抱Vue3.0吧,会是个趋势。以下记录下Vue3.0的入门和一个移动端的项目工程模板实战。纸上得来终觉浅,直接给自己假想个项目实战,是最好的学习锻炼。先发下原型图,最终达到的效果是这样的:轮播图模块,快捷入口模块,列表模块,底部的导航栏 ...原创 2021-02-03 12:56:55 · 5387 阅读 · 1 评论 -
想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
MarkDown,写作神器,还是有必要掌握一下。以下为一个最简单的,使浏览器支持MarkDown渲染和语法高亮的demo,可以为以后的个人的markdown博客储备。使用了流行的markdown-it(MarkDown渲染),highlight.js(语法高亮)和mermaid.js(画流程图、时序图等的js库)组件。附图,浏览器显示出来的效果:附完整的html的使用...原创 2020-05-07 18:26:10 · 3696 阅读 · 0 评论