代码块整理

如有补充，请在下方留言或联系我

常用函数

这里列举了一些常用的函数，可以直接复制到代码块中使用。
更多函数可以查看 lodash.js 中文网或者 lodash.js 官网

是否数组
1
2
3
4
5
6
7
8
9
10
11
/**
 * @description 判断是否数组
 * @param {*} value 需要判断的值
 * @returns {boolean}
 */
function isArray(value) {
  if (typeof Array.isArray === 'function') {
    return Array.isArray(value);
  }
  return Object.prototype.toString.call(value) === '[object Array]';
}
深度克隆
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 这只是一个深拷贝的简单的版本，有很多边界情况没有处理。
 * 如果需要一个完美的深拷贝，请使用lodash的 _.cloneDeep 方法。
 * @description 深度克隆
 * @param {object} source 需要深度克隆的对象
 * @returns {object}
 */
function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
};
获取uuid
1
2
3
4
5
6
7
8
9
10
11
/**
 * @description 随机唯一值uuid
 * @returns {string}
 */
function guid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
获取url参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * @param {string} url
 * @returns {object}
 */
function param2Obj(url) {
  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
  if (!search) {
    return {}
  }
  const obj = {}
  const searchArr = search.split('&')
  searchArr.forEach(v => {
    const index = v.indexOf('=')
    if (index !== -1) {
      const name = v.substring(0, index)
      const val = v.substring(index + 1, v.length)
      obj[name] = val
    }
  })
  return obj
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * @description 获取url参数或者hash参数
 * @param {string} name 参数名
 * @returns {string|object} 参数值或者对象
 */
function getUrlParameter(name) {
  let array,
    result = {};
  if (window.location.search) {
    array = window.location.search.replace(/^\?/, '').split('&');
  } else if (window.location.hash) {
    array = window.location.hash.replace(/^\#/, '').split('&');
  } else {
    array = [];
  }
  if (array.length === 0) return null;
  for (let i = 0; i < array.length; i++) {
    let keyValue = array[i].split('=');
    result[keyValue[0]] = keyValue.length == 2 ? keyValue[1] : '';
  }
  return name ? result[name] : result;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * @description 获取url参数
 * @param {string} name 参数名
 * @returns {string} 参数值
 */
function getUrlParam(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

/**
 * @description 获取hash参数
 * @param {string} name 参数名
 * @returns {string} 参数值
 */
function getHashParam(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.hash.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}
获取浏览器类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * @description 获取浏览器类型
 * @param {string} type 指定浏览器类型 1:微信 2:支付宝 3:其他
 * @returns {string|boolean} 浏览器类型/是否为指定的浏览器类型
 */
function getBrowserType(type) {
  // 判断是否是微信浏览器
  const isWechat = () => {
    const ua = navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == 'micromessenger';
  };

  // 判断是否是支付宝浏览器
  const isAlipay = () => {
    const ua = navigator.userAgent.toLowerCase();
    return ua.match(/AlipayClient/i) == 'alipayclient';
  };

  const browserMap = {
    1: 'wechat',
    2: 'alipay',
    3: 'other'
  }
  let browserType = localStorage.getItem('browserType') || '';
  if (isWechat()) {
    browserType = browserMap[1];
  } else if (isAlipay()) {
    browserType = browserMap[2];
  } else {
    browserType = browserMap[3];
  }
  localStorage.setItem('browserType', browserType);
  return type ? browserMap[type] === browserType : browserType;
};
是否已授权微信/支付宝登录标识
1
2
3
4
5
6
7
8
9
10
// 使用getBrowserType方法判断浏览器类型
/**
 * @description 是否已授权微信/支付宝登录标识
 * @returns {boolean}
 */
function isAuth() {
  const openid = localStorage.getItem('openid');
  const user_id = localStorage.getItem('user_id');
  return (openid && getBrowserType(1)) || (user_id && getBrowserType(2));
};

使用微信某个单独的 API 接口

如：通过 jsapi 接口，H5 获取用户的已保存在微信的抬头信息，微信文档

具体实现
具体实现 2

以下示例为微信文档中的内容

接口没有公开，所以不会暴露在 wx 对象上。

对于没有公开的接口，都可以用这样的方式调用：

  1. wx.config 的时候传入参数 beta: true

  2. wx.invoke(name, args, callback)，其中 name 是接口名，args 是参数对象，callback 是回调函数

具体到这个场景，就是

1
2
3
4
5
6
7
8
9
wx.invoke(
  'chooseInvoiceTitle',
  {
    // 这里要传入参数
  },
  function (res) {
    // 这里处理调用结果
  }
);

请求参数：

返回结果

choose_invoice_title_info对象的结构如下：

1
2
3
4
5
6
7
8
9
{
  "type": "0",
  "title": "腾讯科技(深圳)有限公司",
  "taxNumber": "123466789987646131",
  "companyAddress": "深圳市南山区某某路腾讯大厦",
  "telephone": "123456789",
  "bankName": "某某银行",
  "bankAccount": "621111111111290"
}

具体实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const { appId, nonceStr, signature, timestamp } = data;
wx.config({
  beta: true,
  jsApiList: ['chooseInvoiceTitle'],
  appId,
  nonceStr,
  signature,
  timestamp
});
wx.ready(function () {
  wx.invoke(
    'chooseInvoiceTitle',
    {
      scene: '1'
    },
    function (res) {
      if (res) {
        var info = JSON.parse(res.choose_invoice_title_info);
        console.log('获取微信抬头成功', info);
      }
    }
  );
});

wx.error(function (res) {
  console.error('微信授权错误', JSON.stringify(res));
});

支付

微信支付 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function onBridgeReady() {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    {
      appId: appId,
      nonceStr: nonceStr,
      package: package,
      signType: signType,
      timeStamp: timeStamp + '',
      paySign: signature
    },
    function (res) {
      if (res.err_msg == 'get_brand_wcpay_request:ok') {
        // 支付成功的处理
      }
    }
  );
}

if (typeof WeixinJSBridge == 'undefined') {
  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
} else {
  onBridgeReady();
}

支付宝支付（Vue语法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div class="payContainer">
    <div v-html="payHtmlString"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      payHtmlString: ""
    }
  },
  methods: {
    aliPay() {
      const html = "<form id='alipaysubmit'>....</form>"; // 接口返回的支付宝表单，其他情况具体另处理
      this.payHtmlString = html.replace(/<script\b[^>]*>[\s\S]*<\/script>/gi, "");
      this.$nextTick(() => {
        document.forms["alipaysubmit"].submit();
      });
    }
  }
}
</script>

