【重点突破】—— UniApp 微信小程序开发官网学习Two

一、使用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 也会是未定义的

• 模板语法：uni-app完整支持Vue模板语法
• data属性： 必须声明为函数，返回一个初始数据对象【否则：页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据】

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

• 全局变量：实现全局变量的方式——遵循Vue单文件模式的开发规范http://ask.dcloud.net.cn/article/35021

1. 公用模块缺点：

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

   缺点：每次都需要引用
2. 挂载Vue.prototype：将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。

   //  在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()); 
       }, 
   }
   

   注意： 每个页面中不要在出现重复的属性或方法名。在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。比如 $url、global_url 这样

3. globalData：不是标准Vue语法，是兼容小程序的方式。小程序中可以在App上声明全局变量。uni-app中在App.vue可以定义在globalData属性上，也可以使用API读写这个值。

   //  定义App.vue
   <script> 
        export default { 
              globalData: { 
                     text: 'text' //全局变量
              }, 
              onLaunch: function() { 
                    console.log('App Launch') 
              }, 
              onShow: function() { 
                    console.log('App