uniapp focus ios端获取键盘高度 计算键盘弹起到底部的距离

文章目录

• 前言
• 一、uni-app是什么？
• 二、uni-app基础语法

• 1.组件的基本使用

• 1.1text文本组件的用法

• 1.1.1 text 组件的属性
• 1.1.2 代码案例

• 1.2 view视图容器组件的用法

• 1.2.1 view组件的属性
• 1.2.2 代码案例

• 1.3button按钮组件的用法

• 1.3.1 button组件的属性
• 1.3.2 代码案例

• 1.4 image按钮组件的用法

• 1.3.1 image组件的属性

• 三、uni-app中的样式
• 四、uni-app的生命周期

• 1.应用的生命周期
• 2.页面的生命周期
• 3.组件的生命周期

• 五、uni-app的数据缓存

• 1.uni.setStorage
• 2.uni.setStorageSync
• 3.uni.getStorage
• 4. uni.getStorageSync
• 5. uni.removeStorage
• 6. uni.removeStorageSync

• 六、uni-app配置tabbar
• 七、uni-app路由跳转

• 1. 利用navigator进行跳转
• 2. 利用编程式导航进行跳转
• 3. 导航跳转传递参数

• 八、uniapp中的nvue
• 九、uniapp中自定义组件的封装及使用
• 十、uniapp如何请求接口
• 十一、uniapp的那些坑

• 1.selectedColor不起作用
• 2.pages中配置的颜色不起作用
• 3.input框被输入键盘覆盖
• 4.设置单个页面的背景色

• 总结

---

前言

和我一起走进uni-app，探索uni-app的密码，揭开uni-app的神秘面纱

---

一、uni-app是什么？

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验uni-app 继承自 Vue.js，提供了完整的 Vue.js 开发体验。

uni-app 组件规范和扩展api与微信小程序基本相同。

有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ，开发出兼容多端的应用。

uni-app提供了条件编译优化，可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。

uni-app打包到App时仍然使用了5+引擎，5+的所有能力都可以在uni-app中可以使用。在App端运行性能和微信小程序基本相同。

对于技术人员而言：不用学那么多的平台开发技术、研究那么多前端框架，学会基于vue的uni-app就够了。
对于公司而言：更低成本，覆盖更多用户，uni-app是高效利器。 uni-app多端演示

为方便开发者体验uni-app的组件、接口、模板，DCloud发布了Hello
uni-app演示程序（代码已开源，详见Github），Hello
uni-app实现了一套代码，同时发布到iOS、Android、微信小程序。

二、uni-app基础语法

uni-app是以vue作为框架进行编译的基本语法与vue相同，方法是微信小程序的方法

1.组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用 uni-app中的组件，就像 HTML中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

1.1text文本组件的用法

1.1.1 text 组件的属性

text 组件相当于行内标签、在同一行显示
除了文本节点以外的其他节点都无法长按选中

1.1.2 代码案例

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>来了老弟</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>来了  老弟</text>
  </view>
  <view>
    <text space='emsp'>来了  老弟</text>
  </view>
  <view>
    <text space='nbsp'>来了  老弟</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>  < > & '    </text>
</view>

1.2 view视图容器组件的用法

View 视图容器， 类似于 HTML 中的 div

1.2.1 view组件的属性

1.2.2 代码案例

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

  </view>
</view>

1.3button按钮组件的用法

1.3.1 button组件的属性

button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

1.3.2 代码案例

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

1.4 image按钮组件的用法

1.3.1 image组件的属性

组件默认宽度 300px、高度 225px；
src 仅支持相对路径、绝对路径，支持 base64 码；
页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

三、uni-app中的样式

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
• 支持基本常用的选择器class、id、element等
• 在 uni-app 中不能使用 * 选择器。
• page 相当于 body 节点
• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
• uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
• 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
• 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
• 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

• 如何使用scss或者less：在style标签中使用lang="scsc"或者lang="less"来声明样式开启了这两个属性

四、uni-app的生命周期

1.应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

• uni-app 支持如下应用生命周期函数：

2.页面的生命周期

uni-app 支持如下页面生命周期函数：

3.组件的生命周期

beforeCreate：组件初始化，但数据原生观测、自定义观测(event\watcher)没生成之前。 未完全创建阶段
created：组件创建后，但还未挂载 完全创建阶段
beforeMount：组件渲染后，挂载前。 渲染后待挂载
mounted： 组件挂载到页面 可用 vm.$el 访问 挂载OK
beforeUpdate： 虚拟 DOM 重新渲染和打补丁之前 再次渲染前
updated ： 组件 DOM 已经更新 再次渲染后
activated： keep-alive 组件激活时调用。 当前组件被激活：显示
deactivated： keep-alive 组件停用时调用。 当前组件隐藏
beforeDestroy： 实例销毁之前调用。实例仍然完全可用。 销毁前
destroy： Vue 实例销毁后调用

五、uni-app的数据缓存

