uniapp

220 阅读4分钟

1.

uni.request(OBJECT)

发起网络请求。 必填参数 url 2.

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data3.**** ##路由跳转方式

image.png

4.页面通信

uni.$emit(eventName,OBJECT)

触发全局的自定义事件,附加参数都会传给监听器回调函数。

属性类型描述
eventNameString事件名
OBJECTObject触发事件携带的附加参数

5.数据缓存

image.png

uni.clearStorage()

清理本地数据缓存。

uniapp清除本地数据缓存的方法及详细步骤

blog.csdn.net/weixin_4607…

6.位置

uni.getLocation(OBJECT)

获取当前的地理位置、速度。 返回经纬度 打开最下面源码视图 "permission" : { ... }, "requiredPrivateInfos": [ //新增此配置 "getLocation" ] //如果配置后仍然定位失败,降低小程序IDE调试内库为稳定版,2.25.0等...

把经纬度转换城市数据(使用第三方API) step1. 找到高德免费API,转换坐标 lbs.amap.com/api/webserv… step2. 注册账号,申请对应的key,注意key的范围不要选错了(这里用的是web服务 key) step3. 找到接口,发送请求,携带对应参数

uni.openLocation(OBJECT)

使用应用内置地图查看位置。 7.媒体 7.1录音

uni.getRecorderManager()

获取全局唯一的录音管理器 recorderManager。 7.2文件

uni.chooseFile(OBJECT)

从本地选择文件。

#uni.createInnerAudioContext()

7.3音频 创建并返回内部 audio 上下文 innerAudioContext 对象。 7.4视频

uni.chooseVideo(OBJECT)

拍摄视频或从手机相册中选视频,返回视频的临时文件路径。

8.系统授权 设置

image.png

9.拨打电话

uni.makePhoneCall(OBJECT)

拨打电话。

uni.makePhoneCall({
	phoneNumber: '114' //仅为示例
});

10.扫码

uni.scanCode(OBJECT)

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

// 只允许通过相机扫码
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

// 调起条码扫描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

调起客户端扫码界面,扫码成功后返回对应的结果。

11.剪切板

uni.setClipboardData(OBJECT)

设置系统剪贴板的内容。

uni.getClipboardData(OBJECT)

获取系统剪贴板内容。

12.### 生物认证说明

生物认证,又称活体检测。它包含指纹识别、人脸识别这两部分。即通过人体身体特征来进行身份认证识别。

uni.startSoterAuthentication(OBJECT)

开始 SOTER 生物认证。

uni.checkIsSupportSoterAuthentication(OBJECT)

获取本机支持的 SOTER 生物认证方式

13.键盘操作

image.png

14.设置当前页面的标题

#uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

uni.setNavigationBarColor(OBJECT)

设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖

uni.showNavigationBarLoading(OBJECT)

在当前页面显示导航条加载动画。 15设置 tabBar

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

uni.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

16.背景

uni.setBackgroundColor(OBJECT)

uni.setBackgroundColor({
    backgroundColor: '#ffffff',
    backgroundColorTop: '#222222',
    backgroundColorBottom: '#333333'
});

动态设置窗口的背景色。

uni.setBackgroundTextStyle(OBJECT)

uni.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
})

动态设置下拉背景字体、loading 图的样式。

17动画

uni.createAnimation(OBJECT)

创建一个动画实例 调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

18.滚动

uni.pageScrollTo(OBJECT)

uni.pageScrollTo({
	scrollTop: 0,
	duration: 300
});

将页面滚动到目标位置。 19.下拉刷新

uni.startPullDownRefresh(OBJECT)

开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。 pages.json 里面

{
    "pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "uni-app",
        		"enablePullDownRefresh": true
        	}
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "white",
    	"navigationBarBackgroundColor": "#0faeff",
    	"backgroundColor": "#fbf9fe"
    }
}

在js里面

// 仅做示例,实际开发中延时根据需求来使用。
export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

20.文件 文件保存,获取列表,删除等对于文件的操作 image.png

21.绘画

image.png

22.登陆 获取用户信息

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
    // 获取用户信息
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        console.log('用户昵称为:' + infoRes.userInfo.nickName);
      }
    });
  }
});

23.分享

uni.share

说明provider 支持度
0图文weixin、sinaweibo
1纯文字weixin、qq
2纯图片weixin、qq
3音乐weixin、qq
4视频weixin、sinaweibo
5小程序weixin

24.支付

uni.requestPayment(OBJECT)

25.授权

uni.authorize(OBJECT)

uni.authorize({
    scope: 'scope.userLocation',
    success() {
        uni.getLocation()
    }
})

26.组件

image.png

image.png

image.png

27. Uni-app 创建项目有哪两种方法****

创建 uni-app 项目有两种方式:第一种是通过官方的开发者工具 HBuilder 来创建,第二种是通过 vue-cli 命令行创建**。****

28. 兼容多端****

uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。

但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

· 大量写 if else,会造成代码执行性能低下和管理混乱。

· 编译到不同的工程后二次修改,会让后续升级变的很麻烦。

在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

29媒体组件

image.png

image.png

30地图 map

image.png