![](https://img-blog.csdnimg.cn/c76655f057814eb489276cd20c82f82e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
uni-app
uni-app
菜鸟驿站2020
菜鸟驿站
展开
-
uniapp 使用canvas制作柱状图
4、绘制柱子时,先绘制顶部百分比、value值,再绘制柱子,再绘制底部标题;5、文字需要居中,可绘制前丈量文字宽度再确定起始坐标。2、通过组件宽度、高度计算出每根柱子的宽度及高度;1、通过展示数据计算需要画几根柱子;3、for循环依次绘制每根柱子;原创 2024-01-16 16:37:56 · 1156 阅读 · 0 评论 -
uniapp + node.js 开发问卷调查小程序
uniapp+node.js 开发问卷调查小程序原创 2024-01-15 15:59:39 · 1340 阅读 · 0 评论 -
uni-table 固定表头与数据导出为xlsx
uni-table表格官方插件不支持表头固定,在原插件的基础上修改样式以达到固定表头目的,要点是在表头、表体外层分别加上。针对这两部分写样式。原创 2024-01-04 14:13:15 · 967 阅读 · 0 评论 -
uni-admin 利用云数据表自动生成页面
uni-admin 框架,是基于 uni-app 和 uniCloud 的应用后台管理的开源框架。详细说明请看官方文档:uni-admin 框架(原名 uniCloud admin) | uni-app官网本文主要介绍的是,在云数据库已经创建好并且有数据记录的前提下,通过schema2code代码快速生成页面。代码生成系统功能包括:具体使用方法请查阅官方文档:schema2code代码生成系统 | uni-app官网uniCloud官网 - web控制台 根据图一的字段编辑相关属性。字段属性说明:DB Sc原创 2022-11-03 11:57:17 · 1150 阅读 · 2 评论 -
uniapp+node.js 开发小程序上传图片到阿里云OSS
经过测试在小程序端,H5端都能正常运行。原创 2022-10-24 12:20:37 · 1385 阅读 · 0 评论 -
uniapp 开发小程序上传图片、视频到阿里云OSS
把 aliyun.js , base64.js , crypto.js , hmac.js , sha1.js 这五个文件放在同一个目录下。如下图修改 aliyun.js 相关参数,其它四个文件不用改动。原创 2022-10-14 14:49:12 · 2910 阅读 · 5 评论 -
uniapp 开发 H5 实现人脸融合
前端 uniapp 开发 H5 页面,打开相册或者相机拍摄上传人脸图片,等待后端接口返回处理好的图片和视频并显示到页面。后端 node.js 搭建图片服务器,用于接收并保存用户上传的图片,并把图片链接返回给前端提交到相应的接口。原创 2022-09-27 12:31:48 · 1044 阅读 · 0 评论 -
uniapp 防抖和节流的使用
在规定时间内仅能触发一次,但到了下一个时间段,也还会继续触发一次事件。:在一个时间段内触发几次事件,就延迟触发几次,并只触发最后一次事件。(一直快速触发几分钟后停止,只会执行最后的那一次事件)(一直快速触发几分钟后停止,会执行多次事件)转载 2022-09-15 14:36:22 · 1655 阅读 · 0 评论 -
uniapp 开发小程序虚拟长列表万条数据不卡顿
虚拟列表 只对可见区域进行渲染,对非可见区域中的数据不渲染或部分渲染,以实现减少消耗,提高用户体验的技术。它是长列表的一种优化方案,性能良好。当数据体量极大时,使用虚拟列表,可以极大减少节点的渲染,体验丝滑。原创 2022-08-24 14:48:28 · 8415 阅读 · 12 评论 -
uniapp 动画的实现
创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。原创 2022-07-07 11:09:47 · 4369 阅读 · 0 评论 -
uniapp 生成二维码
效果图:页面代码:<template> <view class='pages'> <view class='father_view'> <view class='son_view'> <view class="title-bg">需要转换的文本:</view> <textarea class="textarea-bg" v-model="text1" @blur="inputTex原创 2022-04-27 11:32:13 · 18151 阅读 · 14 评论 -
uni-app swiper数量过多时卡顿优化方案
当源数组长度是12的时候,效果图如下:当源数组长度是11的时候,需要追加1张空白页,效果图如下:当源数组长度是13的时候,需要追加2张空白页,效果图如下:源码下载地址:链接:https://pan.baidu.com/s/1AVB71AjEX06wpc4wbcV_tQ?pwd=l9zp提取码:l9zp。...转载 2022-02-16 16:48:47 · 9209 阅读 · 21 评论 -
uniapp 开发全屏切换视频(仿抖音)
方案一 此方案能解决swiper数量过多时黑屏的问题<template> <view> <!--swiper实现整屏划动播放视频--> <swiper vertical duration="200" @change="changed" :style="{height: screenHeight-navBarHeight +'px'}"> <block v-for="(item,index) in ...原创 2022-02-16 16:33:59 · 3247 阅读 · 6 评论 -
uniapp 开发小程序一个页面多个倒计时
效果图封装方法// times.jsexport function countDownFun(time) { //当前时间戳 let timestamp = new Date().getTime() let times = time - timestamp let playTime, day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (times > 0) { second = Math.floor(ti转载 2022-01-20 17:07:59 · 1047 阅读 · 1 评论 -
uniapp 开发小程序购物车
效果:增加数量不做限制,减少数量到0的时候从购物车中删除商品。购物车数组结构:html<!-- 底部购物车 --><view class="car"> <view class="car-left"> <view class="car-pice">¥{{totalPrice}}</view> </view> <view class="car-right"> <view class="car-te原创 2021-12-09 14:04:39 · 3095 阅读 · 2 评论 -
uniapp 计算自定义导航栏高度
一,自定义导航栏的重点是高度的判断从下图分析出来:导航栏高度 = (胶囊顶部距离 - 状态栏高度) x 2 + 胶囊的高度data() { return { system:[], menu:[], statusBarHeight: 0, //状态栏的高度 navigatorHeight: 0, //导航栏高度 menuHeight: 0, //胶囊高度 menuTop: 0, //胶囊与顶部的距离 totalHeight: 0, //总高原创 2021-11-26 16:42:45 · 5899 阅读 · 0 评论 -
uniapp 开发小程序展开更多与收缩的动画效果
效果图:html<view> <view >公告</view> <view @click="showMore"> {{isShow ? '收起∧':'查看更多∨'}} </view></view><!-- 更多弹框 --> <view > <view class="show-more" :class="[isShow ? 'show-more-click' : '']">原创 2021-11-26 12:00:14 · 5621 阅读 · 4 评论 -
uniCloud admin 动态菜单的配置
uniCloud admin 框架的使用详见官方文档:https://uniapp.dcloud.io/uniCloud/admin按教程建立项目,登录管理页面后发现只有静态功能演示菜单,而没有动态菜单。手动配置动态菜单的办法打开项目根目录下的 admin.config.js 文件,在sideBar节点添加以下代码{ menu_id: "sys", text: '系统管理', icon: 'uni-icons-gear-filled', url: "", children: [{原创 2021-11-15 11:08:37 · 1323 阅读 · 0 评论 -
uni-app 实现微信小程序云开发
const path = require('path')const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = { configureWebpack: { plugins: [ new CopyWebpackPlugin([ { from: path.join(__dirname,...转载 2021-11-02 11:20:17 · 1620 阅读 · 2 评论 -
uniapp 开发小程序背景音乐播放
1. 先在App.vue声明全局变量2. 在页面调用全局变量<script> var app = getApp() export default { data() { return { musicState: true } }, onLoad() { // 音频配置 app.globalData.innerAudioContext.autoplay = true app.globalData.innerAudioC原创 2021-10-28 15:14:48 · 1118 阅读 · 0 评论 -
uniapp 开发小程序背景音乐动画
uniapp 开发小程序背景音乐动画。原创 2021-10-27 22:16:18 · 2347 阅读 · 1 评论 -
nodejs + uniapp 开发UDP广播控制视频播放
1.效果图手机控制端电脑受控端2. nodejs 代码此处安装 robotjs 库会碰问题解决方法:运行 npm install --global --production windows-build-tools进入以下目录手动安装 python2.7 ,然后配置环境变量,重启电脑,再次运行 npm install robotjs --saveC:\Users\Administrator.windows-build-tools\python27var exec = requi原创 2021-10-11 17:22:59 · 1935 阅读 · 1 评论 -
H5 移动端文件下载的方法
a 标签下载// a标签下载文件,可跨域下载 function aDownlad(url, fileName) { const link = document.createElement('a') link.href = url link.target = '_blank' link.download = fileName link.style.display = 'none' document.bod原创 2021-09-17 15:38:37 · 7078 阅读 · 0 评论 -
uniapp 运行H5到外部浏览器产生跨域报错的处理
uniapp 开发的H5运行到外部浏览器出现如下报错,由于调用的接口是第三方平台提供,要修改后端代码是不可能的了,只能从前端下手解决。1. 代理参数设置在项目的manifest.json文件,H5模块添加代理参数。 "h5" : { "router" : { "mode" : "hash" // 路由模式 }, "devServer" : { "https" : false, // 是否启用 https 协议,默认false "port": 8080, // 本地端口原创 2021-09-09 11:09:42 · 4330 阅读 · 0 评论 -
uniapp 打开第三方APP
需要知道第三方app的scheme,使用apktool 反编译 apk 得到AndroidManifest.xml 文件,再查找 scheme ,详见文章最后。需要用到第三方app的包名package ,使用apktool 反编译 apk 得到AndroidManifest.xml 文件,再查找 package 。3. 反编译 apk需要使用 apktool 工具反编译 .apk 得到 AndroidManifest.xml 文件apktool下载 : https://connortumbleson.原创 2021-08-16 16:29:26 · 6427 阅读 · 0 评论 -
uniapp 开发视频屏保
需求:一台大屏幕安卓主机用于前台服务,在启动APP的时候播放视频,触摸屏幕的时候才进入主页面,在主页面闲置两分钟后自动进入屏保视频。难点:处理video组件层高问题,在视频上层加一透明页面接收触摸事件。1.使用subNvue处理层高的方法在pages.json文件配置视频页面引用vue { "path" : "pages/mp4/mp4", "style" :原创 2021-08-16 15:27:35 · 870 阅读 · 0 评论 -
uniapp开发的APP唤起微信打开小程序
uni-app开发的APP跳转到微信小程序需要调用H5+的原生界面控件。用到了分享功能,在打包原生应用时,需要注意:首先勾选权限配置,manifest.json->App 模块权限配置->Share。然后,manifest.json->App SDK 配置->分享,按照提示填写微信分享的信息(微信开放平台,不是微信公众平台)。因为涉及到第三方 SDK 的配置,需要运行到手机进行测试。代码<template> <view class="c转载 2021-08-05 15:51:13 · 6645 阅读 · 2 评论 -
uniapp 小程序轮播图左右两边显示一部分图片
<!-- 轮播图 --><swiper class="banner-container" indicator-dots="true" autoplay="true" circular="true" interval="3000" duration="1000" previous-margin="20rpx" next-margin="20rpx"> <block v-for="(item,index) in swiperData" :key="index">.原创 2021-05-11 23:12:46 · 3157 阅读 · 0 评论 -
uniapp 开发H5视频下载
调用download.js下载在页面目录下新建download.js文件,使用的时候引入。download.js(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define([], factory); } else if (typeof exports === 'object') {原创 2021-04-25 17:37:36 · 2093 阅读 · 1 评论 -
uniapp 开发小程序垃圾分类识别
1.开通京东万象垃圾分类识别API每天有2000次免费调用接口。https://wx.jdcloud.com/market/datas/30/139472.调用接口说明3.完整代码<template> <view> <view class="content"> <!-- 选择图片区域 --> <view class="images_box"> <image class='img' :src='imgTe原创 2021-03-30 17:06:04 · 936 阅读 · 0 评论 -
uniapp 云开发APP手机号码一键登录
univerify 是DCloud 推出的一键登录产品,通过与运营商深度合作,实现APP用户无需输入帐号密码,即可使用本机手机号码自动登录的能力。univerify是替代短信验证登录的下一代登录验证方式,能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。详细请参考官方文档:https://uniapp.dcloud.io/uniCloud/univerify1.开通uniCloud服务申请开通服务地址https://unicloud.dcloud.net.cn/login2.开通uni一原创 2021-03-24 17:00:26 · 2487 阅读 · 0 评论 -
uniapp 开发微信小程序图像识别
效果图:1.开通百度AI图像识别https://login.bce.baidu.com/?redirect=https%3A%2F%2Fconsole.bce.baidu.com%2F%3Ffromai%3D1#/aip/overview2.代码解释3.完整代码<template> <view> <view class="radio-list"> <view style="color: #DD524D;"> 请选择类别:<原创 2021-03-04 23:43:28 · 2362 阅读 · 2 评论 -
uniapp 云开发微信小程序分页加载数据
uniapp 云开发微信小程序分页加载数据原创 2021-02-20 13:42:02 · 775 阅读 · 2 评论 -
uniapp 云开发小程序评论与回复功能的简单设计
1.前端视图与云端数据的关系字段commentList是数组类型,评论内容与昵称为对象类型。2.实现添加评论的代码 addComment() { wx.cloud.database() .collection('videoComment') //集合名称 .add({ data:{ avatar:avatarUrl, nickName:nickName, commentList:[ { commen原创 2021-02-01 10:59:34 · 3715 阅读 · 2 评论 -
uniapp 变量的种类与使用
一、uniapp 变量的种类变量按作用范围分为全局变量,页面级变量,函数级变量。全局变量作用于整个程序的各个页面,页面级变量只作用于一个页面,函数级变量只能在函数内部使用。二、uniapp 变量的使用1. 全局变量的声明与使用1-1、本地存储方式1-2、globalData方式2. 页面级变量声明与使用2-1、先声明变量2-2、使用变量2-3、视图层变量,用在WXML 中的动态数据3. 函数级变量声明与使用部分参考这篇文章 https://blog.csdn.net原创 2021-01-30 12:22:15 · 6034 阅读 · 0 评论 -
uniapp 阿里云开发微信小程序一键登录
1.插件市场导入uni-id公用模块插件市场 uni-id : https://ext.dcloud.net.cn/plugin?id=2116导入成功后在dcloud控制台可以看到相应的公共模块在项目云文件夹下自动生成common目录与uni-id公共模块修改config.json文件并上传公共模块,这里是重点。详细说明见官方文档:链接2.云函数配置新建云函数,并上传部署最后要管理公共模块依赖,这里也是重点。(如果没有关联公共模块,运行小程序时会报错:Cannot find原创 2021-01-25 11:58:26 · 3259 阅读 · 5 评论 -
uniapp 开发小程序顶部选项卡与加载对应页面数据
云开发的壁纸分享小程序。原创 2021-01-23 14:50:48 · 2125 阅读 · 3 评论 -
uniapp 小程序云开发OCR接口调用
1.申请接口权限https://developers.weixin.qq.com/community/servicemarket/detail/000ce4cec24ca026d37900ed5514152.OCR接口官方文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/ocr/ocr.printedText.html#method-http3.本实例的云函数4.前端代码:<template原创 2021-01-19 15:14:41 · 1646 阅读 · 0 评论 -
uniapp 小程序云开发调用百度OCR
1.百度云开发注册与配置https://console.bce.baidu.com/ai/?_=1610696616923#/ai/ocr/app/create首先需要注册百度账号,并登录百度云,进入管理控制台,创建文字识别应用,如下图创建完应用后,打开应用管理可见APP_ID、API_KEY、SECRET_KEY,需要用在小程序端调用文字识别接口。2.下载文字识别api首先在电脑安装nodejs,然后打开cmd进入项目的根目录 ,输入命令:npm install baidu-aip-sdk,原创 2021-01-15 16:42:46 · 1414 阅读 · 0 评论 -
uniapp 小程序云开发video列表播放与动态加载更多数据
效果图:代码:<template> <view> <view class="videoBox"> <block v-for="(item,index) in videoList" :key="index"> <view class="videoItem"> <view> 视频:{{index + 1}} </view> <block v-if= "item原创 2021-01-15 11:02:16 · 2429 阅读 · 0 评论