Request请求封装

仅作参考

Axios

uniapp原生请求

uniapp原生请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const APIURL = 'xxx';

class Common {
  constructor() {}
  DataGet(url, params = {}) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: APIURL + url,
        data: params,
        method: 'GET',
        header: { 'content-type': 'application/x-www-form-urlencoded' },
        success(res) {
          return resolve(res.data);
        },
        fail(err) {
          reject(err);
          uni.showToast({
            title: '网络错误--' + url,
            icon: 'none'
          });
        }
      });
    });
  }

  DataPost(url, params = {}) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: APIURL + url,
        data: params,
        method: 'POST',
        header: { 'content-type': 'json' },
        success(res) {
          return resolve(res.data);
        },
        fail(err) {
          reject(err);
          uni.showToast({
            title: '网络错误--' + url,
            icon: 'none'
          });
        }
      });
    });
  }
}
export default new Common();
uniapp + uView + luch-request

uniapp + uView + luch-request

uView的http 请求封装集成自优秀的开源请求库：luch-request。uView 对其进行了简单封装以及说明，如有不全之处， 可参考luch-request官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
 * uview http请求封装 https://www.uviewui.com/js/http.html
 */

import CONFIG from '@/common/config';

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = vm => {
  // 初始化请求配置 config为默认全局配置
  uni.$u.http.setConfig(config => {
    config.baseURL = CONFIG.baseUrl;
    config.method = 'GET';
    config.timeout = 90000;
    config.header = {};
    // 自定义参数
    config.custom = {
      'interceptors.response': true,
      auth: true,
      catch: false,
      loading: false,
      loadingText: ''
    };
    return config;
  });

  // 请求拦截
  uni.$u.http.interceptors.request.use(
    config => {
      // 可使用async await 做异步操作
      // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
      config.data = config.data || {};
      if (config?.custom?.baseURL) {
        config.baseURL = config.custom.baseURL || CONFIG.baseUrl;
      }
      // 根据custom参数中配置的是否需要token，添加对应的请求头
      if (config?.custom?.auth) {
        config.header.authorization = vm.$store.state.token;
      }
      if (config?.custom?.loading) {
        uni.showLoading({
          title: config.custom.loadingText || '加载中'
        });
      }
      return config;
    },
    config => {
      // 可使用async await 做异步操作
      return Promise.reject(config);
    }
  );

  // 响应拦截
  uni.$u.http.interceptors.response.use(
    response => {
      /* 对响应成功做点什么 可使用async await 做异步操作*/
      const data = response.data;
      const custom = response.config?.custom; // 自定义参数

      if (custom.loading) uni.hideLoading();

      // interceptors.response为false时不需要拦截处理，直接返回响应结果
      if (!custom['interceptors.response']) return data;

      if (data.code !== CONFIG.successCode) {
        // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
        if (custom.toast !== false) {
          uni.$u.toast(data.msg);
        }

        // 如果需要catch返回，则进行reject
        if (custom?.catch) {
          return Promise.reject(data);
        } else {
          // 否则返回一个pending中的promise，请求不会进入catch中
          return new Promise(() => {});
        }
      }
      // return data.data === undefined ? {} : data.data;
      return data;
    },
    response => {
      // 对响应错误做点什么 （statusCode !== 200）
      uni.hideLoading();
      const msg = response.data?.msg;
      uni.$u.toast(`${response.statusCode}：${msg || '请求出错，请稍后再试'}`);
      return Promise.reject(response);
    }
  );
};

