一、使用Vue.js注意事项

• Vue.js在uni-app中使用的差异：

1. 新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期
2. 受限：发布到H5时支持所有vue的语法， 在小程序和App端部分功能受限

• 生命周期：Vue实例生命周期+应用生命周期+页面生命周期

1. 使用uni-app的onReady ： 代替vue的mounted
2. 使用uni-app的onLoad ： 代替vue的created

• 注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的

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

// 在 uni-app 项目根目录下创建 common 目录，
// 然后在 common 目录下新建 helper.js 用于定义公用的方法。
export default { …… }// 在 pages/index/index.vue 中引用该模块
import helper from '../../common/helper.js'; 　　　　

//  在main.js中挂载属性/方法
Vue.prototype.now = Date.now || function () {
    return new Date().getTime();
};//  在 pages/index/index.vue 中调用
export default {
    data() {
         return {};
    },
    onLoad(){
         console.log('now:' + this.now());
    },
}

//  定义App.vue
// 使用API赋值和取值 —— getApp().globalData.XXX赋值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text) // 'test'　　

// 在 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 —— storeimport store from './store'
Vue.prototype.$store = store// 在 pages/index/index.vue 使用import {
      mapState,
      mapMutations
} from 'vuex';export default {
      computed: {
            ...mapState(['avatarUrl', 'login', 'userName'])
      },
      methods: {
            ...mapMutations(['logout'])
      }
}

二、Class与Style绑定

data() {
    return {
        activeClass: {
            'active': true,
            'text-danger': false
        },
        baseStyles: {
            color: 'green',
            fontSize: '30px'
        },
        overridingStyles: {
           'font-weight': 'bold'
        }
   }
}

• 注意：以:style=””这样的方式设置px像素值，其值为实际像素，不会被编译器转换。

四、计算属性、条件渲染、列表渲染 —— 完整支持Vue语法

• key

1. 动态列表：需要使用 :key 来指定列表中项目的唯一的标识符
2. 两种形式： v-for循环array中的item，或item具有唯一性的property

五、事件处理器

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    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'
}

• tap和click的区别：

1. 两者都会在点击时触发，但是在web手机端，clikc会有200-300ms的延时，所以要用tap代替click作为点击事件，singleTap和doubleTap分别作为单次点击和双击，但是使用tap会带来点透事件(事件穿透)。
2. tap：手指触摸后马上离开；longtap： 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

• 微信小程序的bind事件、catch事件触发机制 —— 事件绑定和冒泡

• 事件绑定的写法同组件的属性，key: value的形式

1. key以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart
2. 基础库版本1.5.0起， bind和catch后可以紧跟一个冒号，含义不变，如bind: tap
3. value是一个字符串，需要在对应的Page中定义同名的函数。否则触发事件会报错。
4. 区别：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
5. 注意：其他组件自定义事件如无特殊声明都是非冒泡事件
6. 如
   的submit事件，的input事件，的scroll事件

• uni-app的事件处理器   注意：

1. 为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定
2. 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent=”moveHandle”，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数
3. 事件修饰符  —–  .stop：各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为，其它事件修饰符，仅支持H5端，手机端没有键盘事件，不支持按键修饰符

六、表单控件绑定

• v-html指令：非H5端，不支持v-html

七、组件

• Vue组件

1. 有且只能使用单文件组件（.vue 组件）的形式进行支持。（支持v-if）
2. 不支持：动态组件、异步组件、组件里使用 slot 嵌套的其他组件时不支持 v-for、

• click等原生事件、v-show、class style样式属性、Slot、keep-alive、transition

• uni-app组件

1. 注意：原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange=”eventName” 事件，需要写成 @change=”eventName”

• 全局组件

// main.js 注册全局组件
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)// index.vue里使用page-head全局组件
　　

八、区别于传统Web开发的注意

• JS注意

非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象

• Tag注意

uni-app的tag同小程序的tag，和HTML的tag不一样。比如div要改成view，span要改成text、a要改成navigator

• CSS注意

推荐使用flex布局模型，单位默认是upx，rpx只兼容微信和APP端

• 工程目录注意

每个要显示的页面，都要放到pages目录下，新建一个页面所在的目录，然后放同名目录的vue文件，比如project/pages/lista/lista.vue，并且在pages.json里配置。这与小程序的策略相同。

• 自定义组件，放到component目录

静态资源如图片，固定放到static目录下。这是webpack、mpvue的规则

九、其他开发注意事项

• 组件内（页面除外）不支持onLoad生命周期。

• 组件遵守Vue规范：

1. 不要修改props的值；
2. 组件最外层template节点下不允许包含多个节点

• 编译后遇到异常，要看浏览器的控制，而不是HBuilderX的控制台。浏览器的控制台会有错误提示

• 如果你遇到了白屏或网络不给力的提示，一般是跨域问题： 解决方法有两种。

1. 服务器打开跨域限制；
2. 本地浏览器安装跨域插件

正式发行时，部署在同域名的服务器上，就不会有跨域报警了，如果部署在不同域名下，仍然需要服务器调整实现接口的跨域访问

• CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度

• fixed定位的组件有可能遮挡框架内置UI组件，如果不希望遮挡可以分平台判断，在H5平台避开内置UI

• 如果你的界面大幅变形，估计是因为单位使用了px。需改用upx，upx才是全端均通用的单位

• 使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览（localhost）可以使用 http 协议

• 为避免和内置组件冲突，自定义组件请加上前缀（但不能是u和uni）。另外微信小程序下自定义组件名称不能以wx开头。

• 在tabBar页面，如果page高度设置为100%时，页面超出滚动会导致底部被tabbar遮挡，可在tabbar页面去掉height:100%或者改用min-height:100%

十、uni-app生态

• 如果确定只开发微信小程序和App，也可以使用微信的自定义组件ui

• 注意：开发时首先用基础组件，基础组件不满足的地方，再通过扩展组件补充。

• 不要把整个项目全部都构建在某个ui框架下

1. uni-app体系和web开发体系不同，uni-ui库全部都是扩展组件，不含基础组件
2. 请开发者务必牢记基础组件的作用，基础组件的性能是高于扩展组件的。

注：以上内容来自UniApp官网