一、一句话总的形容一下uniapp与vue和微信小程序的异同点

        简单来讲Uni-app就是用着vue的指令和小程序的组件和API

二、Uniapp中配置tabbar的方式

见之前的单独文章——

(3条消息) Uni-app中的tabBar的配置_终将抵达丶的博客-CSDN博客_uniapp设置tabbar图片大小https://blog.csdn.net/gkx19898993699/article/details/127559442?spm=1001.2014.3001.5502

三、Uniapp中常见的组件

        text

        view

View 视图容器， 类似于 HTML 中的 div

        button

        image

四、Uniapp中常用的指令语句

        v-for：循环渲染 （注意加：key）

        v-if ：控制元素的删除添加       

        v-show：控制元素的显示隐藏

        v-model：双向数据绑定

        v-on：事件绑定（简写@）

        v-bind：属性绑定（简写：）

五、Uniapp应用的生命周期、页面的生命周期、组件的生命周期

详情见我的另一篇单独文章——

(3条消息) Uni-app中的生命周期_终将抵达丶的博客-CSDN博客https://blog.csdn.net/gkx19898993699/article/details/127559613?spm=1001.2014.3001.5502

六、注意下拉刷新和触底加载的使用

1.监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {data () {return {arr: ['前端','java','ui','大数据']}},methods: {startPull () {uni.startPullDownRefresh()}},onPullDownRefresh () {console.log('触发下拉刷新了')}
}

2.关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

3.上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

七、Uniapp中的条件注释（不同平台）

详情见我的另一篇单独文章——

(3条消息) Uni-app条件注释的跨端兼容_终将抵达丶的博客-CSDN博客_uniapp注解https://blog.csdn.net/gkx19898993699/article/details/127558653?spm=1001.2014.3001.5502

八、uni.request的使用及封装

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

示例：

OBJECT 参数说明

更多详情请查询官网——

uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/request/request.html

九、Uniapp中的本地缓存

（一）同步

1.存储：uni.setStorageSync

2.获取：uni.getStorageSync

（二）异步

1.存储：uni.setStorage

2.获取：uni.getStorage

（三）删除

        uni.removeStorageSync

从本地缓存中同步移除指定 key。

十、Uniapp中的跳转方式（navigator标签、uni.navigateTo方法）及传参

1.利用navigator标签进行跳转

navigator详细文档：文档地址

        跳转到普通页面

跳转到关于页面

        跳转到tabbar页面

跳转到message页面

2.利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

跳转到关于页面

通过navigateTo方法进行跳转到普通页面

goAbout () {uni.navigateTo({url: '/pages/about/about',})
}

3.通过switchTab跳转到tabbar页面

跳转到tabbar页面

跳转到message页面

通过switchTab方法进行跳转

goMessage () {uni.switchTab({url: '/pages/message/message'})
}

4.redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

跳转到message页面

goMessage () {uni.switchTab({url: '/pages/message/message'})
}

传参方式

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {uni.navigateTo({url: '/pages/about/about?id=80',});
}

接收参数的页面

十一、Uniapp中组件的创建以及使用和传参方式

（一）组件的创建

        在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

        1.创建login组件，在component中创建login目录，然后新建login.vue文件

        2.在其他组件中导入该组件并注册

import login from "@/components/test/test.vue"

        3.注册组件

components: {test}

        4.使用组件

（二）组件间的通讯

        1.父传子

子组件中：通过props来接受外界传递到组件内部的值

父组件中：在使用login组件的时候传递值

        2.子传父

 （1）父组件定义自定义事件并接收参数

（2）通过$emit触发事件进行传递参数

十二、Uniapp中的事件总线

详情见我的另一篇单独文章——

(3条消息) Uni-app中的事件总线_终将抵达丶的博客-CSDN博客https://blog.csdn.net/gkx19898993699/article/details/127558358?spm=1001.2014.3001.5502