mpvue+ weapp微信小程序

1.检查版本

查看node和npm是否安装成功

  	node -v
  	npm-v

查看vue-cli版本

vue -v

2.创建mpvue项目

vue init mpvue/mpvue-quickstart my-project

3.安装van-weapp组件库

注意:目前vant已经支持了npm的方式，但是由于node_modules目录下的代码是不会被编进dist目录下的，所以暂时只能用git方式使用

1. 克隆项目：git clone https://github.com/youzan/vant-weapp.git
2. 将dist目录下的所有文件复制到你项目的/static/vant/目录下
   

4.如何引用van-weapp组件

使用van-weapp组件,我们只需要在对应页面的main.json文件中填入以下代码即可：

5.配置axios

axios.defaults.timeout = 50000;
axios.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    let data = config.method === 'get' ? config.params : config.data;
    wx.request({
      url:config.url,
      method:config.method,
      data:data,
      success:(res)=>{ return resolve(res)},
      fail:(err)=>{return reject(err)}
    })
  })
}
// axios 拦截器
function Instance () {
  //请求拦截器
  axios.interceptors.request.use(function ( request ) {
    // request.headers.token = 'token=11124654654687';
    // console.log(request) //请求成功
    return request
  }, function ( error ) {
    // console.log(error); //请求失败
    return Promise.reject(error);
  });

  // 添加响应拦截器
  axios.interceptors.response.use(function ( response ) {
    console.log(response.data.data) //响应成功
    return response;
  }, function ( error ) {
    // console.log(error); //响应失败
    return Promise.reject(error);
  });
}
Instance()
function get (url,params) {
  return axios({
    method:'get',
    url:url,
    params:params
  })
}
function post (url,params) {
  return axios({
    method:'post',
    url:url,
    data:params
  })
}

6.Vuex配置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state:{
  	//后台接口访问地址相同的部分,例如：http://localhost:8080
    baseUrl:'' 
  }
})
export default store;

7.编写登录页面

注意:文件名称自定义，根据个人习惯自定义
登录模块：
index.vue

<template>
  <div>
    <!--登录-->
    <van-row :span="24">
      <view class="banner">
        <div style="margin: 20rpx 35rpx;">
          <van-field
            placeholder="请输入手机号"
            label="手机号"
            left-icon="phone"
            type="number"
            clearable
            border="true"
            :error="telephoneError"
            @blur="inputInfoTelephone"
            @focus="focusInfoTelephone"
          />
        </div>
        <div style="margin: 20rpx 35rpx;">
          <van-field
            placeholder="请输入密码"
            label="密码"
            left-icon="friends"
            clearable
            border="true"
            :error="passwordError"
            password="true"
            @blur="inputInfoPassword"
            @focus="focusInfoPassword"
          />
        </div>
        <div style="margin: 120rpx 35rpx;text-align: center">
          <van-button round color="#FFBC1A" @click="loginInfo">登录</van-button>
        </div>
      </view>
    </van-row>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
  // 引入css样式
  import login from '../../pages/login/login.css'
  import axios from 'axios'
  import Toast from '../../../static/vant/toast/toast';
  import store from '../../vuex/store'
  export default {
    name: "login",
    data(){
        return{
          canIUse:true,
          telephoneError:false,
          passwordError:false,
          telephone:'',
          password:'',
          //请求接口
          loginInfoUrl:'',
        }
    },
    computed:{
      url(){
        return store.state.baseUrl
      }
    },
    methods:{
      //登录
      loginInfo(){
        let that = this;
        if(that.telephone == ''){
          that.telephoneError = true;
          return false;
        }
        if(that.password == ''){
          that.passwordError = true;
          return false;
        }
        var user = {
          username:'admin',
          account:that.telephone
        };
        axios.post(
          that.url + that.loginInfoUrl,
          user
        ).then(response=>{
          if(response.data.code == 200) {
            //用户信息存储到本地缓存
            wx.setStorageSync("user",response.data.data);//用户
            //跳转页面
            const url = '../market/main';
            wx.switchTab({url: url})
          } else if(response.data.code == 206) {
            Toast.fail('用户名或密码错误');
            return false;
          }
        })
      },
      //监听手机号输入框内容发生变化
      inputInfoTelephone(val){
        this.telephone = val.mp.detail.value
      },
      //监听密码输入框内容发生变化
      inputInfoPassword(val){
        this.password = val.mp.detail.value
      },
      //手机号输入框聚焦
      focusInfoTelephone(){
        this.telephoneError = false;
      },
      //密码输入框聚焦
      focusInfoPassword(){
        this.passwordError = false;
      }
    },
  }
</script>

<style>
  .van-cell{
    /*border: 1rpx solid #eaeaea;*/
    border-radius: 50rpx !important;
    border-bottom: 0rpx !important;
  }
  .banner{
    position: absolute;
    top:0px;
    bottom: 0px;
    width: 100%;
    padding-top: 450rpx;
    background-image: url("http://hbimg.huabanimg.com/8d210c31f9a0c7ed0c15e3a1c92e83425314b52119b7bf-HjpZds_fw658");
    /*background-position-x: center;*/
    background-size: cover;
  }
  .van-cell:after{
    border-bottom: 0rpx !important;
  }
  .van-button--normal{
    padding: 0rpx 300rpx !important;
  }
  .van-icon{
    margin-right: 10rpx !important;
  }
  .van-cell__title{
    min-width: 60rpx !important;
    max-width: 100rpx !important;
  }
  .van-toast--icon{
   width: 205rpx !important;
  }
</style>

在这里插入图片描述

main.json

{
  "navigationBarTitleText": "授权登录",
  "usingComponents": {
    "van-row": "../../static/vant/row/index",
    "van-col": "../../static/vant/col/index",
    "van-field": "../../static/vant/field/index",
    "van-cell-group": "../../static/vant/cell-group/index",
    "van-button": "../../static/vant/button/index",
    "van-toast": "../../static/vant/toast/index"
  }
}

mian.js

import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()

login.css

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 160rpx;
  height: 140rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 30rpx;
}


.imageHeader {
  width: 100rpx;
  height: 92rpx;
  text-align: center;
  /*background-color: #FFBC1A;*/
  border-radius: 50%;
  border: 2rpx solid #FFBC1A;
  padding-top: 8rpx;
  margin-left: 45%;
}
.imageHeader image {
  width: 80rpx;
  height: 80rpx;
}
.imageButton{
  padding: 0px;
  line-height:0px;
  border:0px;
  background-color:transparent;
  border: 0px;
}
.imageButton::after{
  border: 0px;
}

需要完整代码：请留言…