requestDemo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const http = uni.$u.http;

// get请求示例 uni.$u.http.get(url[, config])
export const getApi = data =>
  http.get('/ebapi/public_api/index', {
    params: {
      userName: 'name',
      password: '123456'
    }
  });

// post请求示例 uni.$u.http.post(url[, data[, config]])
export const postApi = data => http.post('/ebapi/public_api/index', data, config);

// upload请求示例 uni.$u.http.upload(url[, config])
export const uploadApi = data =>
  http.upload('/ebapi/public_api/index', {
    params: {},
    // #ifdef APP-PLUS || H5
    files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
    // #endif
    // #ifdef MP-ALIPAY
    fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
    // #endif
    filePath: '', // 要上传文件资源的路径。
    name: 'file',
    formData: {}, // HTTP 请求中其他额外的 form data
    getTask: (task, options) => {
      // task.onProgressUpdate((res) => {
      //   console.log('上传进度' + res.progress);
      //   console.log('已经上传的数据长度' + res.totalBytesSent);
      //   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
      //
      //   // 测试条件，取消上传任务。
      //   if (res.progress > 50) {
      //     uploadTask.abort();
      //   }
      // });
    }
  });

// request请求示例 uni.$u.http.request(config)
export const postMenu = params =>
  http.request({
    method: 'POST', // 请求方法必须大写 [GET|POST|PUT|DELETE|CONNECT|HEAD|OPTIONS|TRACE]
    url: '/user/12345',
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    },
    params: {
      token: '1111'
    },
    custom: {} // 自定义参数
  });
uniapp + luch-request

uniapp + luch-request

luch-request 文档
插件安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import Request from '@/utils/luch-request/index.js';
import CONFIG from '@/utils/config.js';
import encrypt from '@/utils/function/encrypt.js';

/*
// 自定义错误提示，可删
const showStatus = (status) => {
	let message = ''
	switch (status) {
		case 400:
			message = '请求错误(400)'
			break
		case 401:
			message = '未授权，请重新登录(401)'
			break
		case 403:
			message = '拒绝访问(403)'
			break
		case 404:
			message = '请求出错(404)'
			break
		case 408:
			message = '请求超时(408)'
			break
		case 500:
			message = '服务器错误(500)'
			break
		case 501:
			message = '服务未实现(501)'
			break
		case 502:
			message = '网络错误(502)'
			break
		case 503:
			message = '服务不可用(503)'
			break
		case 504:
			message = '网络超时(504)'
			break
		case 505:
			message = 'HTTP版本不受支持(505)'
			break
		default:
			message = `连接出错(${status})!`
	}
	return `${message}，请检查网络或联系管理员！`
} */

const BASE_URL = CONFIG.base_url;
// const BASE_URL = CONFIG.test_url;
const HEADER = CONFIG.header;
const SUCCESS_CODE = CONFIG.successCode;
/**
 * 修改全局配置
 * 两种方法
 */
// 1. 实例对象时
const http = new Request({
  baseURL: BASE_URL,
  header: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  method: 'GET',
  dataType: 'json',
  responseType: 'text',
  timeout: 300000,
  // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
  withCredentials: false
});

// 2. 调用实例方法
/* const http = new Request()
http.setConfig((config) => {
	config.baseURL = BASE_URL;
	config.header = {
		'Content-Type': 'application/x-www-form-urlencoded'
	}
	return config
}) */

/* 请求之前拦截器。可以使用async await 做异步操作 */
http.interceptors.request.use(
  config => {
    // =========== token示例 可删 ===========
    /* config.header = {
		...config.header,
		token: getTokenStorage()
	}
	// 如果token不存在，return Promise.reject(config) 会取消本次请求
	if (!token) {
		return Promise.reject(config)
	} */
    return config;
  },
  config => {
    return Promise.reject(config);
  }
);

