uniapp基础知识点掌握以及面试题整理

发布时间：2023-02-16 13:04:49 所属栏目：Java 来源：互联网

导读：uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下 1.uniapp优缺点优点: a. 一套代码可以生成多端 b. 学习成本低,语法是vue的,组件

"iconPath": "static/农场_36稻草人.png",
　　                "selectedIconPath": "static/农场_28蜜蜂.png",
　　                "text": "测试页面"
　　            }
　　        ]
　　    }
　　}

　　6.页面设计开发
　　基础设置完成后就可以直接在页面上开发了，uniapp的语法承袭vue，熟悉vue的同学可以快速的上手

　　7.vue , 微信小程序 , uni-app属性的绑定
　　vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
　　小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。

　　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
　　
　　
　　<view>我是微信小程序</view>
　　
　　
　　
　　
　　<view>我是 app </view>
　　
　　
　　//js
　　// #ifndef H5
　　// 表示只有 h5 不使用这个 api
　　uni.createAnimation(OBJECT)
　　// #endif
　　
　　//css
　　/* #ifdef MP-WEIXIN */
　　/* 只在小程序中生效 */
　　.header {
　　    color:red
　　}
　　/* #endif */
　　更多详细信息及平台适配请看官方文档

　　15.uniapp上传文件时使用的api
　
　　//1.在pages.json文件里找到需要下拉刷新的页面pages节点，并在 style 选项中开启enablePullDownRefresh。
　　{
　　            "path": "pages/index/index",
　　            "style": {
　　                "navigationBarTitleText": "首页",
　　                "enablePullDownRefresh": true
　　            }
　　        },
　　//2.在页面中调用监听下拉事件函数
　　onPullDownRefresh() {
　　        //do some
　　        this.Fn()
　　    }
　　//3.获取数据完毕后调用停止下拉刷新动画
　　Fn(){
　　//可以在调用的函数中获取接口数据或则操作其他事项
　　//调取完毕后停止下拉刷新动画
　　 uni.stopPullDownRefresh();
　　}

　　21.uniapp实现上拉加载
　　uniapp中的上拉加载是通过onReachBottom()这个生命周期函数实现，当下拉触底时就会触发。我们可以在此函数内调用分页接口请求数据，用以获取更多的数据

　　onReachBottom() {
　　        let data = this.data;
　　        let pageNum = data.pageNum;

（编辑：十堰站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5/6

首页

尾页