uni-app —— 使用Vue.js注意事项

Janice
1,633 阅读4分钟

本篇仅仅为uni-app入门时结合Vue.js框架进行知识点的积累，大多知识点为整理前人的博客所得；深入的学习笔记将会在上手实践后更新！

uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法。尽管如此，uni-app仍是对vue语法支持度最高的跨端框架。

一、生命周期

uni-app 完整支持 Vue 实例的生命周期，同时还新增 应用生命周期 及 页面生命周期。

1、应用生命周期

Tips:

  • 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

2、页面生命周期

Tips:

  • 避免在 onShow 里使用需要权限的 API（比如 setScreenBrightness() 等需要手机权限）, 可能会再次触发onShow造成死循环。

二、模板语法

uni-app 完整支持 Vue 模板语法。

Vue 模板语法

三、data 属性

data 必须声明为返回一个初始数据对象的函数,且函数内返回的数据对象不要直接引用函数外的对象，否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

//正确用法，使用函数返回对象
data() {
    return {
        title: 'Hello'
    }
}

//错误写法，会导致再次打开页面时，显示上次数据
data: {
    title: 'Hello'
}

//错误写法，同样会导致多个组件实例对象数据相互影响
const obj = {
  title: 'Hello'
}
data() {
    return {
    obj
  }
}

四、全局变量方法的实现

1、公用模块

只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。适用于定义接口baseURL、公共函数、日期处理函数等。

做法：

  • 在 uni-app 项目根目录下创建 common 目录；
  • 在 common 目录下新建 helper.js 用于定义公用的方法；
  • 在需要引入该模块的页面导入。
// helper.js
const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  

export default {  
    websiteUrl,  
    now,  
}

<script>  
    import helper from '../../common/helper.js';  // 也可以通过{websiteUrl}导入一个全局变量或方法
    export default {  
        onLoad(){  
            console.log('now:' + helper.now());  
        },  
    }  
</script>

2、挂载 Vue.prototype

只支持vue页面。适用于将axios等全局通用的模块进行挂载。

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 实例对象都会“继承”下来。

// main.js
Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  

<script>  
    export default {  
        onLoad(){  
            console.log('now:' + this.now());  
        },   
    }  
</script>

3、globalData

支持vue和nvue共享数据，在Vue.js框架没有涉及到。

在 App.vue 定义 globalData ，同时使用 API 读写这个值。

// App.vue
<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },    
    }
</script>  

// 赋值：
getApp().globalData.text = 'test'
// 取值：
console.log(getApp().globalData.text) // 'test'

4、Vuex

HBuilderX 2.2.5+起，支持vue和nvue之间共享。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。适用于集中管理项目的登录状态、用户信息、设备信息等。

// 1、在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值
const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

// 在 main.js 挂载 Vuex
import store from './store'  
Vue.prototype.$store = store

// 在页面使用
<script>  
    import {  
        mapState,  
        mapMutations  
    } from 'vuex';  

    export default {  
        computed: {  
            ...mapState(['avatarUrl', 'login', 'userName'])  
        },  
        methods: {  
            ...mapMutations(['logout'])  
        }  
    }  
</script>

五、Class 与 Style 绑定

通过Vue实例上的变量来控制元素的样式。

// class 支持的语法:
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

//style 支持的语法:
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

六、key

在v-for中，使用 :key 来指定列表中item的唯一标识符。当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，从而提高列表渲染时的效率。

key可赋值为每一个列表项的id或列表项本身，不推荐采用每一个列表项的index（原因：当在列表插入或删除时，index便会改变，key也会因此而容易改变，从而降低列表渲染效率）。

        <view v-for="(item,index) in objectArray" :key="item.id">
            {{index +':'+ item.name}}
        </view>

七、事件处理器

uni-app的事件处理几乎全部支持Vue的事件处理

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

TIPS：

  • 为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。

  • 事件修饰符

    .stop：各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为

    .prevent 仅在 H5 平台支持

    .self：仅在 H5 平台支持

    .once：仅在 H5 平台支持

    .capture：仅在 H5 平台支持

    .passive：仅在 H5 平台支持

  • 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。 <view class="mask" @touchmove.stop.prevent="moveHandle">

  • 按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

avatar
文章
阅读
粉丝