/* 请求之后拦截器。可以使用async await 做异步操作  */
http.interceptors.response.use(
  async response => {
    const status = response.status;
    const data = response.data;

    let message = '';
    // 失败响应码处理
    if (status < 200 || status >= 400) {
      message = data.msg || `请求失败(${status})，请检查网络或联系管理员！`; // 或可选showStatus(status);
      uni.showToast({
        title: message,
        icon: 'none'
      });
      return Promise.reject(response);
    } else {
      const code = data.code || SUCCESS_CODE;
      const msg = data.msg || '请求成功';
      const inWhiteList = CONFIG.whiteList.includes(response.config.url); // 请求地址是否在白名单内
      if (code !== SUCCESS_CODE && !inWhiteList) {
        uni.showToast({
          title: msg,
          icon: 'none'
        });
      }
    }
    return response;
  },
  error => {
    // 服务器状态码不是200的情况 请求错误做点什么。可以使用async await 做异步操作
    uni.showToast({
      title: '请求超时或服务器异常，请检查网络或联系管理员！',
      icon: 'none'
    });
    return Promise.reject(error);
  }
);

export { http };

Ajax

Promise 方式

Promise 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function httpRequest(options) {
  return new Promise((resolve, reject) => {
    const { url, data, methods, dataType, headers, contentType } = options;
    let settings = {
      url: config.baseUrl + url,
      dataType: dataType || 'json',
      data: data,
      type: methods || 'GET',
      headers: headers || {},
      contentType: contentType || 'application/x-www-form-urlencoded;charset=utf-8',
      success: function (data) {
        options.success && options.success(data);
        resolve(data);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.error(errorThrown)
        reject(new Error('requestError: ' + XMLHttpRequest.responseText))
      }
      error: function (error) {
        reject(new Error(error))
      }
    };
    if (options.jsonpCallback) {
      settings.jsonpCallback = options.jsonpCallback;
    }
    $.ajax(settings);
  });
}

具体使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 微信jssdk配置初始化
const api_initWxjssdk = function () {
  return httpRequest({
    url: '/weixin/js-init',
    dataType: 'jsonp',
    data: {
      url: location.href,
      source: 'test' // 微信模块
    },
    jsonpCallback: 'jscfg',
    success: function (result) {
      console.log('wx-config:', $.parseJSON(result.jsCfg));
      wx.config($.parseJSON(result.jsCfg));
      wx.ready(function () {
        // config信息验证后会执行ready方法，异步操作
      });
      wx.error(function (res) {
        // config信息验证失败会执行error函数
      });
    }
  });
};

// api封装
const api_checkIsBind = openid => {
  return httpRequest({
    url: '/jump-lake2021/bool-bind',
    methods: 'POST',
    data: {
      openid
    }
  });
};

// 使用
api_checkIsBind('12345').then(res => {
  const code = res.code;
  const data = res.data;
});
callback 方式

callback 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var httpRequest = function (params) {
  $.ajax({
    url: config.baseUrl + params.url,
    type: params.methods || 'POST',
    dataType: params.dataType || 'json',
    data: params.data || '',
    headers: params.headers || {},
    // timeout: 2000,
    // jsonpCallback: 'jscfg',
    // async: false,
    success: function (result) {
      params.success(result);
    }
  });
};

具体使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// api封装
var api_authorize = function (param) {
  httpRequest({
    url: '/authorize/authorize',
    type: 'GET',
    data: param.data,
    success: param.success
  });
};

// 使用
api_authorize({
  data: {
    openid: window.localStorage.getItem('ZSRQ_openid')
  },
  success: res => {}
});

微信小程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import CONFIG from '../utils/config.js';

const BASE_URL = CONFIG.base_url;
const HEADER = CONFIG.header;
const SUCCESS_CODE = CONFIG.successCode;

const hideLoading = () => {
  getApp().globalData.loading && wx.hideLoading();
  getApp().globalData.loading = false;
};

function request(options) {
  // 使用globalData中的loading变量隐藏loading提示，防止真机的不可控报错
  getApp().globalData.loading && wx.hideLoading();
  wx.showLoading({
    title: options.loadingText || '加载中'
  });
  getApp().globalData.loading = true;

  let requestUrl = BASE_URL + options.url;
  let headers = Object.assign({}, HEADER, options.header);

  return new Promise((resolve, reject) => {
    wx.request({
      url: requestUrl,
      header: headers,
      method: options.method || 'POST',
      timeout: 300000,
      data: options.data,
      success: function (response) {
        hideLoading();
        const status = response.statusCode;
        const data = response.data;

        let message = '';
        // 失败响应码处理
        if (status < 200 || status >= 400) {
          message = data.msg || `请求失败(${status})，请检查网络或联系管理员！`;
          wx.showToast({
            title: message,
            icon: 'none'
          });
          return reject(response);
        } else {
          const code = data.code || SUCCESS_CODE;
          const msg = data.msg || '请求成功';
          const inWhiteList = config.whiteList.includes(options.url); // 请求地址是否在白名单内
          if (code !== SUCCESS_CODE && !inWhiteList) {
            wx.showToast({
              title: msg,
              icon: 'none',
              duration: 2500
            });
          }
        }
        resolve(response);
      },
      fail: function (err) {
        hideLoading();
        wx.showToast({
          title: '请求超时或服务器异常，请检查网络或联系管理员！',
          icon: 'none',
          duration: 2500
        });
        reject(err);
      },
      complete: res => {}
    });
  });
}

