美文网首页小程序开发技巧小程序猿的专题
mpvue中无缝接入Vant Weapp组件库

mpvue中无缝接入Vant Weapp组件库

作者: webkubor | 来源:发表于2018-11-04 22:51 被阅读9451次

    有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式,然而由于mpvue是对微信原生开发的再次封装,这也为我们引入UI组件添加了不少麻烦,话不多说,接下来为大家展示引入vant-weapp的方法。

    1、首先,我们需要有个mpvue的基础的项目文件骨架,即用mpvue初始化一个项目

    # 全局安装 vue-cli
    $ npm install --global vue-cli
    
    # 创建一个基于 mpvue-quickstart 模板的新项目
    $ vue init mpvue/mpvue-quickstart my-project
    
    # 安装依赖
    $ cd my-project
    $ npm install
    # 启动构建
    $ npm run dev
    

    2、其次,在微信开发者工具中新建项目,填入注册的appid和文件目录(敲黑板了这里要注意一点,文件目录是mpvue项目中下的dist目录),根目录中的dist目录实际上就是mpvue每次打包完成后(npm run build)的目录,所以里面的MINA文件结构就是微信小城小程序原生开发的文件结构;

    3、接下来,我们需要用到vant-weapp开源项目中vant UI组件,所以要将vant-weapp下载下来,下来后将其项目下的dist文件全部都copy到我们需要用到原项目中(就是我们开始初始化的项目),为了方便管理,可以在根目录下的static下新建一个vant用于存放UI组件文件;

    git clone https://github.com/youzan/vant-weapp.git
    
    粘贴位置如图所示

    4、接下来就比较简单了,组件的具体用法可在官方文档中查看,我们只需要在我们需要使用组件的页面的配置json文件中引入我们需要的组件

    以下是我的首页json配置

    { 
        // 页面配置,即 page.json 的内容
        navigationBarTitleText: '首页',
        'usingComponents': {
          'van-search': '/static/vant/search/index',
          'van-row': '/static/vant/row/index',
          'van-col': '/static/vant/col/index',
          'van-tab': '/static/vant/tab/index',
          'van-tabs': '/static/vant/tabs/index',
          'van-cell': '/static/vant/cell/index',
          'van-cell-group': '/static/vant/cell-group/index',
          'van-radio': '/static/vant/radio/index',
          'van-radio-group': '/static/vant/radio-group/index',
          'van-field': '/static/vant/field/index',
          'van-button': '/static/vant/button/index',
          'van-card': '/static/vant/card/index',
          'van-popup': '/static/vant/popup/index',
          'van-icon': '/static/vant/icon/index',
          'van-panel': '/static/vant/panel/index',
          'van-action-sheet': '/static/vant/cell-group/index',
          'van-switch-cell': '/static/vant/switch-cell/index',
          'van-area': '/static/vant/area/index',
          'van-dialog': '/static/vant/dialog/index'
        }
      }
    

    4、将UI组件导入后可在项目册测试,在此之前为了让UI组件生效,我们需要将项目打包一下,即为我们需要打开终端,在项目的根目录下执行一遍(npm run build),这样vant的UI组件就会在页面中正常发挥作用了

    5、最后一定记得打开微信小程序开发工具中的es6转es5(不然会报错的)

    注意事项

    在vant-weapp的官方文档中的具体用法是使用wxml的语法,所以我们不能直接照搬使用

    1、数据的绑定方式

    原生小程序,在标签内绑定数据的方式

    value="{{value}}"
    

    由于我们使用的事mpvue,所以我们需要改成

    v-bind:value="value"
    //或者
    :value="value"
    

    2、事件的绑定方式

    原生小程序使用方式

    bind:click="onClick"
    

    mpvue 使用方式

    @click="onClick"
    

    3、交互组件的引用

    vant中像notify这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json中引入;另一个是方法的引入,需要在vue文件中import引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

    import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名,指向src目录
    

    4、获取 event 事件对象中值

    值得注意的是,mpvue中获取event值与原生小程序有所不同。举例:

    onChange(event){ // 获取表单组件filed的值
      console.log(event.mp.detail) // 注意加入mp
    }
    

    5、监听方式的变更
    mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。

    可以改成驼峰式的监听名。

    eg: 我在field组件中就遇到这个问题,我的做法是:

    // static/vant/field/index.js
    
    this.$emit('click-icon');
    
    // 修改为:
    
    this.$emit('clickIcon');
    

    报错的处理方式

    一般的报错报错都可以通过一下流程处理。

    1、是否打开了微信开发者工具中的ES6转ES5功能。
    2、仔细检查代码和比对文档,看看是否有使用不当的地方。
    3、重新编译npm run dev或删掉dist目录重新npm run dev
    4、重启或更新微信开发者工具。

    在添加UI组件后,报页面丢失,TypeError: Cannot read property 'index' of undefined

    1、新建的页面,没有重新打包
    2、添加的组件路径有问题,路径错误或者是重复添加

    分享到此结束,之后如果我还遇到了什么坑会继续分享的!

    相关文章

      网友评论

        本文标题:mpvue中无缝接入Vant Weapp组件库

        本文链接:https://www.haomeiwen.com/subject/mizdxqtx.html