1.uni.setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorage({
				 	key: 'id',
				 	data: 100,
				 	success () {
				 		console.log('存储成功')
				 	}
				 })
			}
		}
	}
</script>

<style>
</style>

2.uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorageSync('id',100)
			}
		}
	}
</script>

<style>
</style>

3.uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				id: ''
			}
		},
		methods: {
			getStorage () {
				uni.getStorage({
					key: 'id',
					success:  res=>{
						this.id = res.data
					}
				})
			}
		}
	}
</script>

4. uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			getStorage () {
				const id = uni.getStorageSync('id')
				console.log(id)
			}
		}
	}
</script>

5. uni.removeStorage

从本地缓存中异步移除指定 key。

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorage({
					key: 'id',
					success: function () {
						console.log('删除成功')
					}
				})
			}
		}
	}
</script>

6. uni.removeStorageSync

从本地缓存中同步移除指定 key。

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorageSync('id')
			}
		}
	}
</script>

六、uni-app配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个
tab，tab 按数组的顺序排序。

属性说明：

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text": "我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}

七、uni-app路由跳转

1. 利用navigator进行跳转

跳转到普通页面：

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

2. 利用编程式导航进行跳转

利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面
跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

redirectTo进行跳转
关闭当前页面，跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}

3. 导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

接收参数的页面

<script>
	export default {
		onLoad (options) {
			console.log(options)
		}
	}
</script>

八、uniapp中的nvue

uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力（比如各种push sdk集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。

uni-app 的 nvue 说白了就是 weex 的那一套东西，uni-app 集成了 weex 的 SDK，也就实现了 App 端的原生渲染能力。

九、uniapp中自定义组件的封装及使用

在项目根目录下，创建 components 文件夹，新建文件myinput.vue。

<template name="myinput">
<view>
    <input class="myinput" type="text" placeholder="请输入信息" value="" />
</view>
</template>

<script>
export default {
  name: 'myinput',
  props: {
            
  },
  data() {
    return {
                
    }
  },
  methods: {
            
  }
}
</script>

<style>
.myinput{padding: 20upx;background: #f4f5f6;}
</style>

在index.vue中引用：

<myinput></myinput>

<script>
import myinput from '../../components/myinput.vue'
export default {
    components:{
    myinput
    },
}
</script>

十、uniapp如何请求接口

在main.js文件中配置：

//Vue.prototype.$baseUrl="http://192.168.1.164/api"   //线下接口  
Vue.prototype.$baseUrl="https://m.demo.com/api"  //线上接口


在demo.vue页面中请求：
//GET-请求数据
getInfo(){
    uni.request({
          url: `${this.$baseUrl}/api-demo/getDemoById?lid=${lid}&page=${this.page}&pagesize=${this.pagesize}`,  //这里的lid,page,pagesize只能是数字或字母
          method: 'GET',
          success: (res)=>{},
          fail: (err)=>{}
    })
}
注：携带在url里的参数只能是数字或字母，不能是中文字符。若参数中含有中文字符，比如搜索功能，则需要将参数携带在data中。如下：data:params

//POST-发送json格式请求
sendInfo(){
    let params = {
          "phone":this.userphone,
          "name":this.username
    }
    uni.request({
          url: `${this.$baseUrl}/api-demo/send`,
          method: 'POST',
          data: params,
          success: (res)=>{},
          fail: (err)=>{}
    })  
}

//POST-发送FormData格式请求
sendInfo(){
    let params = {
          "phone":this.userphone,
          "name":this.username
    }
    let headers={
          "Content-Type":"application/x-www-form-urlencoded"  //设置一下请求头即可
    }
    uni.request({
          url: `${this.$baseUrl}/api-demo/send`,
          method: 'POST',
          header: headers,
          data: params,
          success: (res)=>{},
          fail: (err)=>{}
    })  
}

//请求接口时携带token
sendInfo(){
    let params = {
          "phone":this.userphone,
          "name":this.username
    }
    let headers={
          "Content-Type":"application/x-www-form-urlencoded",
          "Token":`this.userToken`   //设置一下token即可
    }
    uni.request({
          url: `${this.$baseUrl}/api-demo/send`,
          method: 'POST',
          header: headers,
          data: params,
          success: (res)=>{},
          fail: (err)=>{}
    })  
}

十一、uniapp的那些坑

1.selectedColor不起作用

1.查看位置是否写对，与lis同级

2.是否为16进制，selectedColor写的rgb不支持

3.是否被其他样式覆盖，其他地方也设置过selectedColor，可以全局搜索一下

2.pages中配置的颜色不起作用

注意，pages中的某些配置，是只支持某些颜色，或者是只支持16进制，当某个颜色不起作用，可以查看官网是否有颜色的限制，或者切换成white,black,16进制试试
3.input框被输入键盘覆盖

3.input框被输入键盘覆盖

input这些输入框，有一个自带的属性，可以设置键盘到输入框的距离

设置样式后正常

4.设置单个页面的背景色

直接在单个页面的样式中

---

总结

上面简单介绍了一些uniapp的方法以及会遇到的一些坑