uniapp总结笔记

当前跨平台开发存在的问题
（1）多端泛滥成灾
（2）用户体验不好
（3）生态不丰富
（4）bug一堆堆

uni-app特点：

1.跨平台更多：一套代码，适应各种版本
2.运行体验更好：组件、api与微信小程序一致，兼容weex原生渲染。
3.通用技术栈，学习成本更低 vue的语法、微信小程序的标签和api，内嵌mpvue开源框架
4.开放生态，组件更丰富：支持npm安装第三方包，，支持微信小程序自定义组件及SDK，兼容mpvue组件及项目，App端支持和原生混合编码，Dcloud将发布插件市场
开发一次，多端覆盖：各种小程序、android、ios、H5。

1、数据的绑定

2、注册事件和传递参数

3、生命周期函数的学习

应用的周期函数
onLaunch：初始化完成时触发（全局只触发一次）
onShow ：启动时，或从后台进入前台是显示
onHide：从前台进入后台
onError：报错时触发

页面的周期函数
onLoad：监听页面加载，参数为上个页面传递的参数，参数类型为对象（触发一次）
onShow：监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回，返回到当前页面
onReady：监听页面初次渲染完成（触发一次）
onHide：监听页面隐藏
onUnload：监听页面卸载
onResize：监听窗口尺寸变化
onPullDownRefresh：监听用户下拉动作，一般用户下拉刷新，与onLoad生命周期函数同级

4、下拉刷新onPullDownRefresh

开启下拉刷新

onPullDownRefresh () {
   
   
    //刷新初始化数据
    this.size = 10
    this.current = 1 
    //调用获取数据的函数
    this.getData() 
    //关闭刷新动画
    setTimeout(function () {
   
   
        uni.stopPullDownRefresh() 
    }, 1000)
},

监听下拉刷新

关闭下拉刷新

代码简单实现

5、上拉加载 onReachBottom

const SIZE = 10
data(){
   
   
    return {
   
   
        size: 10,
        current: 1
    }
}
//上拉加载函数
onReachBottom(){
   
   
    let that = this
    //每次上拉加载的数据比上一次多十个
    that.size += SIZE
    setTimeout(()=>{
   
   
        that.getData()
    },1000)
}

以上就是持续更新的uni-app入门总结，希望对你有帮助哟