1. 随笔博客首页
  2. UniApp

开发uniapp一些实用技巧

五维国度 • 文章来源: 开发uniapp一些实用技巧 • • UniApp • 阅读 58

1、 去除uniapp开发微信公众号h5的uniapp自带导航栏

navTitle() {
	let style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = "uni-page-head,.uni-page-head{display:none;}";
	document.getElementsByTagName('head').item(0).appendChild(style);
},

2、获取url地址参数或地址栏中的参数

getUrlArgument(url,name) {
	return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ''])[1].replace(/\+/g, '%20')) || null;
},
getUrlArgument(location.href, 参数名)

3、使用flite获取符合过滤条件项的id

（1）、一维数组

arrr.map( item => item.checked ).map( item => item.id )

（2）、二维数组

arr.map( item => ( item.array.filter( i => i.checked )).map( item => item.id ))

4、当前时间戳毫秒级转成秒级

Date.parse(new Date())/1000

5、阻止uniapp的返回事件

onBackPress() {
	return true;
}

6、IOS滚动条不顺畅

 overflow: auto;
-webkit-overflow-scrolling: touch;

7、H5与APP交互

（1）、h5给app传值

IOS:
window.webkit.messageHandlers.ios定义方法名.postMessage(待传参数}); 

Android：
android别名.android定义方法名(待传参数)；

（2）、app给h5传值

IOS：
window.ios_componiID（暴露的方法名） = res => {
	//res 为app端传过来的参数
}

Android：
window.getAndroidUserData（暴露方法名） = res => {
	//res 为app端传过来的参数
}

8、使用subNVue解决uniapp地图层级过高，无法显示其他内容

（1）、在page.json里需要显示的页面配置子窗体
开发uniapp一些实用技巧
（2）、在显示子窗体页面调用
开发uniapp一些实用技巧
开发uniapp一些实用技巧

9、地图之间的转换

/**百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系 **/ 
// 定义常量
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var PI = 3.1415926535897932384626;
var constantA = 6378245.0;
var constantB = 0.00669342162296594323;

function transformlat(lng, lat) {
	var lat = +lat;
	var lng = +lng;
	var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * 		Math.sqrt(Math.abs(lng));
	ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
	ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
	ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
	return ret；
};

function transformlng(lng, lat) {
	var lat = +lat;
	var lng = +lng;
	var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
	ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
	ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
	ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
	return ret；
};

/**
 * 判断是否在国内，不在国内则不做偏移
 * @param lng
 * @param lat
 * @returns {boolean}
 */
function beAbroad(lng, lat) {
	var lat = +lat;
	var lng = +lng;
	// 纬度3.86~53.55,经度73.66~135.05
	return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
};

/**
 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
 * 即 百度 转 谷歌中国区地图、高德、腾讯
 * @param bd_lng
 * @param bd_lat
 * @returns {*[]}
 */
function baiDuChangeGaode(bd_lng, bd_lat) {
	var bd_lng = +bd_lng;
	var bd_lat = +bd_lat;
	var x = bd_lng - 0.0065;
	var y = bd_lat - 0.006;
	var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
	var tranform = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
	var gd_lng = z * Math.cos(tranform);
	var gd_lat = z * Math.sin(tranform);
	return [gd_lng, gd_lat]
};

/**
 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
 * 即谷歌中国区地图、高德、腾讯 转 百度
 * @param gd_lng
 * @param gd_lat
 * @returns {*[]}
 */
function GaoDeChangeBaidu(gd_lng, gd_lat) {
	var gd_lat = +gd_lat;
	var gd_lng = +gd_lng;
	var z = Math.sqrt(gd_lng * gd_lng + gd_lat * gd_lat) + 0.00002 * Math.sin(gd_lat * x_PI);
	var tranform = Math.atan2(gd_lat, gd_lng) + 0.000003 * Math.cos(gd_lng * x_PI);
	var bd_lng = z * Math.cos(tranform) + 0.0065;
	var bd_lat = z * Math.sin(tranform) + 0.006;
	return [bd_lng, bd_lat]
};

/**
 *世界大地测量系统(WGS84) 转 国测局坐标(GCJ-02) 
 * 即 底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的WGS-84坐标系 转 谷歌中国区地图、高德、腾讯
 * @param wgs_lng
 * @param wgs_lat
 * @returns {*[]}
 */
function WGS84ChangeGaoDe(wgs_lng, wgs_lat) {
	var wgs_lat = +wgs_lat;
	var wgs_lng = +wgs_lng;
	if (beAbroad(wgs_lng, wgs_lat)) {
		return [wgs_lng, wgs_lat]
	} else {
		var dlat = transformlat(wgs_lng - 105.0, wgs_lat - 35.0);
		var dlng = transformlng(wgs_lng - 105.0, wgs_lat - 35.0);
		var radlat = wgs_lat / 180.0 * PI;
		var magic = Math.sin(radlat);
		magic = 1 - constantB * magic * magic;
		var sqrtmagic = Math.sqrt(magic);
		dlat = (dlat * 180.0) / ((constantA * (1 - constantB)) / (magic * sqrtmagic) * PI);
		dlng = (dlng * 180.0) / (constantA / sqrtmagic * Math.cos(radlat) * PI);
		var mglat = wgs_lat + dlat;
		var mglng = wgs_lng + dlng;
		return [mglng, mglat]
	}
};

