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

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

有这种需求,是非常正常的一件事情。因为在实际开发中,我们通常希望使用已有的开源组件库来进行开发,这些开源组件库大多是基于原生自定义组件的方式写成,比如目前比较流行的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。

步骤四:为需要使用自定义组件的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>

运行这个小程序,能看到如下的样子:

怎么样?很简单吧!快试试吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot 核心技术

Git核心技术:在Ubuntu下为Gitolite添加客户端

在之前的章节完成了服务端、管理客户端的配置,基础的配置已经完成,下面就可以开始把团队的开发人员添加到服务端了,客户端的配置要比管理客户端更简单一些,只需要把客...

11930
来自专栏轮子工厂

来谈一谈你在编程过程中都遇到过哪些奇葩的问题

1、Jquery插件一个通用函数一直报错,尤其是很明显是存在的函数,很有可能就是你没有引入jquery。。。或者版本不对

9010
来自专栏Jerry的SAP技术分享

help.hybris.com和help.sap.com网站的搜索实现

我使用help.hybris.com时,发现每次在搜索栏输入文字时,没有发出任何HTTP请求,那么这个自动完成的下拉框里的记录从哪里来的?我看了下实现,发现所有...

37430
来自专栏c#开发者

Windows 2008 is activated

Windows 2008 is activated 网上有很多类似的文章但式过好多次都没有成功;这次下载了一个新的vista sp1激活工具,总算成功了;分享...

38760
来自专栏建站达人秀

如何快速搭建 hexo 博客

本文将简介如何自己的服务器、腾讯云COS及Github Page上部署hexo博客。

1.1K50
来自专栏向治洪

Service Worker初体验

概述 在讲Service Worker之前先说一下另一个概念:PWA(Progressive Web Apps) Progressive Web App:是...

272100
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录 前情回顾 通过上一章《Vue2+VueRou...

26080
来自专栏Android干货

环信easeui集成:用户昵称和用户头像总结2018

环信EaseUI 集成,集成不做描述,看文档即可,下面主要谈一些对easeui的个性化需求修改。

17510
来自专栏测试开发架构之路

【终极答案】搭建selenium3.11 +Firefox+python3.6自动化UI测试环境踩的坑

1 运行之后,出现如下报错 Selenium.common.exceptions.WebDriverException: Message: 'geckodriv...

36380
来自专栏网商云

快速搭建企业私有网盘nextcloud

新账号关联我们公司购买腾讯云产品,有优惠哦!联系电话:13430587834(微信同号)

2.3K80

扫码关注云+社区

领取腾讯云代金券