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

Uniapp 中配置tabbar的方式 

Uniapp 中常见的组件(说几个即可)

Uniapp 中常用的指令语句

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

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

uni.request 的使用及封装

Uniapp中的本地缓存

Uniapp 中的跳转方式(navigator 标签、uni.navigateTo方法) 及传参

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

 

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

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

2. Uniapp 中配置tabbar的方式 

"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "iconPath": "static/bottomTabBar/home2_icon.png",
                "selectedIconPath": "static/bottomTabBar/home1_icon.png",
                "text": "分享"
        },
        {
            "pagePath": "pages/read/read",
            "iconPath": "static/bottomTabBar/readTrain2_icon.png",
            "selectedIconPath": "static/bottomTabBar/readTrain1_icon.png",
            "text": "阅读"
        }, {
            "pagePath": "pages/mine/mine",
            "iconPath": "static/bottomTabBar/mine2_icon.png",
            "selectedIconPath": "static/bottomTabBar/mine1_icon.png",
            "text": "我的"
        }]
    }

3. Uniapp 中常见的组件(说几个即可)

view：视图容器。
属性名    类型    默认值    说明
hover-class    String    none    指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation    Boolean    false    指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time    Number    50    按住后多久出现点击态，单位毫秒
hover-stay-time    Number    400    手指松开后点击态保留时间，单位毫秒
icon：图标
属性名    类型    默认值    说明
type    String        icon的类型
size    Number    23    icon的大小，单位px
color    Color        icon的颜色，同css的color
text：文本组件。
属性名    类型    默认值    说明    平台差异说明
selectable    Boolean    false    文本是否可选    App、H5、快手小程序
user-select    Boolean    false    文本是否可选    微信小程序
space    String        显示连续空格    App、H5、微信小程序
decode    Boolean    false    是否解码    App、H5、微信小程序

4. Uniapp 中常用的指令语句

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

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

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

        v-model：双向数据绑定

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

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

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

一、应用的生命周期
1.onLaunch——当uni-app 初始化完成时触发（全局只触发一次）

2.onShow——当 uni-app 启动，或从后台进入前台显示

3.onHide——当 uni-app 从前台进入后台

4.onError——当 uni-app 报错时触发

5.onUniNViewMessage——对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

6.onUnhandledRejection——对未处理的 Promise 拒绝事件监听函数（2.8.1+）

7.onPageNotFound——页面不存在监听函数

8.onThemeChange——监听系统主题变化 

二、页面的生命周期
1.onInit——监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad

2.onLoad——监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例

3.onShow——监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

4.onReady——监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

5.onHide——监听页面隐藏

6.onUnload——监听页面卸载

7.onResize——监听窗口尺寸变化
三、组件的生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同

1.beforeCreate——在实例初始化之后被调用。

 2.created——在实例创建完成后被立即调用。

3.beforeMount——在挂载开始之前被调用。

4.mounted——挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档

5.beforeUpdate——数据更新时调用，发生在虚拟 DOM 打补丁之前。

6.updated——由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7.beforeDestroy——实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed——Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

6.注意下拉刷新和触底加载的使用

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

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

7. uni.request 的使用及封装

<template>
    <view>
        <button @click="getList"></button>
    </view>
</template>
<script>
    export default {
        methods: {
            getList () {
                uni.request({
                    url: 'http://localhost:8080/api/getlist',
                    success(res) {
                        console.log(res)
                    }
                })
            }
        }
    }
</script>

8. Uniapp中的本地缓存

同步存储：uni.setStorageSync，获取：uni.getStorageSync
异步存储：uni.setStorage，获取：uni.getStorage

9. Uniapp 中的跳转方式(navigator 标签、uni.navigateTo方法) 及传参

标签法：<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>
跳转tabBar页面加open-type="switchTab"

页面跳转uni.navigateTo({url:})保留当前页面，只能打开非 tabBar 页面。uni.redirectTo({})关闭卸载当前页面，只能打开非 tabBar 页面
tabBar跳转uni.switchTab关闭所有非tabbar页面， 只能打开 tabBar 页面，不能url传参
uni.reLaunch({})关闭卸载所有页面，可以打开任意页面

10. Uniapp 中组件的创建以及使用和传参方式

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
传参方法：父传子，子传父，全局，事件总线