使用mpvue框架,以及vant-weapp的程序员UI框架时,遇到的坑及解决办法。

89 篇文章 7 订阅
21 篇文章 0 订阅

1、mpvue中使用vant-weapp的方式

2、mpvue引入vant-weapp后,mpvue自动将px转换为rpx单位的问题

参考
https://www.jianshu.com/p/5fb497ec2e5d

如果不想自己写的单位被mpvue转换,就将px单位写为PX, 大写的就不会转换为rpx单位了。

如果想把vant-weapp的px单位转换为rpx, 就需要修改配置文件。

在build/webpack.base.conf.js中安装上面的连接修改

var relative = require('relative')

// 添加+++++++
var Px2rpx = require('px2rpx');
var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });
// +++++++

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

// 修改这个配置函数内的代码
   new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: path.resolve(config.build.assetsRoot, './static'),
        transform(content, path) {
            if (path.endsWith('.wxss')) {
                return px2rpxIns.generaterpx(content.toString(), 1)
            } else {
                return content
            }
        },
        ignore: ['.*']
      }
    ])

然后重新打包编译,就生效了。

3 使用vant-weapp vant-field 表单组件,没有办法双向数据绑定?

对的,微信本身也没有这个,mpvue也没有实现表单的双向数据绑定。需要认为的触发监听change事件,自己改动data中的值。
对的,就是这么坑。就是这么坑。

<van-field
   :value="phoneNum"
   clearable
   maxlength="11"
   placeholder="请输入手机号码"
   @change="changePhoneNum"
 />
 changePhoneNum (v) {
   this.phoneNum = v.mp.detail
 },

主要,获取值的时候,不要忘了mp 哦!!!
ps 为啥不上MLGB,????

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值