mpvue - 注意事项

落日映苍穹つ 2021-09-30 04:10 518阅读 0赞

#### 命名格式 ####

**组件名不要和微信的组件名重名**  
    以下为微信自带组件  
        view、scroll-view、swiper、movable-view、cover-view、icon、text、rich-text、progress、button、checkbox、form、input、label、picker、picker-view、radio、slider、switch、textarea、navigator、audio、image、video、camera、live-player、live-pusher、map、open-data、web-view、ad

**mpvue不支持的组件名**  
    以下为保留关键字，暂不支持作为组件名：  
        a、canvas、cell、content、countdown、datepicker、div、element、embed、header、image、img、indicator、input、link、list、loading-indicator、loading、marquee、meta、refresh、richtext、script、scrollable、scroller、select、slider-neighbor、slider、slot、span、spinner、style、svg、switch、tabbar、tabheader、template、text、textarea、timepicker、trisition-group、trisition、video、view、web

#### mpvue中img标签 ####

*  tempalte模板中的img标签url指向相对路径时不能正确解析
 *  tempalte模板中img标签用绝对路径引入
 *  css中可以通过相对路径引入图片
 *  一般采用变量导入的形式使用图片（使用网络连接图片最佳）

#### mpvue写法注意 ####

**组件导入**

// 不支持
    import { LTabbar, LTabbarItem } from '@/components/tabbar' 
    // 只支持单文件引用
    import LTabbar from '@/components/tabbar'
    import LTabbarItem from '@/components/tabbar-item'

**v-for**  
        v-for里边必须加:key

**created声明周期**

所有页面里面的`created`生命周期函数都会在小程序加载的时候，`一次性执行`，而`不是`每进入一个页面执行一次  
        解决方法：  
        用小程序的 `onload()`/ vue 的 `mounted()`

**组件中的onShow**

`组件`第`一`次加载的时候`不能执行onShow`里面的内容，`只有在隐藏又显示后`，`才会显示`，而页面却每次进入都会显示  
例如我们在一个组件里有一下代码

**事件**  
        小程序中的bind事件，在 mpvue 框架中要写成 vue 的事件绑定形式,就像`:bindchange`写成`@change`  
    对于一些在小程序中绑定值的属性，组件中的 value，在 mpvue 框架中要写成 `:value="date"`,`bindgetuserinfo` 要写成 `@getuserinfo`。

#### 触发事件取值问题 ####

对于一些回调函数，比如getuserinfo,在原生小程序中，获取信息为：e.detail,但在mpvue中，获取方式为：e.mp.detail。  
    小程序：

event.detail = {value: value}

在 mpvue中要这样写：

event.mp.detail = {value: value}

#### 文件夹首字母不能大写 ####

#### 两层v-for不能用index的名字来作为索引 ####

#### mpvue不支持方面 ####

*  不支持Vue-router，但是可以使用vue-router-patch
 *  不支持 纯-HTML，小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
 *  不支持部分复杂的 JavaScript 渲染表达式 我们会把 template 中的 \{ \{\}\} 双花括号的部分，直接编码到 wxml，文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 `+`,`-`,`*`,`%`,`?:`, `! ==`,`===`.`>`,`<`, `[]`，不支持ES6的 `${}`

### 小程序部分 ###

在 input 和 textarea 中 change 事件会被转为 blur 事件

小程序能力所致，`bind`和 `catch` 事件同时绑定时候，只会触发 `bind` ,`catch`不会被触发，要避免踩坑

#### 获取小程序在 page onLoad 时候传递的 options ####

在所有 页面 的组件内可以通过 `this.$root.$mp.query`进行获取。

#### 获取小程序在 app onLaunch/onShow 时候传递的 options ####

在所有的组件内可以通过 `this.$root.$mp.appOptions` 进行获取。

#### 下拉加载 ####

下拉加载需要在配置中设置开启,并且需要在方法中调用`wx.stopPullDownRefresh()`方法结束下拉动作，不然在真机上面下拉效果无法收起

链接：[https://www.jianshu.com/p/184db91b101d][https_www.jianshu.com_p_184db91b101d]

[https_www.jianshu.com_p_184db91b101d]: https://www.jianshu.com/p/184db91b101d