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

2023-07-16 22:11:27

一、使用Vue.js注意事项

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

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

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

使用uni-app的onReady ：代替vue的mounted
使用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

公用模块缺点：

// 在 uni-app 项目根目录下创建 common 目录，

// 然后在 common 目录下新建 helper.js 用于定义公用的方法。

export default { …… }

// 在 pages/index/index.vue 中引用该模块

import helper from '../../common/helper.js';

缺点：每次都需要引用

挂载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 这样

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 Show')

           },

           onHide: function() {

                 console.log('App Hide')

           }

     }

</script>

// 使用API赋值和取值 —— getApp().globalData.XXX

赋值：getApp().globalData.text = 'test'

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

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 语法

<view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>

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 来指定列表中项目的唯一的标识符
两种形式： 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的区别：

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

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

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

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

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

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

六、表单控件绑定

直接使用uni-app：表单组件 https://uniapp.dcloud.io/component/button
v-html指令：非H5端，不支持v-html

七、组件

Vue组件

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

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

uni-app组件

UI组件： https://uniapp.dcloud.io/component/
注意：原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

全局组件

在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件

注意：Vue.component 的第一个参数必须是静态的字符串

// main.js 注册全局组件

import Vue from 'vue'

import pageHead from './components/page-head.vue'

Vue.component('page-head',pageHead)

// index.vue里使用page-head全局组件

<template>

    <view>

        <page-head></page-head>

    </view>

</template>

八、区别于传统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里配置。这与小程序的策略相同。

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

九、其他开发注意事项

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

组件遵守Vue规范：

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

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

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

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

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

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框架下

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

注：以上内容来自UniApp官网

码农公寓

相关文章