uni-app
青衫折扇
互联网发展迅速,使我们的脚步更快,生活更好,环境变差,使人变得懒惰,有压力才会 让自己变得更强...
展开
-
js 单数组重组多维数组每3条为一组(几条为一组可自定义)
来实现将每三条数据重组为一个数组的功能。可以使用 JavaScript 中的数组方法。有什么问题可加入qq群交流:712627337。原创 2023-03-30 12:22:00 · 1018 阅读 · 0 评论 -
纯css加载动画效果
想要源码或有问题可扫下方二维码下载或联系客服。原创 2023-01-04 11:09:32 · 597 阅读 · 0 评论 -
【唯选壁纸】UNIAPP云开发的壁纸类运营小程序、多端适配、创作者系统可运营
目前已适配以下客户端,更多客户端后续将陆续上线。目前已集成以下功能,可运营,可推广。,无需域名与服务器即可搭建!原创 2022-11-27 20:21:13 · 368 阅读 · 0 评论 -
JS 根据数组对象中某个字段的值,重组新的数组对象
希望重组得到下面这个数据结构。现在要处理的数组对象。原创 2022-10-12 10:20:12 · 1858 阅读 · 0 评论 -
uni-app修改底部安全区域颜色(详细步骤及问题)
我的需求是页面背景为黑色,底部tabBar也是黑色,但安全区域为白色,这很是不雅观,让我苦思冥想,百度都被我搜烂了,但是安全区域背景是解决了,但是tabBar切换的时候会出现页面不切换的问题,这又掉坑里了,原因就是初始化的时候,因为我启动页用的是nvue原生渲染,本以为是它的问题,结果不是,最后找到了解决办法,先来看看效果。以上就是这次问题分享,刚开始很是苦恼,不过好的是最终解决了,避免大家入坑,在此分享,有什么不足请见谅或有什么疑问下方小程序联系我。以上是本次分享的效果。......原创 2022-07-30 16:16:38 · 4380 阅读 · 12 评论 -
uni-app 获取上个页面方法报错(Property or method “toJSON“ is not defined on the instance but referenced durin)
在报错页面methods方法里加入。以上有所不理解可以小程序联系我。原创 2022-07-20 09:56:20 · 914 阅读 · 1 评论 -
js 数组指定对象移动到第一位(两种方法)
js 数组指定对象移动到第一位(两种方法)原创 2022-07-05 13:58:33 · 6250 阅读 · 0 评论 -
uni-app处理数组根据时间重组
数组根据时间重组原创 2022-06-02 14:31:24 · 503 阅读 · 1 评论 -
uni-app h5唤起App(配置及流程-超详细)
先看代码最后看配置<template> <view class="content"> <button type="primary" @tap="tapOpen">打开APP</button> </view></template><script> export default { methods: { tapOpen() { let u = navigator.userAgent;原创 2022-05-13 17:06:12 · 5064 阅读 · 8 评论 -
uni-app 删除对象中某一个属性
// data 是数组名 id 是属性let data = {id: 0, name: '测试'};that.$delete(data,"id")console.log(data)如果对你有用,请关注一下小程序支持一下原创 2022-04-25 16:09:41 · 2184 阅读 · 0 评论 -
uni-app封装自定义支付密码键盘组件及使用方法(附效果图)
先看一下效果吧可以扫码下方小程序自行下载源码原创 2022-04-22 14:20:01 · 1293 阅读 · 3 评论 -
uni-app背景gif图(通过css消除背景色)
直接上代码.bg-ware { position: absolute; left: 0; bottom: -2rpx; width: 100%; mix-blend-mode: screen; height: 120rpx;}如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序...原创 2022-04-18 14:19:18 · 1247 阅读 · 0 评论 -
uni-app progress进度条解决(标签设置圆角不生效,不支持渐变)
先直接看效果直接上代码.uni-progress-bar { // 这主要是加上deep才能改变它原来的样式 border-radius: 10px !important; overflow: hidden; } .uni-progress-inner-bar { // 这主要是加上deep才能改变它原来的样式 border-radius: 10px !important; overflow: hidden; background:l原创 2022-04-15 14:20:27 · 3920 阅读 · 0 评论 -
uni-app 处理数组(将一维数组转二维数组)
这里我们先看结果一维数组处理结果以下是处理代码let newArr = []; for (var i = 0; i < this.imgList.length; i += 2) { newArr.push(this.imgList.slice(i, i + 2)) } console.log(newArr)如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序...原创 2022-04-15 12:21:09 · 1444 阅读 · 0 评论 -
uni-app实现翻转动画(附源码)
这里不做过多解释直接复制就可以使用// 翻转动画turnAnimation() { var animation = uni.createAnimation({ duration: 1000, timingFunction: 'ease', //linear 全程匀速运动 ease 动画以低速开始,然后加快,在结束前变慢 }) this.animation = animation animation.rotateY(360).step() this.animationData =原创 2022-04-02 14:49:38 · 2085 阅读 · 2 评论 -
uni-app单商家点餐系统(已完结-附带源码)
这里我们将开始单商家点餐系统,我们从用户端开始出发为了提高用户使用效果,我将完善用户对操作方面的一些动画及流程上的优化这里先看一下本次更新页面后面我会将本次项目导图做出来,以便对整体项目的了解如果有想参与本次项目的朋友可以关注下方小程序-个人中心-客服联系我,或者有想要源码的朋友也可以通过下方小程序联系我......原创 2022-03-28 10:19:38 · 4240 阅读 · 10 评论 -
uni-app项目基础配置(在项目中经常做的一些公共封装方法)
这里我们就以uni-app举例,简单介绍一下在项目中需要的一些配置1、封装公共网络请求2、封装路由表对象(我们将项目中所有路由封装起来,方便统一管理)3、封装图片静态资源表5、封装相同数据统一管理,避免每个页面都需要定义6、使用store存储8、通用格式处理9、封装常用方法统一管理以上是我们本次项目总结,封装及调用方法这里我简单举几个例子校验手机格式function checkMobile(mobile) { return RegExp( /^((原创 2022-03-18 16:46:54 · 1349 阅读 · 0 评论 -
uni-app封装时间戳转日期(超详细)
创建一个js文件,这里我已utils命名:utils.js直接先看代码/** * @param {Object} n:数据转化 */function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n}/** * 时间戳转化为年 月 日 时 分 秒 * number: 传入时间戳 * format:返回格式,支持自定义,但参数必须与formateArr里保持一致 */function formatTi原创 2022-03-15 16:16:29 · 1896 阅读 · 0 评论 -
uni-app实现上传图片裁剪效果(附源码)
我们先来看一下效果封装一个组件在components下创建一个 文件夹随意命名,这里我是uni-img-cropperuni-img-cropper.vue<template> <view class="container" v-show="isShow"> <view> <view class="cropper-content"> <view v-if="isShowImg" class="uni-corpper"原创 2022-03-10 11:20:15 · 7363 阅读 · 21 评论 -
uni-app示例(前端上传图片及视频到七牛云)
这里我是以uni-app为例封装一个公共的上传七牛云方法,复制可直接使用最后有调用方法先直接看代码吧,有什么问题,下方留言讨论我们先在项目根目录创建一个common文件夹,接在在common下创建一个qiniuyunUploader.js可随意命名,这只是我的例子不是很规范qiniuyunUploader.js(function () { // 请参考demo的index.js中的initQiniu()方法,若在使用处对options进行了赋值,则此处config不需要赋默认值原创 2022-01-26 16:49:35 · 2750 阅读 · 0 评论 -
uni-app 富文本图片处理(有些带域名,有些不带域名)
这里直接上代码了res.data.GoodsDetails.goods_detail = res.data.GoodsDetails.goods_detail.replace(/<img[^>]*>/ig, function(match, capture) { // match 图片路径 let isExist = match.includes('https://'); // 是否包含https:// if(!原创 2022-05-18 12:30:03 · 643 阅读 · 0 评论 -
uni-app 数组获取根据条件获取第一个元素(find)
直接上代码let obj = this.list.find(data => { if(data.id === this.isIndex) { return data } }) console.log(obj)原创 2021-12-17 16:03:10 · 3154 阅读 · 0 评论 -
uni-app 实现左滑删除两种数据结构(超详细附源码)
我们先来看第一种简单的二维数组来张效果图实现代码<template> <view class="content unify-margin"> <view v-if="list.length !== 0"> <!-- 间隔 --> <uni-interval height="8px"></uni-interval> <view class="item unify-relative u.原创 2021-12-15 16:14:46 · 1638 阅读 · 0 评论 -
uni-app 使用scroll-view实现左右滑动会出现上下错乱解决办法
<!-- 左右滑动列表 --> <scroll-view scroll-x="true" class="scroll-view" show-scrollbar="false"> <view class="item" v-for="(item,index) in list" :key="index"> <image class="item-image unify-radius" :src="item.main_pic || errorImage" .原创 2021-12-09 09:18:37 · 1991 阅读 · 0 评论 -
uni-app 生成app证书及查看安全码
首先我们先安装JRE环境下载链接:https://www.oracle.com/technetwork/java/javase/downloads/index.html我这里安装的是windows下的下载之后可以下一步安装,我这里更改安装路径未D盘安装完之后将安装路径配置到环境变量我的电脑-属性-高级系统设置- 环境变量-选择Path-编辑-新建-复制进去保存就行了下面我们打开命令行输入keytool这就安装好了下面我们开始生成证书使用keytool -g.原创 2021-12-08 11:24:20 · 2738 阅读 · 0 评论 -
前端防止快速连续点击,节流函数
// 防止快速连续点击,节流函数function throttle(fun, delay) { let oadDate = Date.now(); return function() { let _this = this; let args = arguments; let newDate = Date.now(); if(newDate-oadDate > delay) { fun.apply(_this, args); oadDa.原创 2021-12-07 19:42:36 · 848 阅读 · 0 评论 -
uni-app 接收网址参数
onLoad(options) { let params = this.getRequestParams(); let mobile = params['mobile']; // 参数名 console.log(mobile ) }, methods: { // 获取utl参数 getRequestParams() { let url = location.href; let requestParams = {}; if (url.indexO.原创 2021-11-23 13:48:56 · 1849 阅读 · 0 评论 -
uni-app 实现轮播图(完整版)
先来张效果图吧代码不多,也不难,这里直接上代码了,复制就可以用<template> <view class="content"> <!-- 轮播图 --> <swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular autoplay @change="swiperChange"> <swiper-item :cla.原创 2021-10-28 10:20:37 · 18350 阅读 · 13 评论 -
uni-app 关键字高亮
这里直接上代码了,备注都在代码里<template> <rich-text :nodes="html"></rich-text></template><script> export default { props: { content: { // 需要高亮的内容 type: String, default: '' }, keys: { // 高亮的关键字,多个用 | 隔开 type: S原创 2021-10-23 12:12:05 · 2296 阅读 · 6 评论 -
uni-app开发微信小程序实现自定义swiper指示灯
wxml <!-- 焦点图 --> <div class="swiper-wrap"> <swiper class="swiper-inner" @change="swiperChange" :indicator-dots="indicator" :current="cur" :circular="circular" :autoplay="autoplay" :interval= "interval" :duration= "原创 2020-05-19 16:52:13 · 1325 阅读 · 0 评论 -
一行显示4个,超出自动换行(解决办法)
先看一下问题吧data() { return { myHealthAdminMenu: { name: '健康管理', list: [{ name: '基础信息', image: $mAssetsPath.iconHealth1, isAstrict: false }, { name: '健康档案', image: $mAssetsPath.iconHealth2, isAstrict: false }, { .原创 2021-09-18 16:05:13 · 4786 阅读 · 0 评论 -
uni-app scroll-view 点击实现元素居中?
前言在 uni-app 开发中scroll-view组件用到几率也是比较大滴,存在问题主要是:点击子元素,子元素在什么位置展示?今天我们来好好总结一下 0.0~Part.1 可能出现的需求效果一:当前点击子元素靠左展示效果二:当前点击子元素靠左留一展示效果三:当前点击子元素居中展示应该常见的用户体验效果就这三种了,我们看看怎么实现?go~Part.2 我的思路在 uni-app 的官方(uni-app官网) API中对scroll-vi...原创 2021-09-17 17:06:11 · 3441 阅读 · 4 评论 -
uni-app前端解密微信小程序手机号加密数据
在官方下载地址:https://res.wx.qq.com/wxdoc/dist/assets/media/aes-sample.eae1f364.zip获取手机号:<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="button base-button-box"></button>刚才下载的解密文件我们只需要引入WXBizDataCrypt.js就可以了,node文.原创 2021-07-14 19:50:37 · 4879 阅读 · 15 评论 -
uniapp,@input @change @blur 等事件,需要传额外参数的方法
这里以input为例,先看效果原创 2021-06-09 15:07:43 · 11258 阅读 · 0 评论 -
uni-app实现组件菜单左右滑动并点击切换(选中居中显示)
先看下效果效果一: 可直接使用scroll-into-view属性实现 或者 也可使用scroll-left思路:第一种,scroll-into-view 绑定一个动态 ID,子元素循环产出ID,点击时进行绑定(这次就不做代码产出了) 第二种,计算每个子元素的宽度,点击时获取当前点击元素前面的元素宽度之和效果二:使用scroll-left思路:计算每个子元素的宽度,点击时获取当前点击元素索引 - 1 的前面元素宽度之和,相比于效果一的第...原创 2021-05-26 11:07:35 · 5975 阅读 · 10 评论 -
uni-app使用canvas绘制海报(记录一波)
这里直接上代码了都有注释先来张绘制效果<canvas class="canvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" canvas-id="myCanvas"></canvas>export default{ data() { return { backImage: '', // 背景图原创 2021-05-18 11:42:47 · 1858 阅读 · 0 评论 -
uni-app在打包h5标题隐藏
在我们用uni-app打包h5项目的时候会出现两个标题我们需要把下面标题隐藏掉, 只需要在项目Vpp.vue公共css隐藏一下<script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('原创 2021-05-13 17:41:34 · 2305 阅读 · 0 评论 -
uni-app项目h5本地访问接口配置
创建uni-app项目找到manifest.json文件点击源码视图使用方法参考https://mp.csdn.net/editor/html/116757653原创 2021-05-13 17:22:50 · 2807 阅读 · 0 评论 -
uni-app项目封装网络请求
在项目根目录创建一个utils文件夹主要放一些项目公共封装方法在utils下创建request.js文件import indexConfig from '@/config/index.config'这个引入文件参考上一篇https://blog.csdn.net/qq_42543264/article/details/116757495/** * 封装网络请求 */import indexConfig from '@/config/index.config'module.exp..原创 2021-05-13 17:13:02 · 1340 阅读 · 0 评论 -
uni-app项目配置公共服务器域名
在项目根目录创建一个config文件夹主要放一些项目公共配置管理在config文件夹下创建一个index.config.js文件const CONFIG = { // 开发环境配置 development: { assetsPath: '/static', // 静态资源路径 baseUrl: '', // 后台接口请求地址 hostUrl: '', // H5地址(前端运行地址) websocketUrl: '', // websocket服务端地址 weixinAppI原创 2021-05-13 17:08:30 · 5679 阅读 · 0 评论