mpvue支持 #444

wangwei123 · 2018-08-21T03:39:37Z

能否支持mpvue呢，看起来mpvue会成为主流
有个叫touchUI的，组件很丰富，能否参考借鉴一下呢

zhaohuwei · 2018-08-21T03:47:39Z

mpvue已经能支持小程序自定义组件，换言之也就支持了vant-weapp。
目前还有少数兼容性问题，其实可以自己解决一下。

GodStream · 2018-08-21T08:43:55Z

直接npm安装引入，组件并没有生效

ruixiu · 2018-08-24T04:41:44Z

touchUI和https://meili.github.io/min/index.html可像，不知道谁抄的谁

vopdoo · 2018-08-27T04:06:50Z

环境

node v8.11.1

npm v6.4.0

重现步骤

初始化项目

vue init mpvue/mpvue-quickstart vantweappnotify

直接通过 git 下载 Vant Weapp 源代码，并将dist目录拷贝到项目中的static下并重命名为vant
```
git clone https://github.com/youzan/vant-weapp.git
```

在页面中的main.json 引入组件并在页面中

{
  "usingComponents": {
    "van-button": "../../static/vant/button/index",
    "van-notify": "../../static/vant/notify/index"
  }
}

<template>
    <div class="container">
        <van-button type="default" @click="showNotify">测试Notify</van-button>
    </div>
</template>

<script>
    // import Notify from '../../../static/vant/notify/index';
    export default {
        data() {
            return {}
        },
        methods: {
            showNotify() {
                console.info('showNotify');
                // console.info(Notify);
                // Notify('测试文案...');
            },
        },
        created() {
        }
    }
</script>

<style scoped>

</style>

运行
```
npm install
npm run dev 
```
微信开发者工具增加小程序项目勾选ES6 转 ES5 可以正常运行

页面中import notify 之后命令行报错

<template>
    <div class="container">
        <van-button type="default" @click="showNotify">测试Notify</van-button>
    </div>
</template>

<script>
	// import 之后 编译报错
    import Notify from '../../../static/vant/notify/index';
    export default {
        data() {
            return {}
        },
        methods: {
            showNotify() {
                console.info('showNotify');
                // console.info(Notify);
                // Notify('测试文案...');
            },
        },
        created() {
        }
    }
</script>

<style scoped>

</style>

这个错误也不知道怎么解决，请教各位这个错误的具体原因

修改 static/vant/notify/notify.js 的代码编译报错消失，但小程序增加报错 Page 注册错误

const defaultOptions = {
    selector: '#van-notify',
    duration: 3000
};

export default function Notify(options = {}) {
    const pages = getCurrentPages();
    const ctx = pages[pages.length - 1];

    options = Object.assign({}, defaultOptions, parseParam(options));

    const el = ctx.selectComponent(options.selector);
    delete options.selector;

    if (el) {
        // el.setData({
        //   ...options
        // });
        // 修改成这样 编译报错消失
        el.setData(options);
        el.show();
    }
}

function parseParam(params = '') {
    return typeof params === 'object' ? params : {text: params};
}

Page 注册错误 Please do not register multiple Pages in pages/index/main.js

后面还有问题到这里就走不下去了

在这里向大家请教一下这个问题，希望能得到产生问题的原因和解决思路

这里有一个git项目地址

https://github.com/vopdoo/mpvuevantweppnotifys

ldybecklee · 2018-08-27T09:02:24Z

我写了个wepy版本的vant weapp例子,有兴趣的可以了解下
https://github.com/ldybecklee/wepy-vant-demo

zhaohuwei · 2018-08-28T04:34:40Z

@vopdoo 那个是展开对象的语法不支持，写成兼容的语法或者引入loader转换掉。

vopdoo · 2018-08-28T05:47:33Z

@zhaohuwei
我更新了问题的描述，并把(...) 语法修改了，会出现后续的错误

@chenjiahan 可否指导一下这个问题呢

zhaohuwei · 2018-08-28T07:36:36Z

@vopdoo 然后这样引入 import Notify from '../../../static/vant/notify/notify';
（这要多谢@chenjiahan 在新版分开写了）

vopdoo · 2018-08-28T08:29:20Z

@zhaohuwei
import Notify from '../../../static/vant/notify/notify'; 就可以了分开了
非常感谢你我的这个问题已经解决

@chenjiahan

可以更新一下文档上的说明，可以减少使用者一些弯路

Rychou · 2018-09-01T14:45:41Z

mpvue-vant 在mpvue中无缝接入vant weapp组件库，做的总结。

maxiangsai · 2018-09-28T07:41:45Z

动态给vant组件绑定数据不行啊

rex-zsd · 2018-09-28T08:18:35Z

