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方式使用

克隆项目：git clone https://github.com/youzan/vant-weapp.git
将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()

.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;
}