【重点突破】—— 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
   
   
   // 使用API赋值和取值 —— getApp().globalData.XXX
   
   赋值：getApp().globalData.text = 'test'
   取值：console.log(getApp().globalData.text) // 'test'　　

4. Vuex：更适合处理全局的并且值会发生变化的情况

   // 在 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 —— store
   
   import 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绑定

• Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中
• 不支持：classObject 和 styleObject 语法

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

  非H5端暂不支持在自定义组件上使用 Class 与 Style 绑定　　

• 可以用 computed 方法生成 class 或者 style 字符串，插入到页面中

• 注意：以: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端，手机端没有键盘事件，不支持按键修饰符

 

六、表单控件绑定

• 直接使用uni-app：表单组件 https://uniapp.dcloud.io/component/button
• 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. UI组件： https://uniapp.dcloud.io/component/
2. 注意：原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

• 全局组件

1. 在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件
2. 注意：Vue.component 的第一个参数必须是静态的字符串

   // 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生态

• uni-app插件市场（ui库和模块）：https://ext.dcloud.net.cn

• uni-app内置组件（常用，与微信内置组件相同）：https://uniapp.dcloud.io/component/README

• uni-app扩展组件（uni ui， 可单下或整体引入）：https://uniapp.dcloud.io/component/README?id=uniui

• 原作者直接维护的成套收费UI库graceUI ：https://ask.dcloud.net.cn/article/35381 

• 开源UI库colorUI ：http://ext.dcloud.net.cn/plugin?id=239

• 在线文档：http://ext.dcloud.net.cn/plugin?id=239

• 语雀知识库：https://www.yuque.com/colorui

• github地址：https://github.com/weilanwl/ColorUI/

• 初步使用教程：https://blog.csdn.net/IT_TIfarmer/article/details/88380308

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

• vant weapp集成示例：http://ext.dcloud.net.cn/plugin?id=302

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

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

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

 

---

注：以上内容来自UniApp官网