【uniapp&Layui】大汇总

Minions_Fatman

已于 2024-09-10 10:09:19 修改

阅读量317

点赞数

文章标签： uni-app layui 前端

于 2023-11-18 15:32:36 首次发布

本文链接：https://blog.csdn.net/Minions_Fatman/article/details/134477869

版权

【 JavaScript && JQuery 】

jQuery 获取文件后缀的方法
var location=“https://runzhixian.oss-cn-beijing.aliyuncs.com/道德经/道德经第24章.mp3”;
var point = location.lastIndexOf(“.”);
var type = location.substr(point);
if(type==“.MP3”||type==“.mp3”||type==“.wav”||type==“.mid”){ }

event.stopPropagation(); // 阻止事件冒泡
$(this).addClass(‘on’).siblings().removeClass(‘on’); // jq选中事件
$(this).find(“.item”).first().addClass(“active”); // jq给第一个子元素追加类名

允许跨域请求的
location ~* .*$ { add_header Access-Control-Allow-Origin *; }

<meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests”>
————————————————————————————————————

a 标签跳转

只需要给a标签加一个属性：target=“_blank” 就可以在跳转的时候打开新的页面
<a class=“layui-btn layui-btn-xs” target=“_blank” href=“#/channel/alipay_issue/lay_id=2”>去发布</a>
window.open(‘_blank’).location=layui.setter.baseUrl+‘h5’;//新页跳转
str.replace(“需要替换的字符串”，“新字符串”)　
————————————————————————————————————

设置浏览器缓存

localStorage.setItem(‘buyer_id’, ‘111’); // 设置缓存
localStorage.getItem(‘buyer_id’) // 得到缓存
————————————————————————————————————

视频封面图

:poster=“bitem+‘?x-oss-process=video/snapshot,t_3000,m_fast,f_png’”
<video controls class=“wp-100” :src=“bitem”
:poster=“bitem+‘?x-oss-process=video/snapshot,t_3000,m_fast,f_png’”></video>
————————————————————————————————————

disabled 动态添加和移除disabled属性