export default {
  request
};

常用代码库

wx.js (微信 jssdk 初始化+授权)

微信网页授权，微信 jssdk 初始化
url 和 source 根据项目需求自行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
 * 微信授权和jssdk
 */

// 微信风格错误提示
var errorPage = `<div class="page"><div class="weui-msg"><div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div><div class="weui-msg__text-area"><h2 class="weui-msg__title">操作失败</h2><p class="weui-msg__desc">请用微信内置浏览器打开</p></div></div></div>`;
var errorPageCss =
  "<style>.weui-msg{padding-top:48px;padding:calc(48px + constant(safe-area-inset-top)) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);padding:calc(48px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);text-align:center;line-height:1.4;min-height:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;background-color:#fff;}.weui-msg__icon-area{margin-bottom:32px;}.weui-msg__text-area{margin-bottom:32px;padding:0 32px;-webkit-box-flex:1;-webkit-flex:1;flex:1;line-height:1.6;}.weui-msg__text-area:first-child{padding-top:96px;}.weui-msg__title{font-weight:700;font-size:22px;}.weui-msg__desc,.weui-msg__title{margin-bottom:16px;word-wrap:break-word;word-break:break-all;}.weui-msg__desc{font-size:17px;color:rgba(0,0,0,0.9);}.weui-icon-warn:before{content:'';margin:0;width:64px;height:64px;display:block;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAASKSURBVGiB7ZpNaBNNGMefZyat0GaVttY1YvGQBnIRq0XqoYVYbQ+eBaEH0aNK8Oi1V48lVI+Kh4IgRVApiNZAe4mlevEQSHMoBfNRm6hJW4i783hI8COzSfYryZvX/k6bmdl5/v/dyczOBxIRdDKs3QKccmCg3XS8AY/L9RWLlExSKkXJJOj673TO0e9Hnw/9fvB6XQyILvRCmkaJhHj7VqytQaHQuLyisPPn2aVLGAiAx+kTdGbg+3f92TOxvAx7e3Zu7+lhk5P86lU4fNi2BLsG9vb0J0/Eu3fw44ft2BW6utjFi/z6dejpsXG3dQNCiGhUf/wYikUb8Wri9fIbN1goBMxav2LRQKGgz8+LtTVozviNZ8/yO3ewv9/CLeYNUDKp379PX77Y0mZa0NGj/N499PvNljdpgD580ObmTHUyzlEUz927eO6cmbKmDIhYTI9EbHY19jDtofE/huJx/cGDlqoHgEJBm5ujeLxhwQYGKJPRI5EWtZwqCgU9EqFMpn6pugOhpomFBUql7IRXFH7tGihKRcrTpzaeAqVSYmGBh8N1Bux6BkQ0KlZXrUYtg4cO4YUL5Q6Rcjl8/pxsvUaxuoqnT7PLl2sVqNmEKJsVi4tN6u8tQCQWFymbrZVfwwCRWFqidLpZsqxA6bRYWqr1KI0N0OamiEabKMoitLJCnz8bZhkbECsr8O1bMyVZg3I5sbxsmGVkIJ+nWKy5iqxDsRjk83K6gQGxsdGw9209lMmIjQ053cAAra//NRu0GZBAiMq1EC70ZrpO6+tysmSgWKREwmkwANrfh1yu8iOXo/19F+pMJORJSLUBymRoe9t5sGZA29ty25YM7OzA7m6rJFlkd5d2dqrSpCa0tdX+0bcWRLC1VZUmvYG2fHiaRpYnvQHpHf23aNyEOo0DA+1GMjAw0A4ZppHkVRvA8iTQOZoGpVLlulQCTXOlVlmeNKUcGgJEF4aCUkm8f4/5PJQ/AX6ZcQIiDA1VpVUbwIEB6O11Zd1TvHzpvJK/6O3Fxk1IVXFw0OXALoGDg6iqVYnSn9jrxUCgRYosgoGAvLtj0I3i6Chw7k5Mzl2sCkdH5WSDdSE2PCxUtdYk2ixdXfzmTTY9DQDi9Wv90SOHWyGoqmx4WE43Gsj6+nBszEkwAGAjI2xqChgDxtjUFBsZcVghjo1BX59BIOPwExNw5IijgN3dvxsP59Dd7aQy7O9nk5OGWcYG8NQpFgo5CUmbm/D1a+U6nSaj+bh5cGICT5wwzqq1P0DZrD4762RxDk+eZFeugBDixQsnyxx4/DifncVjx4xz62xwiDdv9IcP2zxBQ+S3btlZ3AUAFgqx8XH3NVmBjY/Xb8x1P6c9HjYzgz6fu5rMgz4fm5mpv5vfYD6AqsrDYXDrE9USisLDYfnboYrGExoMBvnt2/a20e1T3uQLBhsW/De2Wct09kZ3Gcrl9Pl5+vjRljYTapp61KBCZx/2+EUHH7f5kw4+8PQnmkbxuHj1Snz6ZGplW1HYmTNsehqDwXYfOZPpyEN/beX/t7TYaRwYaDc/AcyLEvgVsZj4AAAAAElFTkSuQmCC');}.weui-icon_msg.weui-icon-warn{color:#fa5151;font-size:64px;display:inline-block;vertical-align:middle;font:normal normal normal 14px/1 weui;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;}</style>";

