学习uniapp自己写的一些公共方法

最新推荐文章于 2024-06-21 14:51:30 发布
最新推荐文章于 2024-06-21 14:51:30 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861689/article/details/106381772
版权 
<script>
	// 一，对对象首字母按A-z进行排序
	//toLowerCase小写，toUpperCase大写（若大写同时改test=ABCDEFGHIJKLMNOPQRSTUVWXYZ）
	//调用：m_sort(data,'py')
	function m_sort(arr,field) {
				var test = 'abcdefghijklmnopqrstuvwxyz';
				var test_arr = {};
				for (var i = 0; i < test.length; i++) {
					test_arr[test[i]] = [];
				}
				//排序
				arr.forEach(function (item,index) {
					//首字母
					test_arr[item[field][0].toLowerCase()].push(item);
				});
				//拼接数据，（若不拼接就是  A:[{...}]这种....，把下面三行删除即可）
				var result = [];
				for (var i = 0; i < test.length; i++) {
					result = result.concat(test_arr[test[i]]);
				}
				return result;
			}
			
	// 二：调试
	//调试用（放在pages.json的globalStyle下面）
		"condition": {	//调试用
			"current": 0,
			"list": [
				{
					"name": "测试",
					"path": "pages/phones/phones",
					"query": "id=1"
				}
			]
		}
	
	// 三，uniapp循环for里给canvas下标      
	:canvas-id="'canvasGauge'+index"
	
	// 四，处理时间
	//获取当前时间往后推三天
			getDay: function(day) {
				var today = new Date();
	
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
	
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
	
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + '-' + tMonth + '-' + tDate;
			},
			//处理当前时间的月份问题
			doHandleMonth: function(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = '0' + month;
				}
				return m;
			},
			//获取当前时间
			setDateTime: function() {
				var now = new Date();
				var year = now.getFullYear(); //年
				var month = now.getMonth() + 1; //月
				var day = now.getDate(); //日
				var moning;
				var clock = year + '-';
				if (month < 10) clock += '0';
				clock += month + '-';
				if (day < 10) clock += '0';
				clock += day + ' ';
				return clock;
			},
	
	
	
	 //js日期比较(yyyy-mm-dd)  a:当前时间    b :比较时间
			 duibi:function (a, b) {
				var arr = a[0].split("-");
				var starttime = new Date(arr[0], arr[1], arr[2]);
				var starttimes = starttime.getTime();
	
				var arrs = b.split("-");
				var lktime = new Date(arrs[0], arrs[1], arrs[2]);
				var lktimes = lktime.getTime();
	
				if (starttimes > lktimes) {
					return false;
				}
				else
					return true;
			},
			//获取当前时间往后推三天
			getDay: function(day) {
				var today = new Date();
	
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
	
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
	
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + '-' + tMonth + '-' + tDate;
			},
			//处理当前时间的月份问题
			doHandleMonth: function(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = '0' + month;
				}
				return m;
			},
			//获取时间
			setDateTime: function() {
				var now = new Date();
				var year = now.getFullYear(); //年
				var month = now.getMonth() + 1; //月
				var day = now.getDate(); //日
				var moning;
				var clock = year + '-';
				if (month < 10) clock += '0';
				clock += month + '-';
				if (day < 10) clock += '0';
				clock += day + ' ';
				return clock;
			},
			
			
			//两个时间相差天数 兼容firefox chrome
			    datedifference:function(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式  
			        var dateSpan,
			            tempDate,
			            iDays;
			        sDate1 = Date.parse(sDate1);
			        sDate2 = Date.parse(sDate2);
			        dateSpan = sDate2 - sDate1;
			        dateSpan = Math.abs(dateSpan);
			        iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
			        return iDays
			    },
			
			
			//格式化时间yyyy-mm-dd hh-MM-ss
			getDate :function(e){
					var dateee = new Date(e).toJSON();  		//去掉时间里的T
					var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
					return date;
			},
			
			
			
			//plsql参数如果有时间则加todate否则报错，原因就是由于pl/sql developer的bug，有时候不能将date列格式化
			to_date('2019-10-22','yyyy-mm-dd')
