mpvue+ weapp微信小程序

心已赠人 2024-04-19 15:27 85阅读 0赞

### 1.检查版本 ###

##### 查看node和npm是否安装成功 #####

node -v
      	npm-v

![版本查看][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70]

#### 查看vue-cli版本 ####

vue -v

![在这里插入图片描述][20190926194740576.png]

### 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][https_github.com_youzan_vant-weapp.git]
2.  将dist目录下的所有文件复制到你项目的/static/vant/目录下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 1]

### 4.如何引用van-weapp组件 ###

使用van-weapp组件,我们只需要在对应页面的main.json文件中填入以下代码即可：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 2]

### 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.编写登录页面 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 3]  
**注意**:文件名称自定义，根据个人习惯自定义  
登录模块：  
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>

在这里插入图片描述  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 4]  
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;
    }

**需要完整代码**：请留言…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c523b0392b7c41278c8b43e5de9695e8.png
[20190926194740576.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7a000a0e9ed44f109600e82702186364.png
[https_github.com_youzan_vant-weapp.git]: https://github.com/youzan/vant-weapp.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7f5e0d5bcef0459484f5b3614828add7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/515168746e334d8fb689abc4fdd65d16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/76ec6736bbf945309955ecb0de36ba70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW40NDk3NTc1MjA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ae9ce011d88c4da9a14ad3adf9b01566.png