// 微信jssdk配置初始化
function api_initWxjssdk(params) {
  $.ajax({
    url: '//初始化jssdk的接口地址',
    dataType: 'jsonp',
    timeout: 2000,
    jsonpCallback: 'jscfg',
    // async: false,
    data: {
      url: window.location.href,
      source: 'test2'
    },
    success: function (result) {
      wx.config($.parseJSON(result.jsCfg));
    }
  });
}

// 获取url中所有的参数 name: 特定参数
const getUrlParameter = name => {
  let array,
    result = {};
  if (window.location.search) {
    array = window.location.search.replace(/^\?/, '').split('&');
  } else if (window.location.hash) {
    array = window.location.hash.replace(/^\#/, '').split('&');
  } else {
    array = [];
  }
  if (array.length === 0) return null;
  for (let i = 0; i < array.length; i++) {
    let keyValue = array[i].split('=');
    result[keyValue[0]] = keyValue.length == 2 ? keyValue[1] : '';
  }
  return name ? result[name] : result;
};

// 浏览器类型
var browser = (function () {
  var u = navigator.userAgent;
  var ua = u.toLowerCase();
  var browser = {
    runOnlyWx: true, // 是否只在微信浏览器环境运行
    isWeChat: null,
    isWechatdevtools: null,
    isIos: /iPhone/i.test(ua),
    isAndroid: /Android/i.test(ua),
    ua: ua,
    mobile: !!u.match(/AppleWebKit.*Mobile.*/)
  };

  browser.isWeChat = browser.ua.match(/MicroMessenger/i) == 'micromessenger';
  browser.isWechatdevtools = browser.ua.match(/wechatdevtools/i) == 'wechatdevtools';
  console.info('Browser:', browser);
  // 运行在非手机环境时显示提示
  if (browser.mobile) {
    if (browser.runOnlyWx && !browser.isWeChat) {
      $('#app').before(errorPageCss).html(errorPage); // 微信风格错误提示
    }
  } else {
    $('#app').html('请用手机浏览器打开');
  }
  window.globalData = Object.assign({}, window.globalData, {
    browser: browser
  });
  return browser;
})();

if (browser.mobile) {
  var ua = navigator.userAgent.toLowerCase();
  if (browser.isWeChat) {
    var openid = window.localStorage.getItem('SDGAME_openid');
    if (openid == null) {
      openid = getUrlParameter('openid');
    }
    if (openid == null) {
      window.location.href = 'https://服务器授权微信api接口地址?redirect=' + encodeURI(location.href) + '&source=test2&auth_type=snsapi_base';
    }
    if (openid != null) {
      window.localStorage.setItem('SDGAME_openid', openid);
      api_initWxjssdk();
    }
  }
}

wx.ready(function () {
  wx.hideAllNonBaseMenuItem();
  wx.showMenuItems({
    menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:refresh', 'menuItem:profile', 'menuItem:addContact', 'menuItem:copyUrl', 'menuItem:favorite']
  });
  var imgsUrl = window.location.href;
  var imgFxUrl = imgsUrl.substring(0, imgsUrl.lastIndexOf('/') + 1);
  var shareData = {
    title: '',
    desc: '',
    link: location.href.split('?')[0] + '?share=1',
    imgUrl: imgFxUrl + '/img/share.jpg'
  };
  wx.onMenuShareAppMessage(shareData);
  wx.onMenuShareTimeline(shareData);
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid) {
    wx.updateAppMessageShareData(shareData);
    wx.updateTimelineShareData(shareData);
  }
});

常用js

链接仅展示代码，如需使用请将代码复制到项目中