</script>


		
<!-- 自定义数字键盘 -->
<template>
	<!-- =========================自定义键盘（数字）=================== -->
	<view class="content">
		<view class="login">
			<view class="l_top">
				<input class="trade_pwd" disabled="true"  id="targetInput" @click="onkeyboardshow()"  v-model="trade_pwd" />
			</view>
		</view>
		<view :class="[keyboardshow?'keypan':'']">
			<view class="titles"   @tap="closeKeyboard()">
				<image v-show="keyboardshow" class="down_hide_imgge" src="../../static/down_hide.png"></image>
			</view>
			<view class="pan_num_key" v-if="keyboardshow" :class="[items.checked?'pan_num_checked':'pan_num_key']" v-for="(items,index) in boardlists"
			 :key="index" @touchend="writepwd_stop_delete()"   @touchstart="writepwd_delete(items.id)"  @tap="writepwd(items.id)">{{items.con}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyboardshow: true,
				trade_pwd: '',
				numarr: [],
				boardlists: [{
						id: 1,
						con: 1,
						checked: false
					}, {
						id: 2,
						con: 2,
						checked: false
					}, {
						id: 3,
						con: 3,
						checked: false
					}, {
						id: 4,
						con: 4,
						checked: false
					}, {
						id: 5,
						con: 5,
						checked: false
					}, {
						id: 6,
						con: 6,
						checked: false
					}, {
						id: 7,
						con: 7,
						checked: false
					}, {
						id: 8,
						con: 8,
						checked: false
					}, {
						id: 9,
						con: 9,
						checked: false
					}, {
						id: 10,
						con: "✓",
						checked: false
					}, {
						id: 11,
						con: 0,
						checked: false
					},
					{
						id: 12,
						con: "⋘",
						checked: false
					},

				],
				num_delete:''
			};
		},
		computed: {
		},
		onLoad() {
			//隐藏软键盘
			// uni.hideKeyboard()
		},
		methods: {
			//实现持续删除按键
			writepwd_delete:function(num){
				var _that=this;
				if(num>=12){
					//定时8微秒删除一个数字
					this.num_delete=setInterval(function() {
						_that.close();
					}, 80)
				}
			},
			//自定义键盘条件判断，删除，确定
			writepwd(num) {
				console.log(num);
				if (num == 12) {
					this.close();
					this.boardlists[11].checked = true;
					return;
				}
				if (num == 10) {
					this.setpwd();
					this.boardlists[9].checked = true;
					return;
				}
				if (num == 11) {
					num = 0;
					this.boardlists[10].checked = true;
				} else {
					this.boardlists[num - 1].checked = true;
				}
				this.numarr.push(num);
				var that = this;
				setTimeout(function() {
					for (var i = 0; i < that.boardlists.length; i++) {
						that.boardlists[i].checked = false;
					}
				}, 200)
				this.trade_pwd = this.numarr.join("");
			},
			//隐藏按钮框
			closeKeyboard: function() {
				this.keyboardshow = false;
			},
			//停止定时器
			writepwd_stop_delete:function(){
				clearInterval(this.num_delete);
			},
			//回退方法
			close() {
				this.numarr.pop();
				if (this.trade_pwd.length > 0) {
					this.trade_pwd = this.trade_pwd.substring(0, this.trade_pwd.length - 1);
				}else{
					//取消定时器的删除
					this.writepwd_stop_delete();
				}
			},
			onkeyboardshow:function(){
				this.keyboardshow=true;
			},
			// 确认执行的方法
			setpwd() {
				if (this.trade_pwd.length <=0) {
					uni.showToast({
						image:'',
						title:'亲你的输入为空~',
						duration:1500
					})
					return;
				}
				console.log(this.trade_pwd);
			},
		}
	};
