uni-app开发基础用法

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123

最常用、最基础用到的技术

页面跳转

组件

// 跳转页面并传递参数 ?后面跟参数=值
<navigator :url="'/pages/yma/yma?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 另一个页面接收参数 注意：参数名称要一致！
onLoad: function (option) {
    var item = JSON.parse(decodeURIComponent(option.item));
}

navigator涉及到的其他属性 看下方

open-type跳转方式

根据页面属性实际情况和想实现的效果选择

open-type="navigate"在新页面打开

open-type="redirect"在当前页打开

open-type="switchTab"跳转到tab页面打开

hover-class

鼠标点击时的样式hover-class="none"的时候，代表没有点击效果

delta

delta='navigateBack'的时候有效，代表回退的层级数,简单说：就是往后后退几个页面

其他的不太常用就不详细介绍了

API

uni.navigateTo({
	url: 'text?id=9&name=app'
});

uni.redirectTo({
	url: 'text?id=1'
});

uni.reLaunch({
	url: 'text?id=1'
});

// 注意：这个api只能跳转到pages.json下pages里面的页面
uni.switchTab({
	url: '/pages/index/index'
});

uni.navigateBack({
	delta: 2
});

数据缓存

// 存储数据
uni.setStorage({
	key: 'mc',//名称
	data: 'libai',//值
	success: function () {
		console.log('success');
	}
});

//获取存储的数据 注意key要一致
uni.getStorage({
	key: 'mc',
	success: function (res) {
        //这样就取到值啦
		console.log(res.data);
	}
});

//删除某个缓存的值
uni.removeStorage({
	key: 'mc',
	success: function (res) {
		console.log('success');
	},
        //失败 会走到fail
        fail: function (e) {
		console.log(e);
	}
});

//清除本地数据缓存
uni.clearStorage();

位置

获取当前位置：

// type默认是wgs84返回gps坐标，gcj02返回国测局坐标，可用于uni.openLocation和map组件坐标
App和H5需配置定位SDK信息才可支持gcj02。
uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度：' + res.longitude);//经度
		console.log('当前位置的纬度：' + res.latitude);//纬度
	}
});

地图sdk配置地址：地图插件配置 - DCloud问答

查看位置：

uni.openLocation({
			latitude: latitude,
			longitude: longitude,
			success: function () {
				console.log('success');
			}
		});