名称 链接
rem 适配 https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/rem.js
禁止下拉 dis-scroll.js https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/dis-scroll.js
预加载资源 preload.js https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/preload.js
jquery (v3.4.1) https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/jQuery.min.js
jquery (v2.1.4) https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/jQueryv2.min.js
微信sdk jweixin (1.6.0) https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/jweixin.js
html2canvas (1.4.1) https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/html2canvas.js
Vue (v2.6.10) https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/js/vue.min.js

常用CSS

链接仅展示代码，如需使用请将代码复制到项目中

名称 链接
weui.css https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/css/weui.min.css
animate.css https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/css/animate.min.css
初始化样式 initialize.css https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/css/initialize.css
自定义公共样式 common.css https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/css/common.css

其它

链接仅展示代码，如需使用请将代码复制到项目中

名称 链接
省市区级联数据 https://cdn.jamesy.cn/gh/JamesY-Jey/public/assets/city.json

公共CDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# weui
https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.3/weui.min.js
https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css
https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css

# wxjssdk
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
https://res.wx.qq.com/open/js/jweixin-1.2.0.js

# vconsole
https://unpkg.com/vconsole/dist/vconsole.min.js

# 其他
https://unpkg.com/axios/dist/axios.min.js
# Vue2开发环境版本，包含了有帮助的命令行警告
https://unpkg.com/vue@2.6.14/dist/vue.js
# Vue2生产环境版本，优化了尺寸和速度
https://unpkg.com/vue@2.6.14/dist/vue.min.js

附：免费开源的公共CDN

名称 链接
jsDelivr https://www.jsdelivr.com/
unpkg https://unpkg.com/
cdnjs https://cdnjs.com/
js.org https://www.js.org/

国内公共CDN：

名称 链接
elemecdn https://npm.elemecdn.com/
bootcdn https://www.bootcdn.cn/
unpkg.com 的国内镜像地址 https://unpkg.zhimg.com/
staticfile https://www.staticfile.org/

常见问题解决方案

安卓键盘顶起元素的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 解决提交按钮被安卓键盘顶起
var formSubmitBtn = $('#formSubmitBtn');
var docmHeight = document.documentElement.clientHeight;
var showHeight = document.documentElement.clientHeight;
window.onresize = ()=>{
  return(()=>{
    showHeight = document.body.clientHeight;
    if(docmHeight > showHeight){
      formSubmitBtn.hide();
    }else{
      formSubmitBtn.show();
    }
  })()
}

H5 显示控制台

1
2
3
4
5
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

H5 页面唤醒支付宝 app 指定页面

