uniapp常用api

目录

第一章、常用设置的api

1.1 tabBar导航配置

1.2 subPackages分包配置

1.3 enablePullDownRefresh下拉刷新配置

1.4 onReachBottomDistance上拉刷新配置

第二章、页面常用逻辑api

2.1请求数据

2.1.1 网络请求uni.request

2.2 文件上传与下载(图片、文件…)

2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument

2.2.2 图片上传chooseImage与下载downloadFile

2.3 页面跳转

2.3.1 跳转到非tabBar页面navigateTo

2.3.2 跳转到tabBar页面navigateTo

2.3.3 针对非tabBar的页面回退navigateBack

2.4 数据缓存

2.4.1 本地存储指定的键值对setStorage与setStorageSync

2.4.2 获取本地存储键对应的值getStorage与getStorageSync

2.4.3 移除缓存removeStorage与removeStorageSync

2.4.4 清空缓存clearStorage与clearStorageSync

2.5 位置

2.5.1 配置地图详细信息

2.5.2 获取位置getLocation

2.5.3 打开地图选择位置chooseLocation

2.5.4 使用应用内置地图查看位置openLocation

2.6 页面的交互反馈

2.6.1 显示/隐藏消息框showToast/hideToast

2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading

2.6.3 显示模态弹窗showModal

---

第一章、常用设置的api

1.1 tabBar导航配置

• 其目标就是设置小程序的导航栏

"tabBar": {
		"selectedColor": "#c00000", //选中时的颜色
		"list": [
			{
				"pagePath": "pages/home/home", //tabBar路径
				"text": "首页", // tabBar文字
				"iconPath": "static/tab_icons/home.png", // 未选中时的图片颜色
				"selectedIconPath": "static/tab_icons/home-active.png" //选中时的图片颜色
			},
			{
				"pagePath": "pages/cate/cate",
				"text": "分类",
				"iconPath": "static/tab_icons/cate.png",
				"selectedIconPath": "static/tab_icons/cate-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tab_icons/my.png",
				"selectedIconPath": "static/tab_icons/my-active.png"
			}
		]
	}

1.2 subPackages分包配置

• 设置分包，一些暂时未打开的页面，等下次需要加载该页面的时候再加载，也是一种优化

"subPackages": [{
		"root": "subpkg",  //根目录
		"pages": [	
			{
				"path" : "goods/goods", //再文件夹subpkg配置对应的路径
				"style" :{
					"navigationBarTitleText": "商品信息",
					"enablePullDownRefresh": false
				}    
			},
            {
                "path" : "goods_list/goods_list",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "商品列表",
                    "enablePullDownRefresh": true,
					"onReachBottomDistance": 150,
					"backgroundColor": "#007AFF"
                }   
            },
			{
			        "path" : "search/search",
			        "style" :                                                                                    
			    {
			        "navigationBarTitleText": "搜索页面",
			        "enablePullDownRefresh": false
			    } 
			}
            ]
	}],

1.3 enablePullDownRefresh下拉刷新配置

• 开启下拉刷新："enablePullDownRefresh": true

{
   "path" : "goods_list/goods_list",
   "style" :                                                                                    
   {
        "navigationBarTitleText": "商品列表",
        "enablePullDownRefresh": true, //开启下拉刷新
		"backgroundColor": "#007AFF"  //开启之后的一些设置
    }   
},

1.4 onReachBottomDistance上拉刷新配置

• 设置上拉刷新：距离底部多长记录进行上拉刷新

{
    "path" : "goods_list/goods_list",
    "style" :                                                                                    
    {
        "navigationBarTitleText": "商品列表",
		"onReachBottomDistance": 150, //开启上拉刷新
    }   
}

第二章、页面常用逻辑api

2.1请求数据

2.1.1 网络请求uni.request

请求接口
apiRequest(){
	let url = 'https://apirequest LOVE snow.net';
	//网络请求api
    uni.request({
		 url:url, // 请求路径
		 data:{}, // 参数
		 header:{}, // 请求头
		 method:'GET', // 请求方法
		 timeout:10000, // 超时请求
		 dataType:'json',// 默认json，请求数据类型
		 success: (res) =>{ // 成功时的回调
		 	console.log(res);
		 },
		 fail: (err) => { // 失败时的回调
		 	console.log(JSON.stringify(err));
		 }
	})
}

2.2 文件上传与下载(图片、文件…)

• App支持多文件上传，微信小程序只支持单文件上传
• 支持多图上传

2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument

文件上传
下载


//上传文件
onuploadFlie(){
    uni.chooseFile({
        count: 1, //默认100
        type:'file', //仅H5支持
        extension:['.doc', '.docx', '.pdf', '.pptx', '.ppt', '.xls', '.xlsx','.zip'], //选择上传文件的格式
	    success: function (res) {
	    	console.log(JSON.stringify(res.tempFilePaths));
	    }
    });
}
//下载文件并打开文件
ondownloadFile(){
    uni.downloadFile({
	url: 'https://www.example.com/file/test', //下载文件的路径
	success: (res) => {
        var filePath = res.tempFilePath; //文件路径
		uni.openDocument({ //打开下载完成的路径
            filePath: filePath, //文件路径
            showMenu: true,
            success: function (res) {
               console.log('打开文档成功');
            }
       });
	}
});
}

2.2.2 图片上传chooseImage与下载downloadFile

图片上传
下载