@maxiangsai 具体是哪个组件？

maxiangsai · 2018-09-28T08:20:01Z

@maxiangsai 具体是哪个组件？

field的value之类的动态绑定失效

zhaohuwei · 2018-10-08T03:54:12Z

@maxiangsai 具体是哪个组件？

field的value之类的动态绑定失效

原生是可以动态绑定的，如果用了mpvue，需要自己做change事件处理，赋值给变量。

nan1010082085 · 2018-10-10T03:52:11Z

mpvue 最新版不是说项目目录跟小程序一致吗？用的时候在main.json中引用

"usingComponents": {
        "van-row": "../../../static/vant/dist/row/index",
        "van-col": "../../../static/vant/dist/col/index",
        "van-tabbar": "../../../static/vant/dist/tabbar/index",
        "van-tabbar-item": "../../../static/vant/dist/tabbar-item/index",
        "van-icon": "../../../static/vant/dist/icon/index"
    }

mynameismaosheng · 2018-10-15T14:03:48Z

mpvue-loader 1.1.2
引用Notify
import Notify from '../../static/static/vant/notify/notify'
命令窗口报错
* ../../static/static/vant/notify/notify in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_mpvue-loader@1.1.4@mpvue-loader/lib/selector.js?type=script&index=0!./src/pages/hall/index.vue
求救
我现在 import 引什么都是这样报错

rex-zsd · 2018-10-16T12:02:58Z

尝试了一下mpvue中使用vant-weapp，目前发现几个mpvue的坑：

vant-weapp必须放在static目录下，否则会报各种not defined的错。
使用vant-weapp组件的外部样式类时必须去掉vue组件style标签的scoped属性，否则外部样式无法起作用。
vant-weapp组件抛出的事件中如果有-，mpvue中无法捕获，目前无解。
vant-weapp表单组件内部有抛出input事件，但是mpvue不支持v-model双向绑定，需要手动监听input事件赋值。

duxphp · 2018-10-20T08:17:31Z

尝试了一下mpvue中使用vant-weapp，目前发现几个mpvue的坑：

vant-weapp必须放在static目录下，否则会报各种not defined的错。

使用vant-weapp组件的外部样式类时必须去掉vue组件style标签的scoped属性，否则外部样式无法起作用。

vant-weapp组件抛出的事件中如果有-，mpvue中无法捕获，目前无解。

vant-weapp表单组件内部有抛出input事件，但是mpvue不支持v-model双向绑定，需要手动监听input事件赋值。

双向绑定这有有办法处理么？

rex-zsd · 2018-10-22T08:49:05Z

@duxphp mpvue现在不支持把v-model映射到原生组件抛出的input事件，所以没办法只能拆开写。

wkl007 · 2018-11-02T06:09:34Z

我这有个mpvue版本的vant weapp例子,有兴趣的可以了解下
https://github.com/wkl007/mpvue-vant-weapp

1429880240 · 2018-11-28T10:38:58Z

@wkl007 你的config.js那个是什么

wkl007 · 2018-11-28T10:40:28Z

@1429880240 那个只是首页的数据而已

luyangyanga · 2018-12-06T03:07:43Z

@vopdoo 我也是这样做的但是组件就是不生效没有样式也没有报错请问大佬是什么原因啊

nan1010082085 · 2018-12-06T03:45:15Z

左侧目录中vant-webappui放在static下

在每一个页组件中以下结构 man.json 使用

//使用
{
"navigationBarTitleText": "首页",
"usingComponents": {
"van-row": "../../../static/vant/dist/row/index",
"van-col": "../../../static/vant/dist/col/index",
"van-tabbar": "../../../static/vant/dist/tabbar/index",
"van-tabbar-item": "../../../static/vant/dist/tabbar-item/index",
"van-icon": "../../../static/vant/dist/icon/index"
}
}

唯一有点尴尬的是这 .json 并没有代码提示写起来懵比不是那么流畅

mynameismaosheng · 2018-12-28T03:15:52Z

左侧目录中vant-webappui放在static下

在每一个页组件中以下结构 man.json 使用

//使用
{
"navigationBarTitleText": "首页",
"usingComponents": {
"van-row": "../../../static/vant/dist/row/index",
"van-col": "../../../static/vant/dist/col/index",
"van-tabbar": "../../../static/vant/dist/tabbar/index",
"van-tabbar-item": "../../../static/vant/dist/tabbar-item/index",
"van-icon": "../../../static/vant/dist/icon/index"
}
}

唯一有点尴尬的是这 .json 并没有代码提示写起来懵比不是那么流畅

json里可以用绝对地址 /static/vant/...
组件内部职能 ../../../static/...

wangyang0210 · 2019-02-28T05:50:22Z