原文链接：https://blog.csdn.net/zhoujibin1025/article/details/109219410

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
alipayqr://platformapi/startapp?saId=10000003 // 手机充值
alipayqr://platformapi/startapp?saId=10000007 // 扫一扫
alipayqr://platformapi/startapp?saId=10000009 // 爱心捐赠
alipayqr://platformapi/startapp?saId=100000011 // 彩票首页
alipayqr://platformapi/startapp?saId=100000033 // 话费卡转让
alipayqr://platformapi/startapp?saId=10000110 // 关于
alipayqr://platformapi/startapp?saId=10000112 // 服务授权
alipayqr://platformapi/startapp?saId=20000116 // 转账
alipayqr://platformapi/startapp?saId=20000056 // 付款码-----210
alipays://platformapi/startapp?appId=20000003 // 账单
alipays://platformapi/startapp?appId=20000076 // 账单
alipays://platformapi/startapp?appId=20000006 // 切换账户
alipays://platformapi/startapp?appId=20000008 // 支付宝登出
alipays://platformapi/startapp?appId=20000009 // 手机号注册
alipays://platformapi/startapp?appId=20000010 // 绑定手机
alipays://platformapi/startapp?appId=20000011 // 客服帮助
alipays://platformapi/startapp?appId=20000013 // 修改支付密码
alipays://platformapi/startapp?appId=20000014 // 我的银行卡
alipays://platformapi/startapp?appId=20000015 // 找回登录密码
alipays://platformapi/startapp?appId=20000017 // 修改登录密码
alipays://platformapi/startapp?appId=20000019 // 余额
alipays://platformapi/startapp?appId=20000020 // 卡包
alipays://platformapi/startapp?appId=20000024 // 支付宝设置
alipays://platformapi/startapp?appId=20000027 // 账号切换
alipays://platformapi/startapp?appId=20000031 // 设置个人头像
alipays://platformapi/startapp?appId=20000032 // 余额宝
alipays://platformapi/startapp?appId=20000033 // 提现
alipays://platformapi/startapp?appId=20000038 // 身份验证
alipays://platformapi/startapp?appId=20000048 // 添加生活好
alipays://platformapi/startapp?appId=20000049 // 意见反馈
alipays://platformapi/startapp?appId=20000050 // 打开地图
alipays://platformapi/startapp?appId=20000057 // 账号管理
alipays://platformapi/startapp?appId=20000068 // 快速挂失
alipays://platformapi/startapp?appId=20000068 // 安全中心
alipays://platformapi/startapp?appId=20000071 // 城市一卡通
alipays://platformapi/startapp?appId=20000078 // 上银汇款
alipays://platformapi/startapp?appId=20000081 // 更多
alipays://platformapi/startapp?appId=20000122 // 首页活动
alipays://platformapi/startapp?appId=20000123 // 收钱
alipayqr://platformapi/startapp?appId=68687017 // 年度账单
alipayqr://platformapi/startapp?appId=20000101 // 生活号
alipayqr://platformapi/startapp?appId=20000102 // 打开nfc
alipayqr://platformapi/startapp?appId=20000107 // 出境
alipayqr://platformapi/startapp?appId=20000108 // 挂号就诊
alipayqr://platformapi/startapp?appId=20000110 // 我的保障
alipayqr://platformapi/startapp?appId=20000115 // 设备管理
alipayqr://platformapi/startapp?appId=20000119 // 阿里游戏
alipayqr://platformapi/startapp?appId=20000118 // 芝麻信用
alipayqr://platformapi/startapp?appId=20000120 // 饿了么
alipayqr://platformapi/startapp?appId=20000123 // 收钱
alipayqr://platformapi/startapp?appId=20000125 // 首页
alipayqr://platformapi/startapp?appId=20000126 // 免费wifi
alipayqr://platformapi/startapp?appId=20000130 // 滴滴
alipayqr://platformapi/startapp?appId=20000132 // 亲情号
alipayqr://platformapi/startapp?appId=20000134 // 股票自选
alipayqr://platformapi/startapp?appId=20000135 // 火车票
alipayqr://platformapi/startapp?appId=20000136 // 游戏充值
alipayqr://platformapi/startapp?appId=20000139 // 酒店搜索
alipayqr://platformapi/startapp?appId=20000141 // 修改昵称
alipayqr://platformapi/startapp?appId=20000142 // 娱乐宝
alipayqr://platformapi/startapp?appId=20000143 // 火车票汽车票预定
alipayqr://platformapi/startapp?appId=20000146 // 我的淘宝
alipayqr://platformapi/startapp?appId=20000150 // 汇率换算
alipayqr://platformapi/startapp?appId=20000153 // 游戏中心
alipayqr://platformapi/startapp?appId=20000155 // 飞猪
alipayqr://platformapi/startapp?appId=20000157 // 国际机票查询
alipayqr://platformapi/startapp?appId=20000160 // 蚂蚁会员
alipayqr://platformapi/startapp?appId=20000161 // 理财小工具
alipayqr://platformapi/startapp?appId=20000162 // 羊城通
alipayqr://platformapi/startapp?appId=20000165 // 定期理财
alipayqr://platformapi/startapp?appId=20000161 // 指纹手势解锁
alipayqr://platformapi/startapp?appId=20000168 // 年度账单
alipayqr://platformapi/startapp?appId=20000176 // 红包
alipayqr://platformapi/startapp?appId=20000183 // 设置手势密码
alipayqr://platformapi/startapp?appId=20000161 // 指纹手势解锁设定界面
alipayqr://platformapi/startapp?appId=20000186 // 通讯录
alipayqr://platformapi/startapp?appId=20000161 // 绑定智能手环
alipayqr://platformapi/startapp?appId=20000197 // 首页-热门游戏
alipayqr://platformapi/startapp?appId=20000199 // 花呗
alipayqr://platformapi/startapp?appId=20000205 // 亲情圈
alipayqr://platformapi/startapp?appId=20000218 // 黄金
alipayqr://platformapi/startapp?appId=20000225 // 借条
alipayqr://platformapi/startapp?appId=20000227 // 卡包
alipayqr://platformapi/startapp?appId=20000234 // 刷脸
alipayqr://platformapi/startapp?appId=20000235 // 服务提醒
alipayqr://platformapi/startapp?appId=20000241 // 车险服务
alipayqr://platformapi/startapp?appId=20000243 // 总资产
alipayqr://platformapi/startapp?appId=20000248 // 个性签名
alipayqr://platformapi/startapp?appId=20000252 // 朋友模块
alipayqr://platformapi/startapp?appId=20000255 // 账户充值
alipayqr://platformapi/startapp?appId=20000266 // 邮箱账单
alipayqr://platformapi/startapp?appId=20000288 // 聊天室
alipayqr://platformapi/startapp?appId=20000290 // 可能认识的人
alipayqr://platformapi/startapp?appId=20000298 // 证书管理
alipayqr://platformapi/startapp?appId=20000301 // 多设备管理
alipayqr://platformapi/startapp?appId=20000305 // 支付宝内付款码声波付
alipayqr://platformapi/startapp?appId=20000307 // 暗号 —400