mpvue-Vant Weapp踩坑记

微信开发者工具:开发、调试和模拟运行微信小程序的最核心的工具了，所以必须安装

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖

$ cd my-project

$ npm install

# 启动构建

$ npm run dev

需要被转换成小程序的代码才可以在小程序环境运行，所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下

打开微信开发者工具  =>  选择新增项目  =>  项目目录：dist下的wx目录


参考链接：https://www.jianshu.com/p/6f8d74be3ff8

引入第三方ui库——vant-weapp

// 将vant-weapp下载下来

git clone https://github.com/youzan/vant-weapp.git

下载后将其项目下的dist文件全部都copy到我们需要用到项目中, 为了方便管理，可以在根目录下的static下新建一个vant用于存放UI组件文件；目录结构即：/static/vant

最后只需要在我们需要使用组件的页面的配置json文件中引入我们需要的组件

{

    // 页面配置，即 page.json 的内容

    navigationBarTitleText: '首页',

    'usingComponents': {'van-icon': '/static/vant/icon/index','van-dialog': '/static/vant/dialog/index'

    }

  }

在vant-weapp的官方文档中的具体用法是使用wxml的语法，所以我们不能直接照搬使用, 需要稍做修改：

// 数据的绑定方式 value="{{value}}" 改成

v-bind:value="value"

//或者

:value="value"

// 事件的绑定方式 bind:click="onClick" 改成

@click="onClick"

// 获取 event 事件对象中值, mpvue中获取event值与原生小程序有所不同

onChange(event){ // 获取表单组件filed的值

  console.log(event.mp.detail) // 注意加入mp

}

// vant中像notify这种操作反馈类的组件都有两个引入，一是组件的引入，这个在main.json中引入；二是在vue文件中import引入，这里的引入不能使用绝对路径，使用相对路径。

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

nicoollas

mpvue-Vant Weapp踩坑记