uniapp基础知识点掌握以及面试题整理
发布时间：2023-02-16 13:04:49 所属栏目：Java 来源：互联网
导读：uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下 1.uniapp优缺点 优点: a. 一套代码可以生成多端 b. 学习成本低,语法是vue的,组件
|
小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。 8.jQuery、vue、小程序、uni-app中的本地数据存储和接收 jQuery： 存：$.cookie('key','value') 取：$.cookie('key') vue： 存储：localstorage.setItem（‘key'，‘value'） 接收：localstorage.getItem（‘key'） 微信小程序： 存储：通过wx.setStorage/wx.setStorageSync写数据到缓存 接收：通过wx.getStorage/wx.getStorageSync读取本地缓存， uni-app： 存储：uni.setStorage({key:“属性名”，data:“值”}) //异步 uni.setStorageSync(KEY,DATA) //同步 接收：uni.getStorage({key:“属性名”,success(res){res.data}}) //异步 uni.getStorageSync(KEY) //同步 移除：uni.removeStorage(OBJECT) //从本地缓存中异步移除指定 key。 uni.removeStorageSync(KEY) //从本地缓存中同步移除指定 key。 清除：uni.clearStorage() //清理本地数据缓存。 uni.clearStorageSync() //同步清理本地数据缓存。 9.页面调用接口 getApp() 函数 用于获取当前应用实例，一般用于获取globalData getCurrentPages() 函数 用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 uni.e m i t ( e v e n t N a m e , O B J E C T ) 和 u n i . emit(eventName,OBJECT)和uni.emit(eventName,OBJECT)和uni.on(eventName,callback) ：触发和监听全局的自定义事件 uni.o n c e ( e v e n t N a m e , c a l l b a c k ) ：监听全局的自定义事件。事件可以由 u n i . once(eventName,callback) ：监听全局的自定义事件。事件可以由 uni.once(eventName,callback)：监听全局的自定义事件。事件可以由uni.emit 触发，但是只触发一次，在第一次触发之后移除监听器。 uni.$off([eventName, callback])：移除全局自定义事件监听器。 注意：uni.e m i t 、 u n i . emit、 uni.emit、uni.on 、 uni.o n c e 、 u n i . once 、uni.once、uni.off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等 10.全局变量globalData //app.vue <script> export default { globalData: { msg: 'hello world' } } </script> //在其他页面调用/修改全局变量 getApp().globalData.msg= 'hello world' 11. vue,小程序,uni-app的生命周期 vue： beforeCreate（创建前） created（创建后） beforeMount(载入前，挂载） mounted（载入后） beforeUpdate（更新前） updated（更新后） beforeDestroy（销毁前） destroyed（销毁后） 小程序/uni-app： 1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 2. onShow：加载完成后、后台切到前台或重新进入页面时触发 3. onReady：页面首次渲染完成时触发 4. onHide：从前台切到后台或进入其他页面触发 5. onUnload：页面卸载时触发 6. onPullDownRefresh：监听用户下拉动作 7. onReachBottom：页面上拉触底事件的处理函数 8. onShareAppMessage：用户点击右上角转发 12.unaipp中组件生命周期： 13.路由与页面跳转 uniapp的页面跳转和小程序是一样的，都是跳转配置好的页面路径， 并且tab页面也是需要使用switchTab才能实现跳转，总体上和小程序保持一致，对于熟练小程序的朋友上手没有难度，反之，当你习惯了uniapp的页面切换组件后上手小程序也很快。 14.跨端适配—条件编译 开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。因此就有了条件编译这个模式，不仅是js逻辑代码，template和css样式都可以设置成在某个环境中生效，在其他环境不生效 //template <!-- #ifdef MP-WEIXIN --> <!-- 只在小程序中生效 --> <view>我是微信小程序</view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <!-- 只在 app 中生效 --> <view>我是 app </view> <!-- #endif --> //js // #ifndef H5 // 表示只有 h5 不使用这个 api uni.createAnimation(OBJECT) // #endif //css /* #ifdef MP-WEIXIN */ /* 只在小程序中生效 */ .header { color:red } /* #endif */ 更多详细信息及平台适配请看官方文档 15.uniapp上传文件时使用的api //选择文件 uni.chooseFile({ count: 6, //默认100 extension:['.zip','.doc'], success: function (res) { console.log(JSON.stringify(res.tempFilePaths)); } }); // 选择图片文件 uni.chooseFile({ count: 10, type: 'image', success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFiles } }) 16.简述 rpx、px、em、rem、%、vh、vw的区别 rpx 相当于把屏幕宽度分为750份，1份就是1rpx px 绝对单位，页面按精确像素展示 em 相对单位，相对于它的父节点字体进行计算 rem 相对单位，相对根节点html的字体大小来计算 % 一般来说就是相对于父元素 vh 视窗高度，1vh等于视窗高度的1% vw 视窗宽度，1vw等于视窗宽度的1% 17.jq、vue、uni-app、小程序的页面传参方式区别 1、 jq传参 通过url拼接参数进行传参。 2、 vue传参 一、 vue可以通过标签router-link跳转传参，通过path+路径，query+参数 二、 也可以通过事件里的this.$router.push（{}）跳转传参 3、 小程序/uniapp传参 通过跳转路径后面拼接参数来进行跳转传参 //示例 // navigate.vue页面接受参数 onLoad: function (option) { const item = JSON.parse(decodeURIComponent(option.item)); } 或者我们也可以自己封装一个解析携带参数数据的函数，然后在所需的页面引用即可，详细应用及思想可以看我另一篇文章，分享了自己对于入参处理的函数 自行封装入参获取函数 18.组件间通信 uniapp的组件通信基本上与vue框架下组件通信是一致，如果是学习过vue框架的同学，那么基本上没有任何阻碍，能够快速的在uniapp上实现组件间通信，还有些许疑惑的同学可以看我之前整理的这篇短文回顾下组件间通信方法集 （编辑：十堰站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