/**
 * 国测局坐标(GCJ-02) 转 世界大地测量系统(WGS84)
 * 即 谷歌中国区地图、高德、腾讯 转 底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的WGS-84坐标系
 * @param gd_lng
 * @param gd_lat
 * @returns {*[]}
 */
function GaoDeChangeWGS84(gd_lng, gd_lat) {
	var gd_lat = +gd_lat;
	var gd_lng = +gd_lng;
	if (beAbroad(gd_lng, gd_lat)) {
		return [gd_lng, gd_lat]
	} else {
		var dlat = transformlat(gd_lng - 105.0, gd_lat - 35.0);
		var dlng = transformlng(gd_lng - 105.0, gd_lat - 35.0);
		var radlat = gd_lat / 180.0 * PI;
		var magic = Math.sin(radlat);
		magic = 1 - constantB * magic * magic;
		var sqrtmagic = Math.sqrt(magic);
		dlat = (dlat * 180.0) / ((constantA * (1 - constantB)) / (magic * sqrtmagic) * PI);
		dlng = (dlng * 180.0) / (constantA / sqrtmagic * Math.cos(radlat) * PI);
		var mglat = gd_lat + dlat;
		var mglng = gd_lng + dlng;
		return [gd_lng * 2 - mglng, gd_lat * 2 - mglat]
	}
};

10、判断手机是否安装地图软件

let packageName = ''; //百度地图, 高德地图，腾讯地图的包名  
let main = plus.android.runtimeMainActivity();
let packageManager = main.getPackageManager();
let PackageManager = plus.android.importClass(packageManager);
let packageInfoGd = packageManager.getPackageInfo('com.autonavi.minimap',PackageManager.GET_ACTIVITIES);
let packageInfoBd = packageManager.getPackageInfo('com.baidu.BaiduMap', PackageManager.GET_ACTIVITIES);
let packageInfoTx = packageManager.getPackageInfo('com.tencent.map', PackageManager.GET_ACTIVITIES);
if (packageInfoGd || packageInfoBd || packageInfoTx) {
	//安装了以上地图软件
} else {
	uni.showModal({
		content: '请安装地图软件',
		showCancel: false
	});
}

11 、获取验证码倒计时

<input type="number" v-model:value="code" maxlength="10" placeholder="验证码" class="code_input"/>
<view :class="isGain ? 'gray' : 'orange'" @click="getCode">{{codeTxt}}</view>

var timeId = null;
data() {
	return {
		isGain: false, //是否获取
		second: 60, //倒计时
		codeTxt: '获取验证码',
		code: '',
		mobile: '',
	}
},

mounted() {
	clearInterval(timeId); //先清理循环，避免缓存
},

// 获取验证码
getCode() {
	if (this.isGain) {
		return;
	}
	if (!/^1\d{10}$/.test(this.mobile)) {
		uni.showToast({
			title: '手机号格式不对',
			icon: 'none',
			duration: 2000,
			position: 'center'
		})
		return;
	}
	this.isGain = true;
	this.codeTxt = this.second + '秒';
	timeId = setInterval(() => {
		this.second--;
		if (this.second === 0) {
			this.isGain = false;
			clearInterval(timeId);
			this.codeTxt = '获取验证码';
			this.second = 60;
			return;
		}
		this.codeTxt = this.second + '秒';
	}, 1000);
},

12、uniapp H5端获取当前位置的具体地址

getUserLocation(lat,lng) {
	let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
	this.$jsonp(url, {
		key: '腾讯地图申请的key',
		location: lat + ',' + lng,
		output:'jsonp',
		callback:'jsonp'
	}).then(res => {
		console.log(res);
		this.$nextTick(() => {
			//操作解析后的结果	
		})
	}).catch(err => {
		console.log(err);
		uni.showToast({
			title: "地址解析失败",
			position: "center",
			icon: "none",
			duration: 2000
		})
	});		
}

13、实现导航栏中间图标突出效果（要求列表数为单数）

开发uniapp一些实用技巧
中间按钮的操作事件书写在App.vue
开发uniapp一些实用技巧

14、获取app当前版本

开发uniapp一些实用技巧
本文来自转载，文章内容不代表随笔博客立场。
原文链接：开发uniapp一些实用技巧
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
赞 (1)
五维国度的头像五维国度
0 0 打赏 微信扫一扫 微信扫一扫
上一篇 2022年 12月 7日 上午11:42
下一篇 2022年 12月 14日 下午3:18

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询： QQ交谈

邮件：jctestxcx@163.com

关注微信