mpvue踩坑记

最新推荐文章于 2023-03-07 18:36:10 发布

weixin_43743956

最新推荐文章于 2023-03-07 18:36:10 发布

阅读量662

点赞数

CC 4.0 BY-SA版权

分类专栏：个人踩坑文章标签： mpvue

本文链接：https://blog.youkuaiyun.com/weixin_43743956/article/details/84783276

个人踩坑专栏收录该内容

6 篇文章

订阅专栏

本文分享了在使用MPVue框架开发过程中遇到的各种问题及解决方案，包括代码移植、组件封装、样式添加、生命周期管理等，提供了针对小程序和H5开发的具体技巧。

0.0 mpvue不知道抽什么风，pull下来后install报错
在这里插入图片描述
搞了好久，把代码移植到2.0版本以上，搞定

0.mpvue踩坑-未找到入口 app.json 文件，或者文件读取失败，请检查后重新编译
https://cloud.tencent.com/developer/article/1393925
在这里插入图片描述

1.在安卓手机下，应用vant的picker组建和mpvue进行开发组件

<li>
          <span>性别</span>
          <input type="text" name="name" placeholder="选择性别" v-model="sexInput" readonly @click="showPicker(sex,'sexInput')">
          <span >></span>
          <popup-picker :col="col" :models="models" ref="minePopup" @getSelectValue="getSelectValue"></popup-picker>
        
</li>

就是封装了vant的组建picker，点击input，弹出选择框。用手机测试时，会弹出输入框，并且弹出选择框。因为，点击input ，手机会默认弹出输入法。input加上readonly即可，即只读，不能输入。
(注意在小程序中的input没有readonly这个属性，很奇葩吧，是的。所以在小程序中只能用一层透明的遮罩层实现点击input时不弹出输入法)

2.vue项目中，跳转外部链接方法

<span @click='toOuter'>点击跳转外部链接</span>

methods:{
toOuter(){
	window.location.href='你想跳转的地址'
}
}

3.判断当前h5页面是在微信内打开的h5页面还是在浏览器中打开的页面（微信内也能打开h5）

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

3.mpvue不能为组件添加样式（vue可是能添加的啊?）
在这里插入图片描述

4.在mpvue中 null是按字符串打印出来(在一些数据返回是null，会按null输出，记住做兼容)

<div>{{ha}}</div>

//<div>{{ha || ''}}</div> 那么null的情况就会不输出

data(){return{
ha:null
}}

在vue中null不会显示在页面，但是在mpvue会当作字符串输出。

5.采用px2rem-loader和px2rpx-loader（mpvue默认已经配置）进行分别对h5和小程序代码的打包
https://www.cnblogs.com/KDSER/p/9767886.html

6.mpvue slot不能插入动态数据(就是父组件不能利用slot，v-for，变量等传进数据)

7.mpvue不支持transition，只能通过css样式来进行动画效果
8.mpvue不支持destoryed生命周期，官方文档没有说明。用onHide（navigator）或onUnload（switchTab）代替
9.wx.showToast提示，调试分享链接的地址，http://127.0.0.1:8080/aaa.html?user_key=932a8e7abe0252caa0c8b3c5a781c7a5&userToken=U2FsdGVkX18YrYtdORxRDaZa8OvXoInROhe6yHnO281xiW2Fp4jMZKafWk9Gi1mR，
不会换行，然后只显示一部分，给这个坑了好久，以为没传到参

10.mpvue中父组件，调用子组件中的方法
this.$mp.page.selectComponent('#brandArr').setInit(9999)