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
dist

 

引入第三方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目录