如何在mpvue中正确的引用小程序的原生自定义组件

怼烎@ 2024-04-17 05:33 22阅读 0赞

**【原文地址】**mpvue入门系列教程：

*  [如何在mpvue中正确的引用小程序的原生自定义组件][mpvue]
 *  [使用mpvue开发小程序教程（六）][mpvue 1]
 *  [使用mpvue开发小程序教程（五）][mpvue 2]
 *  [使用mpvue开发小程序教程（四）][mpvue 3]
 *  [使用mpvue开发小程序教程（三）][mpvue 4]
 *  [使用mpvue开发小程序教程（二）][mpvue 5]
 *  [使用mpvue开发小程序教程（一）][mpvue 6]

最近，很多人给我留言，问我说怎么在mpvue项目中引入小程序原生框架中的[自定义组件][Link 1]。

有这种需求，是非常正常的一件事情。因为在实际开发中，我们通常希望使用已有的开源组件库来进行开发，这些开源组件库大多是基于原生自定义组件的方式写成，比如目前比较流行的Vant Weapp、iView Weapp等等。所以，在mpvue项目中如何引入并使用这些自定义组件，就成了必须了解的一个问题。

有些朋友在自己尝试的过程中遇到了挺多的问题，那就让我来告诉你们经过我实测后认为的正确使用方式吧。

# 步骤一：生成你的mpvue工程 #

通过vue-cli命令，我们先生成一个全新的mpvue工程代码：

vue init mpvue/mpvue-quickstart my-project

然后进入该工程目录，通过npm安装依赖：

cd my-project
    npm install

# 步骤二：下载小程序组件库 #

小程序的组件库有挺多，我们这里选用[iVew Weapp][]作为示例。你可以直接去github把iView Weapp的代码下载下来，也可以用过npm来下载：

npm i iview-weapp

下载完成后，到它的目录中寻找名为dist的目录，这里面存放的就是iView Weapp原生小程序自定义组件代码。

# 步骤三：将组件库复制到工程的static目录下 #

你可以将上面提到的整个dist目录复制到你的mpvue工程下的static目录下（记得一定要是static目录，否则这些代码会被mpvue编译器错误的进行处理），然后给这个dist目录改个名字，比如叫iview。

![20190822165149867.png][]

# 步骤四：为需要使用自定义组件的Page进行配置 #

我们知道，原生小程序开发中，我们如果要在Page中使用自定义的组件，则需要在该Page对应的`.json`配置文件中配置要使用的自定义组件。在mpvue中，我们也需要做等价的配置。

比如，现在我要在`src/pages/index/index.vue`中使用iView中的`i-button`组件，那么就先要在`src/pages/index/main.json`（如果没有该文件，则新建一个）中进行如下配置：

{
      "usingComponents": {
        "i-button": "../../static/iview/button/index"
      }
    }

# 步骤五：在Page中使用自定义组件 #

经过上一步的配置，我们就可以开始在`src/pages/index/index.vue`中使用这个`i-button`组件了，就像这样：

<template>
      <div class="container">
        <i-button type="primary" @click="bindViewTap">这是一个按钮</i-button>
      </div>
    </template>

运行这个小程序，能看到如下的样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

怎么样？很简单吧！快试试吧。

[mpvue]: https://www.jianshu.com/p/1b3b9e17ac88
[mpvue 1]: https://www.jianshu.com/p/462494e458c2
[mpvue 2]: https://www.jianshu.com/p/579035fc9c18
[mpvue 3]: https://www.jianshu.com/p/32997f74c828
[mpvue 4]: https://www.jianshu.com/p/2c363ea29cda
[mpvue 5]: https://www.jianshu.com/p/2e98cc166dbd
[mpvue 6]: https://www.jianshu.com/p/6f8d74be3ff8
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[iVew Weapp]: https://github.com/TalkingData/iview-weapp
[20190822165149867.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8b1ec250d4364b8cac057cb5b928d469.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/4a1ee09de3204cf4bc9be8a6030c9f68.png