1.生命周期
1.1应用的生命周期
1.onLaunch ——当uni-app 初始化完成时触发(全局只触发一次)
2.onShow——当 uni-app 启动,或从后台进入前台显示
3.onHide——当 uni-app 从前台进入后台
4.onError——当 uni-app 报错时触发
5.onUniNViewMessage——对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯
6.onUnhandledRejection——对未处理的 Promise 拒绝事件监听函数(2.8.1+)
7.onPageNotFound——页面不存在监听函数
8.onThemeChange——监听系统主题变化
1.2页面的生命周期
1.onInit——监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为Object(用于页面传参),触发时机早于 onLoad
2.onLoad——监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
3.onShow——监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面4.onReady——监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
5.onHide——监听页面隐藏
6.onUnload——监听页面卸载
7.onResize——监听窗口尺寸变化
1.3组件的生命周期
1.beforeCreate——在实例初始化之后被调用。
2.created——在实例创建完成后被立即调用。
3.beforeMount——在挂载开始之前被调用。
4.mounted——挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
5.beforeUpdate——数据更新时调用,发生在虚拟DOM打补丁之前。
6.updated——由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
7.beforeDestroy——实例销毁之前调用。在这一步,实例仍然完全可用。
8.destroyed——Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
2.Uniapp中的本地缓存
同步存储:uni.setStorageSync获取:uni.getStorageSync异步存储:uni.setStorage获取:uni.getStorage
3.Uniapp 中的路由跳转
uni.navigateTo({url:})保留当前页面,只能打开非 tabBar 页面。
uni.redirectTo({})关闭卸载当前页面,只能打开非 tabBar 页面
uni.switchTab打开 tabBar 页面,不能url传参
uni.reLaunch({})关闭卸载所有页面,可以打开任意页面
4.条件编译
#ifdef:ifdefined 仅在某平台存在
#ifndef:ifnot defined 除了某平台均存在
%PLATFORM%:平台名称
5.uniapp的配置文件、入口文件、主组件、页面管理部
pages.json
配置文件,全局页面路径配置,应用的状态栏、导航条、标题、窗口背景色设置等
main.js
入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex,注意uniapp无法使用vue-router,路由须在pages.json中进行配置。如果开发者坚持使用vue-router,可以在插件市场找到转换插件。
App.vue
是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。除此之外,应用生命周期仅可在App.vue中监听,在页面监听无效。
pages
页面管理部分用于存放页面或者组件
manifest.json
文件是应用的配置文件,用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录,CLI 创建的工程此文件在 src 目录。
package.json
配置扩展,详情内容请见官网描述package.json概述
全局变量globalData的理解
globalDate和微信小程序中一样,是定义在全局上的对象,他类似于vuex,用来共享全局状态,在组件和页面中可以使用getApp().globalData来获取和修改全局变量。
//app.vue
<script>
export default {
globalData: {
msg: 'hello world'
}
}
</script>
//在其他页面调用/修改全局变量
getApp().globalData.msg= 'hello world'
6.rpx、px、em、rem、%、vh、vw的区别是什么?
rpx 相当于把屏幕宽度分为750份,1份就是1rpxpx 绝对单位,页面按精确像素展示em 相对单位,相对于它的父节点字体进行计算rem 相对单位,相对根节点html的字体大小来计算% 一般来说就是相对于父元素vh 视窗高度,1vh等于视窗高度的1%vw 视窗宽度,1vw等于视窗宽度的1%
7.页面样式兼容
1.在ios键盘中首字母大写的问题?
<input type="text" autocapitalize='off'>
2. ios日期转换NAN问题
具体就是,new Date('2020-11-12 00:00:00')在ios中会为NAN
解决方案:用new Date('2020/11/12 00:00:00')的日期格式,或者写个正则转换
3. 在移动端使用click事件有300ms延迟的问题
禁止双击缩放===》meta:user-scalabel=no
4. 移动端touch事件有穿透(点透)的问题,怎么解决?
4.1 阻止默认行为 : e.preventDefault();
4.2 fastclick.js
5. 安卓部分版本input的placeholder偏上
input{
line-height:normal;
}
2. ios日期转换NAN问题 具体就是,new Date('2020-11-12 00:00:00')在ios中会为NAN 解决方案:用new Date('2020/11/12 00:00:00')的日期格式,或者写个正则转换
3. 在移动端使用click事件有300ms延迟的问题 禁止双击缩放===》meta:user-scalabel=no4. 移动端touch事件有穿透(点透)的问题,怎么解决?
7 阻止默认行为 : e.preventDefault(); 4.2 fastclick.js5. 安卓部分版本input的placeholder偏上 input{ line-height:normal; }
8.uniapp获取地理位置的API是什么?
uni.getLocation
16.请简要介绍一下UniApp中的导航栏组件。
在UniApp中,导航栏组件用于实现页面的顶部导航栏,并提供了一些常用的配置选项。
UniApp中常见的导航栏组件是uni-navigator,它可以在页面中嵌入导航栏,并通过属性进行配置。以下是uni-navigator组件的一些常用属性:
title:指定导航栏标题文字。
color:设置导航栏文字颜色。
background-color:设置导航栏背景颜色。
back-icon:设置返回按钮的图标样式。
home-icon:设置首页按钮的图标样式。
float:设置导航栏是否浮动(悬浮模式),用于实现下拉时导航栏显示或隐藏。
除了uni-navigator组件,UniApp还提供了其他导航相关的组件,如:
uni-NavBar:适用于App端的导航栏组件,提供了更多的定制化和交互功能。
uni-tab-bar:底部导航栏组件,用于实现多个页面之间的切换。
uni-segmented-control:分段器组件,用于实现页面内的切换导航。
通过使用这些导航栏组件,可以在UniApp中轻松地创建和配置导航功能,提升应用程序的用户体验。
uniapp 中的路由是怎样实现的?请介绍基本用法。
Uniapp 中的路由是由框架自带的 Vue Router 实现的。基本用法如下:
在 pages.json 文件中配置页面路径和需要加载的页面组件。
在页面组件中使用 <template>、<script> 和 <style> 标签,其中 <template> 标签中是页面的内容,<script> 标签中定义页面组件的相关属性,<style> 标签中定义页面的样式。
使用 uni.navigateTo() 或 uni.redirectTo() 方法进行页面跳转。
uni.navigateTo() 方法用于从当前页面跳转到新页面,并向新页面传递数据,即保留当前页面,跳转到新页面。新页面可以通过 uni.getOpenerEventChannel() 获取当前页面的 EventChannel 对象,以便进行数据传递。
uni.redirectTo() 方法用于关闭当前页面,跳转到新页面,即不保留当前页面。
在页面组件中使用 this.$route.params 获取上一个页面传递的参数,并使用 this.$route.query 获取页面跳转时传递的参数。
使用 uni.navigateBack() 方法返回上一个页面,可以通过 delta 参数设置返回的层数。
除了基本用法,还可以通过路由守卫实现一些高级用法,例如页面访问权限控制、页面访问记录等。
9.分包
因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。所谓的主包,即放置默认启动页面及TabBar页面,而分包则是根据 pages.json的配置进行划分。在小程席启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示,此时终端界面会有等待提示。subPackages":[
"root":"news"
"pages":[(
"path":"index"
style":"navigationBarTitleText":“新闻中心"
"navigationBarBackgroundColor":“#FFFFFF""navigationBarTextStyle":"black","backgroundColor":"#FFFFFF"
10.获取当前用户的手机信息
uni-app提供了异步( uni.getsystemInfo)和同步( unigetsystemInfosync )的2个API获取系统信息。系统信息返回的内容非常多,各操作系统、各家小程序、各浏览器对它们的定义也不相同。un-app里重新梳理了这些念,同时为了向下兼容也保留了这些平台原来的概念,但不推荐使用。按照运行环境层级排序,从底层向上,uni-app有6个概念: device(抵歪丝) : 运行应用的设备,如iphone、huawei os : 设备的操作系统,如 ios、andriod、windows、 mac、 linux rom : 基于操作系统的定制,Android系统特有概念,如miui、鸿蒙 host :运行应用的宿主程序,即OS和应用之间的运行环境,如浏览器、微信等小程序宿主、集成uniMPSDK的App,un-app直接开发的app没有host概念 uni : uniapp框架相关的信息,如uni-app框架的编译器版本、运行时版本 app : 开发者的应用相关的信息,如应用名称、版本
12.监听到下拉刷新的动作
需要用到uni.onPullDownRefresh和uni.stopPullDownRefresh这两个函数,函数与生命周期同等级可以监听页面下拉动作
13.uniapp实现上拉加载
uniapp中的上拉加载是通过onReachBottom()这个生命周期函数实现,当下拉触底时就会触发。我们可以在此函数内调用分页接口请求数据,用以获取更多的数据
14. 在Uniapp中,如何使用原生SDK以及插件?
在Uniapp中,可通过uni-app plus的方式来集成原生SDK和插件。具体实现方式是,在manifest.json文件中添加对应的插件设置,并在代码中调用相关API使用内置的SDK和插件。15. 描述一下在Uniapp中如何实现动态路由。在Uniapp中,可通过vue-router实现动态路由。具体实现方式是,在定义路由时,使用动态路由参数设置路由的路径,然后在组件中通过$route.params来获取路由参数,以便进行页面的动态渲染。
15.小程序的发布流程(开发流程)
1.申请注册微信小程序账号,注意:注册账号之后会有一个AppID,下载微信开发者工具,新建项目的时候需要填上,否则很多功能用不了,比如不能预览、不能上传代码等问题。
2.通过微信开发工具新建项目。
3.根据业务需求配置小程序,并进行业务代码的开发。
4.如果涉及到发送请求,需要在小程序后台管理页面配置服务器合法域名,或者关闭域名校验(部署则必须配置合法域名,域名必须是https协议的,并且已经备案了)(这里有可能问http和https的区别)
5.开发完成之后点击上传代码可以将小程序发不到体验版
6.体验版确定无误后提交审核,审核通过后就可以正式上线了。