学习点：

一.使用mpvue创建一个项目

1. 全局安装 vue-cli

 npm install --global vue-cli

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

 vue init mpvue/mpvue-quickstart my-project

3. 安装依赖

 cd my-project

 npm install

4. 启动构建

 npm run dev

5.打开小程序开发工具，把dist目录当做项目导入进去

 

二.获取openid(后台使用的java项目)

官网参考：https://developers.weixin.qq.com/miniprogram/dev/api-backend/code2Session.html

1.使用wx.login方法登录获取到一个code

2.把code传到后台

3.后台微信的code2Session接口获取openid

三.如何引用有赞的小程序组件

第一步：安装

npm i vant-weapp -S --production

第二步：导入

在dist中找到生成的vant-weapp放入static中

第三步注册插件

在相关的文件目录下，建立main.json,放入相关的插件（具体配置vant官网）

四.如何封装js

 

1.在static新建js文件，格式如下

//获取openid
const getOpenId=function(successFn,errorFn){

}
export default{
    getOpenId
}

2.在各自页面目录中的js中写入导入

import CommonJs from '../../../../static/js/common.js';
Vue.prototype.$common = CommonJs

3.使用

this.$common.getOpenId();

五.mpvue可以使用的（测试通过）

 1.v-model数据双向绑定，vant不支持，只有通过change赋值

六.vant坑介绍

    1.使用vant无法进行数据双向绑定

     2.事件跟变量定义不一致

      vant官网

<van-cell-group>
  <van-field
    value="{{ value }}"
    placeholder="请输入用户名"
    bind:change="onChange"
  />
</van-cell-group>

使用mpvue写法

<van-cell-group>
  <van-field
    :value="value"
    placeholder="请输入用户名"
    @change="onChange"
  />
</van-cell-group>