uni-app
a_靖
大前端,全栈工程师
展开
-
uniapp自定义轮播图指示点样式实现完整代码附效果图
【代码】uniapp自定义轮播图指示点样式实现完整代码附效果图。原创 2024-04-25 10:47:22 · 903 阅读 · 0 评论 -
H5指定盒子截图,H5页面生成海报卡片完整代码附效果图
本篇博文是实现 H5 页面中指定一个盒子(div)生成一张图片。实现一个盒子里面的内容生成一张图片,包含完整代码资源,一看就会。原创 2024-03-15 17:56:29 · 908 阅读 · 0 评论 -
uView ui 安装步骤
由于uView使用easycom模式,让您无需引入组件即可直接使用,但是此功能需要Hbuilder X 2.5.5及以上版本才支持,详见配置easycom组件模式。 easycom打包的时候是按需引入的,您可以放心引入uView的整个组件库,发布打包时会自动剔除您没有使用的组件(注意:调试时仍然是全部引入的)请确保您下载的Hbuilder X (opens new window)为APP开发版,而非标准版,并且在"工具-插件安装"中安装了"scss/sass编译"插件原创 2024-03-12 11:11:18 · 1059 阅读 · 0 评论 -
移动端H5实现点击按钮保存图片到相册
这是模仿uniapp中H5环境原生的预览图片组件样式,由于原生组件不支持在图片上层加自定义提示的文字,所以自己写一个简单的组件加上“长按保存/分享图片”提示文字。canvasImg 是图片地址,你自己添加或者由canvas画出来的都可以。canvas海报生成图片可以参考下面的页面代码。所以只能曲线救国,自己写一个预览图片组件,在预览的图片上面加上提示,长按保存/分享图片。方案1:微信浏览器为了安全考虑不支持执行使用代码直接保存图片到相册。方案2:不支持A标签下载。原创 2024-03-01 17:22:45 · 4486 阅读 · 0 评论 -
阿里云OSS上传视频,可分片上传
uniappH5实现阿里云OSS分片上传视频原创 2024-01-11 18:46:43 · 2300 阅读 · 0 评论 -
网页和小程序实现放大预览富文本中的图片
实现用户点击富文本中的某个图片,进行放大预览、保存富文本内容中的某个图片原创 2023-12-29 16:47:07 · 2159 阅读 · 2 评论 -
uniapp怎么跳转页面
uniapp跳转页面实现原创 2023-12-19 11:29:47 · 1769 阅读 · 0 评论 -
高度自定义进度条实现完整代码附示意图
实现功能:自定义一个进度条,能手动拖动进度条,也可以点击相应的进度,根据当前进度条的进度显示相应的内容。原创 2023-11-29 17:22:10 · 1673 阅读 · 0 评论 -
uniapp动态获取列表中每个下标的高度赋值给另一个数组(完整代码附效果图)
uniapp动态获取列表中每个下标的高度赋值给另一个数组(完整代码附效果图)原创 2023-07-19 19:16:59 · 2911 阅读 · 0 评论 -
微信H5网页自动播放背景音乐
微信网页自动播放音乐实现原创 2023-06-13 15:34:12 · 3195 阅读 · 0 评论 -
uniapp video组件禁止进度条拖动实现完整代码
2.视频播放完成后触发奖励。1.禁止拖动进度条快进。原创 2023-05-17 18:57:32 · 4926 阅读 · 4 评论 -
uni-app,uni-table表格操作
使用uni-ui UI框架实现表格加分页功能,uni-table 和uni-pagination 组件的使用示例加完整代码。原创 2023-04-17 15:46:35 · 10544 阅读 · 1 评论 -
微信分享debug为true,但自定义分享失败的解决
微信JSSDK自定义分享失效,在开发者工具成功的解决办法原创 2022-08-31 11:46:28 · 2637 阅读 · 0 评论 -
样式集(14)填写信息弹窗
居中弹窗显示,填写信息通用弹窗样式原创 2022-08-29 14:31:27 · 1960 阅读 · 0 评论 -
canvas绘制海报分享,海报中设置圆角二维码
canvas绘制海报分享,海报中设置圆角二维码,背景图,动态的文字,绘制完成以后保存为图片,可长按分享海报图片。原创 2022-08-25 16:09:55 · 2217 阅读 · 0 评论 -
uniapp H5上拉加载更多实现完整代码(搜索页面样式篇)
本文的实现代码是搜索页面,实现了搜索功能,搜索历史,清空搜索历史,搜索出来的列表数据分页等功能,包含完整样式原创 2022-08-22 16:53:40 · 2673 阅读 · 0 评论 -
样式集(13)自定义picker滚动选择器样式
自定义picker滚动选择器样式,样式可以随意修改,运行环境支持H5,小程序,APP原创 2022-08-08 14:59:40 · 2449 阅读 · 0 评论 -
云朵左右移动循环动画实现(H5和小程序通用)
云朵在页面左右循环移动动画实现示例图加完整源码,可自己设置云朵飘动的速度和距离。原创 2022-07-08 11:24:46 · 2613 阅读 · 0 评论 -
微信公众号订阅消息 wx-open-subscribe 的实现及闭坑指南
微信订阅消息的避坑指南和解决方案,以及实现示例代码原创 2022-06-27 15:59:27 · 7095 阅读 · 3 评论 -
uniapp滚动条置顶实现
uniapp置顶滚动条。自定义页面滚动条的位置原创 2022-06-08 15:52:44 · 2690 阅读 · 1 评论 -
uniapp图片放大缩小预览,并支持图片拖动附效果图
uniapp或者小程序实现图片预览放大缩小并可以拖动原创 2022-06-07 15:13:15 · 12068 阅读 · 5 评论 -
wx-open-launch-weapp 样式问题
wx-open-launch-weapp 样式设置调试非常麻烦,所以建议用绝对布局占满需要点击的区域;具体实现代码:提供几个类型的示例示例代码1:列表<view class="list"> <view class="" v-if="historyList.length>0" v-for="(item,idx) in historyList"> <view class="listItem" style="position: rel原创 2022-04-20 11:48:18 · 3447 阅读 · 0 评论 -
把view或者div绘制 canvas ,导出图片功能实现完整源码附效果图(兼容H5和小程序)
先看下效果图:(上面灰色块内的用div和CSS写出来的,然后绘制到canvas)实现此功能需要使用到一个微信小程序的插件,插件官方文档地址:wxml-to-canvas | 微信开放文档本博客代码环境,uniapp(vue)实现流程:1.创建uniapp项目,命名为 (htmlToCarvasDemo)2.Alt + C 打开终端,运行npm i x-wxml-to-canvas,安装插件npm ix-wxml-to-canvas3.在index目录添加,d..原创 2022-01-07 16:56:30 · 4222 阅读 · 0 评论 -
样式集(11)注册页面样式,全部代码附效果图
效果图:代码:<template> <view class="page"> <view class="top"> 新用户注册 </view> <image :src="sanjiao" mode="widthFix" class="sanjiao"></image> <!-- <image style="width: 100vw;" :src="bolang" mode="widthFi原创 2021-11-24 16:41:39 · 2098 阅读 · 0 评论 -
折线图表动画(历史进程效果)
代码环境:uniapp秋云uCharts图表组件https://demo.ucharts.cn/#/代码说明:在插件市场导入插件秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场 uCharts v2.3上线,支持nvue!全新官方图表组件,支持H5及APP用ECharts渲染图表,uniapp可视化首选组件https://ext.dcloud.net.cn/plugin?id=271使用插件uCharts动态可视化配置图表,然后拿到配置的代码放在自己项...原创 2021-11-15 18:43:18 · 2204 阅读 · 0 评论 -
uniapp富文本兼容视频实现方案
使用mp-html 富文本插件,就可以支持富文本内的视频播放。安装:npm install mp-html使用方法<template> <view> <mp-html :content="html" /> </view></template><script> import mpHtml from '@/components/mp-html/mp-html' export default.原创 2021-10-14 10:50:24 · 4196 阅读 · 0 评论 -
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理:(这里以预览PDF文件为示例,在线预览就是查看网络文件)1. IOS客户端预览PDF文件IOS客户端预览PDF文件可以通过跳转文件地址实现预览,因为苹果手机的浏览器自带阅读器2. 安卓客户端预览PDF文件安卓客户端需要在源码添加一个插件来实现文件在线预览。添加插件步骤,下载插件,放导static目录下。如图所示:下面是实现示例代码:<view class="card p_r" @click="openF.原创 2021-10-13 15:25:47 · 5491 阅读 · 1 评论 -
小程序保存网络图片
小程序保存网络实现流程:1.把图片下载到本地2.检查用户的授权状态(三种状态:未授权,已授权,未同意授权),判断是否授权保存图片的能力,如果是用户点击了不同意授权给小程序保存图片的能力,需要打开微信的设置页面,让用户点击打开授权,如果未授权或者已授权,就直接调用保存图片的接口就好了实现代码:wx.downloadFile({ url: this.img, success: function(res) { console.log(res);原创 2021-08-25 18:02:05 · 2398 阅读 · 0 评论 -
移动端自动播放音视频实现代码
视频组件<video :custom-cache="false" :src="item.voideoUrl" :id="'audio'+ index" :vslide-gesture-in-fullscreen="false" :direction='0' :enable-progress-gesture="false" :show-fullscreen-btn="false" loop object-fit="inherit"></video>使用wx的jssdk,原创 2021-08-12 10:49:13 · 2994 阅读 · 0 评论 -
touchEnd 不执行解决办法
场景:vue环境,在组件监听touchEnd 用户触摸滑动结束事件,在安卓端手机用户滑动结束后没有执行touchEnd 的事件解决办法:在 滑动过程中的事件 touchMove 中,延迟.05秒判断当前距离顶部的距离是否跟当前距离顶部的距离相同,然后把touchMove 中携带的参数传递给 touchEnd ,主动调用。看代码: <view :id="'myVideo'+index" @touchstart="touchStart" @touchmove="touchMov...原创 2021-08-12 10:17:46 · 3465 阅读 · 0 评论 -
H5网页去除苹果手机底部白边
先看去除前后的效果对比在网页的head里面放以下代码 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />原创 2021-08-03 14:56:36 · 3032 阅读 · 1 评论 -
uni-app h5页面左上角出现“取消“字眼解决办法
你知道VUE深入响应式原理吗?底层追踪数据变化渲染页面的原理是什么?VUE1 和 VUE2 的实现原理:每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter触发时,会通知watcher,从而使它关联的组件重新渲染。VUE3 的实现原理:...原创 2021-07-14 10:15:16 · 2968 阅读 · 2 评论 -
样式集(10) - 滑动删除功能实现,VUE完整源码附效果图
先看效果图实现方式:使用scroll-view 标签,进行横向滑动,达到左滑出现删除按钮,注:如果不是使用uni-app或者小程序框架,没有 scroll-view 组件的话可以通过CSS实现哦下面看uni-app的实现代码:<template> <view class="page"> <view class="centent"> <view class="tabs p_r"> <view class="t.原创 2021-06-22 18:27:53 · 1874 阅读 · 0 评论 -
样式集(9) - 切换Tab菜单
先上效果图下面是以vue实现的示例代码:代码解析:很简单的代码,直接复制粘贴使用吧~ 别忘记一键三连哦,点赞,收藏,关注,谢谢~后续持续更新更多干货哦!!<template> <view class="page"> <view class="centent"> <view class="tabs p_r"> <view class="tabItem" @click="tabIdx=index" :class.原创 2021-06-22 17:20:17 · 1731 阅读 · 0 评论 -
uniapp设置模板路径页面样式混乱解决办法
乱了就在html里面加上下面这行代码试试<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />原创 2021-06-11 16:40:44 · 4962 阅读 · 8 评论 -
uniapph5配置index.html模板路径不生效解决办法
很简单,关闭应用再重新启动试试,还不行的话,重启IDE原创 2021-06-11 16:25:55 · 4008 阅读 · 2 评论 -
开发公众号H5本地调试重定向登录流程
nginx反向代理服务:浏览器输入网址并回车后,会发起一个http请求给nginx(反向代理服务器),这个请求如果是访问静态文件,那么nginx作为web服务器直接返回请求的内容,如果是访问的后台服务逻辑,那么nginx把请求转发给后端的服务处理。...原创 2021-06-07 12:30:22 · 3869 阅读 · 2 评论 -
自定义 showToast 组件,可直接使用,附源代码和使用说明
在我们使用 uniapp开发或者各种小程序开发时,经常会使用到showToast 组件,但是它有很多限制,比如细节的样式和个性化需求无法满足,为了方便在 showToast 的基础上能做些个性化的需求,我自己封装了一个showToast 组件,下面看代码吧~以 uniapp 为例:在项目的components 目录,创建一个vue 文件(myShowToast.vue),代码:<template> <view> <view v-if="show" c...原创 2021-06-01 18:09:13 · 3721 阅读 · 2 评论 -
IOS直播不能播放的问题解决,H5直播
uniapp直播拉流播放封装组件<template> <view> <video :src="live_src" type='application/x-mpegURL' id="my-video" class="video-js" controls preload="auto" poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9a原创 2021-05-27 15:55:21 · 2736 阅读 · 0 评论 -
在vue中使用vuex,修改state的值示例
1、 安装 vuexnpm install vuex -S2、在目录下创建store文件3、 在store.js编辑一个修改state的方法然后在mian.js中全局引入最后在组件中使用这个的功能是运用mutations 修改state中的值原创 2021-05-25 12:05:19 · 5404 阅读 · 0 评论