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、数据的绑定

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tHf6OVNM-1623892137570)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618122637900.png)]$

2、注册事件和传递参数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b3tIIsUS-1623892107894)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618122690263.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxy14yzn-1623892107897)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618122709846.png)]$

3、生命周期函数的学习

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cS7BXIu0-1623892107899)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618123556661.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5g0kcq4-1623892107901)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618123662407.png)]$ 页面的周期函数 onLoad：监听页面加载，参数为上个页面传递的参数，参数类型为对象（触发一次） onShow：监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回，返回到当前页面 onReady：监听页面初次渲染完成（触发一次） onHide：监听页面隐藏 onUnload：监听页面卸载 onResize：监听窗口尺寸变化 onPullDownRefresh：监听用户下拉动作，一般用户下拉刷新，与onLoad生命周期函数同级

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZyI1yrQ-1623892107902)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618123587286.png)]$

4、下拉刷新onPullDownRefresh

开启下拉刷新

在这里插入图片描述

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

监听下拉刷新

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GMbFQJaw-1623892107904)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618124349990.png)]$

关闭下拉刷新

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fs3fPvYR-1623892107905)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618124403927.png)]$

代码简单实现

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyvmartz-1623892107906)(C:\Users\张盼盼\AppData\Roaming\Typora\typora-user-images\1618124439739.png)]$

5、上拉加载 onReachBottom

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

Uni-app入门持续更新中篇幅(一)持续更新中......