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

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,????

你可能感兴趣的:(小程序,前端技术积累,vue)