mpvue——componets中引入vant组件
https://www.cnblogs.com/wangyang0210/p/10449915.html

mpvue——引入vant组件
https://www.cnblogs.com/wangyang0210/p/10418902.html

都是有效的方法

hyx0217 · 2019-03-26T03:20:53Z

直接npm安装引入，组件并没有生效

建议使用git clone下来再复制dist到你的目录下。

afishhhhh · 2019-04-15T09:05:02Z

mpvue 的事件映射是 click->tap，如果一个 disabled 按钮 @click，还是能触发事件

kid1412621 · 2019-05-31T08:23:34Z

Notify 组件内部用了小程序的 getCurrentPages 方法, 然而 mpvue 不支持

wanganxp · 2019-08-03T19:59:42Z

建议改造为uni-app的无dom vue插件，这样就可以全端使用了。现在使用小程序用vant weapp，再编译到h5时，又得换vant ui，太麻烦了，只好弃vant了。

TrevorYS · 2019-08-06T07:54:38Z

请问mpvue里面vant怎么转换rpx

chenjiahan added the question label Sep 19, 2018

rex-zsd mentioned this issue Oct 24, 2018

mpvue 用v-model不能双向绑定 #806

Closed

rex-zsd pinned this issue Dec 26, 2018

chenjiahan closed this as completed May 24, 2019

rex-zsd unpinned this issue Jul 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mpvue支持 #444

mpvue支持 #444

wangwei123 commented Aug 21, 2018

zhaohuwei commented Aug 21, 2018

GodStream commented Aug 21, 2018

ruixiu commented Aug 24, 2018

vopdoo commented Aug 27, 2018 •

edited

ldybecklee commented Aug 27, 2018

zhaohuwei commented Aug 28, 2018

vopdoo commented Aug 28, 2018

zhaohuwei commented Aug 28, 2018

vopdoo commented Aug 28, 2018

Rychou commented Sep 1, 2018

maxiangsai commented Sep 28, 2018

rex-zsd commented Sep 28, 2018

maxiangsai commented Sep 28, 2018

zhaohuwei commented Oct 8, 2018

nan1010082085 commented Oct 10, 2018

mynameismaosheng commented Oct 15, 2018 •

edited

rex-zsd commented Oct 16, 2018 •

edited

duxphp commented Oct 20, 2018

rex-zsd commented Oct 22, 2018

wkl007 commented Nov 2, 2018

1429880240 commented Nov 28, 2018

wkl007 commented Nov 28, 2018

luyangyanga commented Dec 6, 2018

nan1010082085 commented Dec 6, 2018

mynameismaosheng commented Dec 28, 2018

wangyang0210 commented Feb 28, 2019 •

edited

hyx0217 commented Mar 26, 2019

afishhhhh commented Apr 15, 2019

kid1412621 commented May 31, 2019

wanganxp commented Aug 3, 2019

TrevorYS commented Aug 6, 2019

mpvue支持 #444

mpvue支持 #444

Comments

wangwei123 commented Aug 21, 2018

zhaohuwei commented Aug 21, 2018

GodStream commented Aug 21, 2018

ruixiu commented Aug 24, 2018

vopdoo commented Aug 27, 2018 • edited

环境

重现步骤

ldybecklee commented Aug 27, 2018

zhaohuwei commented Aug 28, 2018

vopdoo commented Aug 28, 2018

zhaohuwei commented Aug 28, 2018

vopdoo commented Aug 28, 2018

Rychou commented Sep 1, 2018

maxiangsai commented Sep 28, 2018

rex-zsd commented Sep 28, 2018

maxiangsai commented Sep 28, 2018

zhaohuwei commented Oct 8, 2018

nan1010082085 commented Oct 10, 2018

mynameismaosheng commented Oct 15, 2018 • edited

rex-zsd commented Oct 16, 2018 • edited

duxphp commented Oct 20, 2018

rex-zsd commented Oct 22, 2018

wkl007 commented Nov 2, 2018

1429880240 commented Nov 28, 2018

wkl007 commented Nov 28, 2018

luyangyanga commented Dec 6, 2018

nan1010082085 commented Dec 6, 2018

mynameismaosheng commented Dec 28, 2018

wangyang0210 commented Feb 28, 2019 • edited

hyx0217 commented Mar 26, 2019

afishhhhh commented Apr 15, 2019

kid1412621 commented May 31, 2019

wanganxp commented Aug 3, 2019

TrevorYS commented Aug 6, 2019

vopdoo commented Aug 27, 2018 •

edited

mynameismaosheng commented Oct 15, 2018 •

edited

rex-zsd commented Oct 16, 2018 •

edited

wangyang0210 commented Feb 28, 2019 •

edited