$(‘#uid’).attr(“disabled”,true);
$(‘#uid’).attr(“disabled”,false);
————————————————————————————————————

sort 数组(排序)

var nums = [9,8,3,5,1,6];
nums = nums.sort();
————————————————————————————————————

unshift 在数组首位追加元素

data.unshift({id:0,images:“”,name:“全部分类”});
var array = new Array();
array.unshift();
————————————————————————————————————

splice 删除当前

var arr = str.split(‘,’);
datas.splice(_index, 1);
————————————————————————————————————

substring 删除字符串最后一个字符

str = str.substr(1); //删除第一个字符
str = str.substr(0, str.length - 1); //删除最后一字符
————————————————————————————————————

a[0][‘gender’] 对象数组,如何给对象添加一个新属性

a[0][‘gender’] = “women”；
a[0][‘address’] = “China”；
a[1].province = “Jiangsu”；
this.data_list.forEach((item, index) => { item[item.name+‘_code’]=‘’ })
let aa={}, _json=eval(“(”+datas.field.area+“)”);
_json.forEach((item, index) => { aa[‘region[’+index+‘][city]’]=item.value; })
————————————————————————————————————

splice 删除数组中的指定元素

var arr = [‘b’,‘a’,‘c’];
var key = arr.indexOf(‘a’); // 获取下标
arr.splice(key, 1);
————————————————————————————————————

hasClass 检查被选择的元素是否包含指定的class名

if( $(that).hasClass(‘on’) ){ console.log(‘056565’) }
————————————————————————————————————

jq 选中事件

$($this).toggleClass(‘dtree_this’);
$($this).siblings().removeClass(‘dtree_this’);
————————————————————————————————————

HTML img src 图片路径不存在，则显示一张默认图片的方法

<img src=“'img/error.png” οnerrοr=“this.src=‘img/error.png’”/>

css 图片居中

vertical-align: middle; width: auto; height: auto; max-width: 100%; max-height: 100%;
/* 向父元素定位 */
position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);

envVersion：小程序当前环境版本：develop开发版、trial体验版、release正式版、gray灰度版（仅支付宝小程序支持）
// #ifdef MP-WEIXIN || MP-ALIPAY
let miniProgram  = uni.getAccountInfoSync().miniProgram // 微信&支付宝小程序帐号信息
let curVersion = miniProgram.envVersion;
// #endif
// #ifdef MP-WEIXIN
const version = __wxConfig.envVersion; // 微信小程序
// #endif

设置浏览器缓存
localStorage.setItem(‘buyer_id’, ‘111’); // 设置缓存
localStorage.getItem(‘buyer_id’) // 得到缓存

layui复选框***将页面全部复选框选中的值拼接到一个数组中

var arr_box = [];
$(‘input[type=checkbox]:checked’).each(function() { arr_box.push($(this).val()); });
console.log(arr_box);
// *****checkbox选中复选框
$(‘tr[data-index=’ + index + ‘] input[type=“checkbox”]’).prop(‘checked’, true);

js正则表达去除开头和结尾的逗号

var str=“,A,B,C,”;
str=str.replace(/^(\s|,)+|(\s|,)+$/g, ‘’);
————————————————————————————————————
首先使用 filter 方法过滤出 checked 属性为 true 的对象，然后使用 map 方法提取这些对象的 id 属性
const topics = [
{ id: 1, name: ‘热门话题’, checked: false },
{ id: 2, name: ‘佳作鉴赏’, checked: false },
{ id: 3, name: ‘艺圈动态’, checked: true },
{ id: 4, name: ‘艺术知识’, checked: true },
{ id: 5, name: ‘艺闻趣事’, checked: false },
{ id: 6, name: ‘藏家秀’, checked: false }
];
const checkedTopicIds = topics.filter(topic => topic.checked).map(topic => topic.id);
console.log(checkedTopicIds); // 输出 [3, 4]
————————————————————————————————————
使用 find 方法找到 name 属性为 “微信支付” 的对象，并提取其 value 属性
const paymentMethods = [
{ id: 1, name: “余额支付”, value: “money”, logo: “https://fireworld.oss-cn-beijing.aliyuncs.com/uploads/images/2024/06-13/666a4da54ebeb.png” },
{ id: 3, name: “微信支付”, value: “wx_lite”, logo: “https://fireworld.oss-cn-beijing.aliyuncs.com/uploads/images/2024/06-13/666a4d94adc03.png” }
];
const wechatPayValue = paymentMethods.find(method => method.name === “微信支付”).value;
console.log(wechatPayValue); // 输出 “wx_lite”

序列化 && 反序列化

序列化，即js中的Object转化为字符串

toString() 方法用于数组【】返回以一个字符串

1.使用toJSONString
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
2.使用stringify
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

反序列化，即js中JSON字符串转化为Object

1.使用eval
var obj=eval(“(”+data+“)”);
2.使用parseJSON
var obj = data.parseJSON(); //由JSON字符串转换为JSON对象
3.使用parse
var obj = JSON.parse(data); //由JSON字符串转换为JSON对象

/* PC端 */
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 1200px){}

/* 手机端 */
@media screen and (max-width: 750px) {}

判断字符串是不是超链接

let strReg = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&amp;//=]*)/;
let reg = strReg.test('https://hao.360.com/?a1111');
if(reg){
	// 是超链接
} else{
	// 否
}

获取URL地址栏的值

function getParams(name) { 
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
	var r = window.location.search.substr(1).match(reg); 
	if (r != null) return unescape(r[2]); return null; 
}
var cid=getParams('cid');

去除重复的对象

let arr_list = uni.getStorageSync('tag_list')||[];
let new_arr = [];
for(var i in arr_list) {
	if(new_arr.indexOf(arr_list[i])==-1) { new_arr.push(arr_list[i]); }
}
this.tag_list = new_arr;

数组去重

function unique(arr,initArr=[]) {
    arr.forEach(item=>{
        let isFind = initArr.find(cell=> cell.id === item.id)
        if(!isFind) { initArr.push(item) }
    })
    return initArr
}

【layui】

table.resize(‘shipList’);
$(e.elem).attr(‘data-name’)

Form表单的自定义验证规则

<div class="layui-form-item" style="margin-bottom: 0px;">
    <label class="layui-form-label">所在类目</label>
    <div class="layui-input-block" id="catids_1">
       <input type="checkbox" value="1" title="烟花爆竹" lay-skin="primary" lay-verify="checkbox">
    </div>
</div>

form.verify({
    checkbox:function (value, item) {
        if($('#catids_1 input:checked').length==0){
            return "请选择产品所在类目";
        }
    }
});

<div class="layui-form-item">
    <label class="layui-form-label">经度</label>
    <div class="layui-input-block">
        <input type="text" name="lng" lay-verify="jwd" placeholder="请输入经度，例如：116.397827" autocomplete="off" class="layui-input">
    </div>
</div>

//自定义验证规则
form.verify({
    jwd:function (value) {
        if(value&&isNaN(Number(value,10))){
            return '经纬度格式错误'
        }
    }
})

时间戳转换

{{item.create_time*1000|time('yyyy.MM.dd hh:mm') }}
templet: "<div>{{layui.util.toDateString(d.update_time*1000, 'yyyy/MM/dd HH:mm:ss')}}</div>"

复选框-将所有复选框选中的值拼接到一个数组中

var arr_box = [];
$('input[type=checkbox]:checked').each(function() {
	arr_box.push($(this).val());
});
console.log(arr_box);

复选框-checkbox选中复选框

$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
form.render();

admin.popup弹窗关闭的事件【end】

admin.popup({
     title: "",
     area: admin.screen() < 2 ? ['85%', '70%'] : ["450px", "300px"],
     success: function (layero, paym2_index) { },
     // 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
     end: function(){
          // 层级销毁后，关闭定时器
          clearInterval(time_ali);
          return false;
     },
});

【uniapp】

[uni-pop]-默认弹出

setTimeout(()=>{ this.$refs.popup.open() },200)

微信公众号的登录 baseUrl是域名

// #ifdef H5
let url = encodeURIComponent(window.location.href);
let ua = window.navigator.userAgent.toLowerCase();
let referid=GetQueryString('referid')||0; //获取url参数
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
	// 微信浏览器
	window.location.href = baseUrl + 'user/oauth?app_type=wx_pub&referid=' + referid + '&redirect_url=' + url;
}
// #endif
// 获取传值参数
function GetQueryString(name){
	let href=window.location.href;
	if(href.indexOf('?')>-1&&href.indexOf(name)>-1){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var r = href.substr(1).match(reg);
		if(r!=null){return  decodeURI(r[2]);}else{
			let str1=href.split(name)[1];
			let res=null;
			if(str1.indexOf('&')>-1){
				let str2=str1.split('&')[0];
				res=str2.split('=')[1];
			}else{
				res=str1.split('=')[1];
			}
			return res;
		} 
	}else{
		return uni.getStorageSync('referid')||0;;
	}
}