H5项目记录项目记录（H5） - 开通免密支付，基于vue.js,vue-router,Vant-ui,微信网页授权，车

项目记录（H5） - 开通免密支付功能

一、搭建H5项目框架

使用vue-cli生成的项目,选择了less预处理样式语言，集成了eslint、vuex，vue-router，Vue3

使用了Vant移动端，选择按需加载的方式，主要使用了Toast

Vue3项目安装vant npm i vant@next -S
自动按需引入插件 npm i babel-plugin-import -D
在.babelrc 中添加配置：

module.exports = {
    plugins: [
        [
            'import',
            {
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true,
            },
            'vant',
        ],
    ],
};

引入使用 import { Toast } from "vant"; Toast("验证码发送成功");

二、样式和适配

重置样式，加载了reset.css

适配方案，选择了rem适配

安装插件 npm i lib-flexible -S npm i px2rem-loader -D
main.js 中引入 import "lib-flexible"
vue.config.js 中配置

"postcss": { 
    "plugins": { 
        "autoprefixer": {}, 
        "postcss-px2rem": { 
            "remUnit": 37.5
        }
    } 
}

三、出现的问题

问题： H5引入vant框架，设计稿基于750px,而vant基于375px的设计稿，导致vant样式小一半

解决方案： 新建 postcssrc.js,代码如下：

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue(val) {
        return val.file.indexOf("vant") === -1 ? 75 : 37.5;
      },
      propList: ["*"],
    },
  },
};

四、基于axios封装ajax请求

封装达成的目标：

接口给统一管理维护
拦截请求和响应，统一处理登录态cookies和异常处理

import axios from "axios";
import { Toast } from "vant";
import cookies from "js-cookie";

// 请求超时时间
axios.defaults.timeout = 150000;
// post请求头
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    let token = cookies.get("accessToken");
    if (token) {
      config.headers["accessToken"] = token;
    }
    return config;
  },
  (error) => {
    return Promise.error(error);
  }
);

// 响应拦截
axios.interceptors.response.use(
  (res) => {
    const response = res.data;
    if (response.respCode === "40001") {
      localStorage.clear();
      cookies.set("accessToken", "");
      Toast({
        message: response.bizMsg || "服务器内部错误",
        type: "fail",
        duration: 2 * 1000,
      });
      return;
    }
    if (response.respCode === "00000") {
      return Promise.resolve(response);
    } else {
      Toast({
        message: response.bizMsg || "服务器内部错误",
        type: "fail",
        duration: 2 * 1000,
      });
    }
  },
  (error) => {
    Toast({
      message: "网络异常",
      type: "fail",
      duration: 2 * 1000,
    });
    return Promise.reject(error);
  }
);

/*
 * get方法，对应get请求
 * @param{String}url[请求的url地址]
 * @param{Object}params[请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params,
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
/*
 *post方法，对应post请求
 * @param{String}url[请求的url地址]
 * @param{Object}params[请求时候携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

五、关于业务

背景介绍
- 在加油站使用ETC加油场景下，通过用户授权，开通车主服务，添加车牌进行免密代扣；
- 通过H5的形式，可支持多渠道接入；
流程介绍
- 网页授权回调域名 ① 先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名 ② 将校验文件放到配置域名的根目录下
- 在微信环境下，引导打开如下页面
```
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
```
- 用户同意授权获取code
- 通过code换取网页授权access_token、openid
- 通过access_token、openid调用接口获取其他参数
- 校验车牌号、手机号、验证码
- 携带参数跳转到开通车主服务的H5页面
```
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
```
流程图如下

process

微信文档网页授权开通车主服务

H5项目记录

项目记录（H5） - 开通免密支付功能

一、搭建H5项目框架

二、样式和适配

三、出现的问题

四、基于axios封装ajax请求

五、关于业务

六、效果展示