</script>
<style lang="scss" scoped>
	.trade_pwd{
		border: 1upx solid#000;
	}
	.content {
		width: 100%;
		font-size: 28upx;
		background: #fff;
		color: #555;
		height: 100vh;
		font-weight: 400;

		.keypan {
			width: 100%;
			height: 550upx;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #E6E6E6;

			.titles {
				width: 90%;
				height: 58upx;
				background: #E6E6E6;
				display: flex;
				justify-content: space-between;
				line-height: 80upx;
				padding: 0 5%;
				font-size: 32upx;
				color: #292824;

				span {
					width: 100upx;
					height: 70upx;
					display: inline-block;
					padding-left: 30upx;
				}

			}

			.pan_num_key {
				width: 33.3%;
				height: 124upx;
				float: Left;
				text-align: center;
				background: #fff;
				font-size: 60upx;
				line-height: 120upx;
				box-shadow: 0 2upx 5upx rgba(0, 0, 0, 0.5);

			}

			.pan_num_checked {
				width: 33.3%;
				height: 124upx;
				float: Left;
				// margin-left: 2.1%;
				// margin-top: 2.1%;
				text-align: center;
				font-size: 60upx;
				// border-radius: 10upx;
				// font-size: 35upx;
				line-height: 120upx;
				box-shadow: 0 2upx 5upx rgba(0, 0, 0, 0.5);
				animation: checked_bg 0.3s ease;
			}
		}

		.navigation_bar {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-top: 60upx;

			.back-icon {
				width: 18upx;
				height: 34upx;
			}
		}

		.login {
			width: 100%;
			height: 300upx;

			.l_top {
				width: 700upx;
				height: 200upx;
				margin: 0 auto;
				position: relative;

				.l_text {
					width: 445upx;
					height: 69upx;
					font-size: 28upx;
					text-align: center;
					margin: auto;
					top: 100upx;
					position: relative;

				}

				.lt {
					margin-top: -20upx;
					font-size: 25upx;
					color: #555
				}
			}
		}

		.title {
			color: #616161;
			text-align: center;
			font-size: 30upx;
			margin-bottom: 34upx;
		}

		.mima {

			flex-direction: row;
			width: 680upx;
			height: 78upx;
			margin: 0 auto;
			position: relative;

			.item {
				width: 92upx;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				float: left;
				align-items: center;
				justify-content: center;
				border-bottom: 1upx solid #E5E5E5;
				margin-left: 20upx;

				.line {
					width: 2upx;
					height: 40upx;
					background: #979797;
					animation: shan 1s ease infinite;
				}

				.dot {
					width: 20upx;
					height: 20upx;
					border-radius: 20upx;
					background: black;
				}
			}

			.trade_pwd {
				position: absolute;
				height: 78upx !important;
				width: 480upx;
				opacity: 0;
			}
		}
	}

	@keyframes shan {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@keyframes checked_bg {
		0% {
			background: #fff
		}

		50% {
			background: #D3D1E2
		}

		100% {
			background: #fff
		}
	}
	.down_hide_imgge{
		position: absolute;
		width: 90upx;
		height: 60upx;
		margin-left: 295upx;
	}
</style>


<--删除字符最后一个逗号-->
Warehouse_data = (Warehouse_data.substring(Warehouse_data.length - 1) == ',') ? Warehouse_data.substring(0, Warehouse_data.length - 1) : str;



bootstarp的选择加减框

//选择的物料减按钮
            //{
            //    field: 'supplies_Number', title: "申请数量",
            //    formatter: function (value, row, index) {
            //        var html = "";
            //        html += "<input id='min' οnclick='btnmin()' class= 'btn btn-primary btn-xs' type='button' value=' - ' /><input type='number' class='form - control' id='quantity'value='0' min='0' max=" + value + "  /><input id='add' οnclick='btnadd()' class= 'btn btn-primary btn-xs' type='button' value='+' />";
            //        return html;
            //    },
            //    align: 'center', // 左右居中
            //    valign: 'middle',// 上下居中
            //    width:100
            //},

function btnmin() {
    var i = document.getElementById("quantity").value;
    if (i > 0) {
        i--;
        document.getElementById("quantity").value = i;
    } else {
        i = 0;
        document.getElementById("quantity").value = i;
    }
}
//选择的物料加按钮
function btnadd() { 
        var i = document.getElementById("quantity").value;
        console.log(document.getElementById("quantity").value)
        if (i < document.getElementById("quantity").max) {
            i++;
            document.getElementById("quantity").value = i;
        } else {
            toastr.warning('申请数量不能超过库存数量!');
            return;
        }
}





//数组去重
function Duplicate(List) {
    //根据价格（Id）排序
    function sortprice(a, b) {
        return a.id - b.id
    }
    List.sort(sortprice);
    var res = [List[0]];
    for (var i = 1; i < List.length; i++) {
        if (List[i].id !== res[res.length - 1].id) {
            res.push(List[i]);
        }
    }
    return res;
}
鱼干～
关注
专栏目录
uniapp 公共方法封装 公共请求封装
qq_41241504的博客
11-17 7776
一般我都习惯把公共js封装到util这个文件夹下 常见的的方法，手机号验证，邮箱验证等方法我都会写到util下的util.js里 目录： util.js代码 -------------------------完整的验证封装代码-------------------------- //校验邮箱格式 function checkEmail(email) { return RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_
关于uniapp的学习
m0_68357754的博客
05-25 160
这是一篇关于我这学期对uniapp的学习与归纳。uni-app跨平台开发是使用vue.js 开发跨平台应用的前端框架，编写vue.js代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台。现如今微信小程序使用得越发频繁，uni-app相对而言比较简单，各种系统的小程序应用，也不需要学习其他应用的框架，而且对于开发者来说减少了许多学习成本跟开发成本。
uni-app公用方法
weixin_39703839的博客
06-15 6681
basic.js import Vue from 'vue' import store from '@/store' 1、运行环境判断 if(process.env.NODE_ENV == 'development'){ //本地环境 development }else{ //线上环境 production } 2、请求方法（异步/同步） /** 删除对象空属性 * @method deleteObjNull * @param {Object} obj 要处理的对象 */ const d
uni-app的登录页面
最新发布
Lu_menglin的博客
06-21 254
接下来就是在 uniCloud中的cloudfunctions函数集里创建登录的login函数。注明这个登录功能需要用到阿里云的云数据库空间和创建云函数来简单实现的登陆效果。然在输入前面弄得login表里面得账号和密码，点击立即登录就可以了。然后再去阿里云的云数据库里创建login表储存账号和密码。然后在创建一个新的login的页面。第一步，我们先创建一个项目。uniapp的登录功能介绍。
uniapp 一些常用的公共方法
weixin_44805839的博客
07-12 1464
uniapp 一些常用的公共方法
uniapp 创建一个公共的JS方法
weixin_35752233的博客
01-03 1136
在 uni-app 中，可以使用 Vue.js 的 mixin 方法来创建公共的 JavaScript 方法。 例如，在创建一个 mixin 对象并添加一个公共方法： const myMixin = { methods: { myMethod() { console.log('Hello from myMethod') } } } 然后，在你的 Vue 组件中...
uniapp学习
lzl0413的博客
06-15 211
uni-app是一个跨端开发框架，一套代码运行多个平台，并可以使用条件编译实现不同平台的特性编码。
uniapp开发的智慧城市项目
05-11
2. **性能优化**：合理运用uniapp的生命周期方法和懒加载策略，降低内存消耗，提升用户体验。 3. **兼容性测试**：由于uniapp跨平台特性，需对各端进行兼容性测试，确保在不同设备上的正常运行。 4. **安全性考虑**...
uniapp学习总结
weixin_67850938的博客
06-15 852
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。
黑马商城uniapp
02-24
"黑马商城uniapp"是一个基于uniapp框架开发...通过学习和研究"黑马商城uniapp"这个项目，开发者不仅可以掌握uniapp的基本用法，还能了解到电商应用的常规设计和实现思路，对于提升uniapp开发技能和实践经验非常有帮助。
汉字转拼音及获取首字母
11-30
这是我搜索网络资源，然后自己整理的一个输入汉字转拼音及获取首字母的一个示例程序，希望能帮助到兄弟姐妹们。
关于学习uniapp心得体会
Apooppp的博客
06-21 277
uni-app支持通过 可视化界面、两种方式快速创建项目。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
uniapp表单验证方法封装
weixin_44694389的博客
12-10 2321
本次代码完全是uniapp官方源码，写在这里是记录笔记，如果想看源码，可以打开uniapp软件新建项目，选择uniapp官方项目案例即可。 本次目的是学习代码规范，因为觉得自己写的代码太臃肿，后期维护太难。 1.在根目录新建文件common,在文件里面新建一个js文件，名称随意。 //graceChecker.js /** 数据验证（表单验证） 来自 grace.hcoder.net 作者 hcoder 深海 */ export default { error:'', check : fu
uniapp常用的公共方法
zongxingfengyun的博客
09-09 1607
本人写项目常用的公共方法 不定期更新，有什么补充欢迎私聊 //复制内容 function setClipboardData(text) { uni.setClipboardData({ data: text, //要被复制的内容 success: () => { //复制成功的回调函数 uni.showToast({ //提示 title: '复制成功', icon...
uniapp写公共方法的地方
nelly521的博客
08-08 524
这样，我们就可以在组件中导入该 mixin，并使用其中的公共方法了。在上述代码中，我们在组件中导入了 commonMixin，并将其添加到 mixins 中，这样我们就可以在组件中使用 commonMixin 中的公共方法了。在上述代码中，我们在某个页面或组件中使用了 commonUtils 中的 changeString 方法，从而修改了字符串中的 'World' 为 '世界'。在上述代码中，我们在组件中定义了一个公共方法 changeMsg，当按钮被点击时，该方法将会被调用，从而修改 msg 的值。
uniapp封装公共的方法或者数据请求方法
weixin_38897313的博客
01-26 920
1、新建一个util.js文件。或者直接在.vue页面引入。
时间戳转换
qq_37683424的博客
06-26 343
function formatTime(number,format) {   var formateArr = ['Y','M','D','h','m','s'];   var returnArr = [];   var date = new Date(number * 1000);   returnArr.push(date.getFullYear());   returnArr.push(fo...
uniapp 封装公共方法(无需每个页面引用,直接调用)
weixin_44805839的博客
07-12 1481
uniapp 封装公共方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值