data() {
	return {
		downloadfile:''
	}
},
onuploadphoto(){ //上传图片
	uni.chooseImage({
		count:1, // 上传图片的数量
		sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType:['album'], //从哪里选择图片(案例从相册选择)
		success: (res) => {
			console.log(JSON.stringify(res)); // 成功了查看图片信息
		},
		fail: () => {
			console.log(JSON.stringify(err));
		}
	})
},
ondownload(){ //下载图片
	uni.downloadFile({	url:'https://www.example.com/file/test', // 这里是图片接口地址 直接 url拼接参数可
	timeout:30000, //超时
        headers:{} , //是否需要携带请求头
        methods:'GET'/'POST', //是否需要添加请求方法
		success: (res) => {
			console.log(JSON.stringify(res));  //显示图片的信息
			this.downloadfile = res.tempFilePath;    //显示图片
		},
		fail: (err)=>{
			console.log(JSON.stringify(err));
		}
	})
}

2.3 页面跳转

2.3.1 跳转到非tabBar页面navigateTo

uni.navigateTo({
	url:'url'
});

2.3.2 跳转到tabBar页面navigateTo

uni.switchTab({
	url: '/pages/index/index'
});

2.3.3 针对非tabBar的页面回退navigateBack

uni.navigateBack({
	delta: 2
});
uni.navigateBack() //默认delta回退1时不用写

2.4 数据缓存

2.4.1 本地存储指定的键值对setStorage与setStorageSync

• 使用setStorageSync(同步存储)

//一般使用该方法
uni.setStorageSync('key',value) -->同步

uni.setStorage('key',value) -->异步

2.4.2 获取本地存储键对应的值getStorage与getStorageSync

• 使用的getStorageSync(同步获取)

//一般使用该方法
uni.getStorageSync('key')

uni.getStorage('key')

2.4.3 移除缓存removeStorage与removeStorageSync

//一般使用该方法
uni.removeStorageSync('key')

uni.removeStorage('key')

2.4.4 清空缓存clearStorage与clearStorageSync

//一般使用该方法
uni.clearStorageSync()

uni.clearStorage()

2.5 位置

2.5.1 配置地图详细信息

• uniapp+腾讯地图/高德地图开发：

uniapp官方文档map组件：map | uni-app官网

 腾讯地图官方文档：微信小程序JavaScript SDK | 腾讯位置服务

 高德地图官方文档：概述-iOS 地图SDK | 高德地图API

•  腾讯地图注册--->登录--->控制台--->开发文档--->微信小程序--->申请密钥--->创建应用--->自行命名以及选择功能--->添加key--->key的名称自行命名--->选择微信小程序--->输入APPID:wxce1cc86465385309--->添加
• 开通webserviceAPI服务：控制台->应用管理->我的应用->添加key->勾选webserviceAPI->保存即可
• 补充腾讯地图key的选项：下载微信小程序javaScriptSDK v1.1/v1.2
• --->最后，配置小程序请求域名https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

2.5.2 获取位置getLocation

• 返回的是经纬度

获取地图位置

onGetLocal(){
    uni.getLocation({
	    type: 'wgs84',  //默认为 wgs84 返回 gps 坐标
	    success: function (res) { //必填
		    console.log('当前位置的经度：' + res.longitude);
		    console.log('当前位置的纬度：' + res.latitude);
	    }
    });
}

2.5.3 打开地图选择位置chooseLocation

打开地图选择位置

onChooseLocal(){
	uni.chooseLocation({
		success: (res) => {
			console.log('位置名称：' + res.name);
		    console.log('详细地址：' + res.address);
		    console.log('纬度：' + res.latitude);
		    console.log('经度：' + res.longitude);
		}
    })
}

2.5.4 使用应用内置地图查看位置openLocation

uni.getLocation({
	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
	success: function (res) {
		const latitude = res.latitude;  //获取经度
		const longitude = res.longitude; //获取纬度
		uni.openLocation({
			latitude: latitude, //经度
			longitude: longitude, //纬度
			success: function () { //成功
				console.log('success');
			}
		});
	}
});

2.6 页面的交互反馈

2.6.1 显示/隐藏消息框showToast/hideToast

uni.showToast({
	title: '标题', //标题 (必填)
	duration: 2000, //延迟时间
    icon: 'loading', //图标
    image: '',  //自定义图标路径
    mask:true //是否显示透明蒙层，防止触摸穿透，默认false
    position: center //位置，仅app生效
    success: (res) => {
		console.log(res);
	}
});

uni.hideToast();

2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading

uni.showLoading({
	title: '加载中'，
    mask:true //是否显示透明蒙层，防止触摸穿透，默认false
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

2.6.3 显示模态弹窗showModal

• 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。

显示提示框

onShowModel(){
	uni.showModal({
		title:'提示标题',  //提示标题
		content:'这是提示内容', //提示内容
		showCancel:false,    //是否展示取消按钮，默认为true
        cancelText: '取消',    //取消按钮的文字，默认为"取消"
		confirmText:'确定',  //确定按钮的文字，默认为"确定"
		editable:true,    //是否显示输入框
		success: (res) => {
			console.log(res);
			if(res.confirm){  //点击确定时 做后续操作
				console.log('确定'); //例如发送请求啊等等
			}
		}
	})
}

第三章、调用手机功能的api

3.1 扫码二维码 uni.scanCode

点我扫一扫


scan(){
	uni.scanCode({
		scanType: ['barCode','qrCode'], //识别二维码的类型
		onlyFromCamera: false,   //是否只允许扫描(扫描/扫描+相册)
		success: function (res) {
			console.log('条码类型：' + res.scanType);
			console.log('条码内容：' + res.result);
		}
	});
},

3.2 点击拨打电话号码 

177****5849

call(){
	uni.makePhoneCall({
		phoneNumber: '177****5849' //需要拨打的手机号
	});
}

更具体请看官网：

uniapp官网api文档：uni-app官网