MPX 使用 Vant 时记录的笔记

（2020-10-03 17:01:10）微信小程序笔记

如果 van-button 的 open-type 为 getuserinfo，就算 wx.getuserinfo 在 wx.getlocation 的 success 回调里，也总是会先执行 wx.getuserinfo。

mpx 引入 vant-dialog 时遇到的一些小问题

问题描述

1. 问题触发的条件

1
2
3
4
5
6
7
8

<script type="application/json">
{
  "usingComponents": {
      // 引入 vant-dialog
      "van-dialog": "vant-weapp/dist/dialog/index"
  }
}
</script>

1. 期望的表现 正常引入 van-dialog 组件。
2. 实际的表现 微信小程序开发工具报错：Component is not found in path “components/vant-weapp3df1e56b/dialog/index”。

环境信息描述至少包含以下部分：

1. 系统类型(Mac或者Windows) macOS
2. Mpx依赖版本(@mpxjs/core、@mpxjs/webpack-plugin和@mpxjs/api-proxy的具体版本，可以通过package-lock.json或者实际去node_modules当中查看) “@mpxjs/core”: “^2.6.12”, “@mpxjs/webpack-plugin”: “2.6.11”, “@mpxjs/api-proxy”: “^2.5.33”,
3. 小程序开发者工具信息(小程序平台、开发者工具版本、基础库版本） 小程序平台：微信 开发者工具版本：1.03.2008270 基础库版本：2.12.2

最简复现demo已上传。 van-dialog-demo.zip

解决方法

在<script></script>中引入，应该为：

1
2
3

<script>
import Dialog from 'vant-weapp/dist/dialog/dialog.js'
</script>

在<script type="application/json></script>中，则按照vant-weapp官网正常引入：

1
2
3
4
5
6
7

<script type="application/json">
{
  "usingComponents": {
    "van-dialog": "vant-weapp/dist/dialog/index"
  }
}
</script>

另外我是在<van-icon bindtap="clickDialog"></van-icon>绑定方法，去触发Dialog.alert({})，但是会有样式的问题，但起码调用起来了。也就是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script>
import Dialog from 'vant-weapp/dist/dialog/dialog.js'

createPage({
  methods: {
    clickDialog() {
      Dialog.alert({
        message: '弹窗内容',
      theme: 'round-button',
         }).then(() => {
          // on close
        });
      }
    },
});
</script>

样式错误是因为我把<van-dialog />放在了<van-swipe-cell></van-swipe-cell>中，拿出来就没问题了，也不需要<view></view>包裹。