前端公共 Js 函数库使用指南

前端公共 Js 函数库使用指南

此插件基于传统项开发方式，将项目开发过程常用函数进行集成，并封装了统一ajax 网络请求函数，对微信官方jssdk也进行二次封装，同时还提供了常用的页面交互组件（无需编写 html 结构，由 js 自动构建）。此插件适用于传统 html+css+js 开发的项目，使用此插件可有效提升开发效率。

---

起步

1. 接入 common.js

直接script标签引入
<script src='https://****/common3.0.js'></script>

2. 构造函数暴露方式参考

插件会自动根据当前用户模块环境将构造函数暴露出来使用。

  // commonjs模块规范
  if (typeof module === "object" && typeof module.exports === "object") {

    // commonjs模块规范
    module.exports = commonFunction();
  } else if (typeof define === "function" && define.amd) {

    // AMD模块规范
    define(function (require, exports, module) {
      module.exports = commonFunction();
    });
  } else if (typeof define === "function" && define.cmd) {

    // CMD模块规范
    define(function (require, exports, module) {
      module.exports = commonFunction();
    });
  } else {

    // 无模块环境 将commonFunction暴露到全局
    root.common = commonFunction();
  }

3. 初始化构造函数

构造函数参数说明:

参数名	用途	默认值
baseUrl	接口请求基础路径	空字符串
env	应用环境dev开发环境 prd生产环境 (开发环境下会打开vconsole调试)	dev
requestLoading	发送网络请求时是否展示 loading	true

示例:

  const commom = new commonFunction({
    baseUrl:"",
    env:"",
    requestLoading:""
  })

---

工具函数

方法列表

函数名	用途	参数	返回值
getEnvironment	获取当前应用环境	无	返回当前应用环境 wxapp:微信小程序 wxh5:微信h5 browser:普通浏览器 app:手机app应用
countDown	计算倒计时	date:传入倒计时结束时间的时间戳或日期字符串	object倒计时信息
format	将时间戳转换为日期字符串	timeStamp:时间戳	日期字符串如:2023-09-20 00:00:00
randomInt	指定范围计算随机整数	min:最小值 max:最大值	随机整数
randomFloat	指定范围计算随机浮点数	min:最小值 max:最大值	随机浮点数
shuffle	将数组顺序打乱	array:原数组	乱序后的数组
groupBy	根据数组内对象属性进行分类	arr:数组对象 attr:用于分类的属性值	分类后的数据
parseQueryString	获取 url 参数，并组合成对象返回	url:需要获取参数的url地址	页面参数对象
getFromData	将 from 表单中的数据一次性获取并转换为对象	id:from表单的id	object:from表单中的数据
getQueryVariable	查询指定 url 参数	variable:参数名	指定的参数值
checkUrl	判断当前页面网络协议	isReplace:当前页面为http时是否自动跳转到https	boolean:是否为https协议

---

网络请求

方法列表:

函数名	用途
request (Promise)	网络请求
setAuthData	设置请求头

1. Request 网络请求

此函数为基于Jquery Ajax方法的基础上进行的二次封装，用于发送请求，与后端服务器进行交互。

示例:

  //初始化构造函数
  const common = new commonFunction()
  //发送请求
  common.request({
    url:"", //接口地址
    type:"", //请求方式
    contentType:"",
    headers:{},
    hsXhrFields:true,
    beforRequest:()=>{},
    data:"" //请求参数
  }).then(res=>{
    //请求成功
  }).catch(err=>{
    //请求失败
  })

参数说明:

参数名	说明	默认值
url (string)	后端接口地址	无
type (string)	请求方式	GET
data (object)	请求参数	无
contentType (string)	数据类型	JSON
headers (object)	请求头	无
hsXhrFields (boolean)	是否携带跨域凭证	true
beforRequest (function)	请求发送前执行的函数	Function

(若初始化 common 实例对象时指定了baseUrl 参数且 url 参数地址不以http 或 https开头则会将 baseUrl 与 Url 进行拼接)

2. setAuthData 设置接口调用凭证

在项目开发中可能会遇到接口请求需要在请求头中携带调用凭证（token），setAuthData 方法就是为应对这种情况的，通过调用此方法可往全局接口请求头中添加想要的字段，单个页面调用一次即。

示例:

  const common = new commonFunction()
  //往全局请求头中添加接口调用凭证
  common.setAuthData('base Token','value***********')

参数列表:

参数名	说明	默认值
key (string)	接口调用凭证的 key	无
value (string)	接口调用凭证的值	无

---

微信 JSSDK

插件对微信weixin-js-sdk进行了二次封装，旨在提升微信开发效率。

方法列表:

函数名	用途
wechatConfig (Promise)	微信 jssdk 鉴权
shareConfig (Promise)	配置微信分享
getSites (Promise)	获取用户位置信息

1. wechatConfig 微信 Jssdk 鉴权方法

此方法用于 jssdk 鉴权操作，调用微信相关 api 如微信分享，获取位置信息等，都需要先调用鉴权方法且鉴权通过后才能调用。

示例:

const common = new commonFunction()
common.wechatConfig({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
}).then(res=>{
  //鉴权成功
}).catch(err=>{
  //鉴权失败
})

参数列表:

参数名	说明	默认值
configData (object)	微信鉴权参数	无

2. shareConfig 配置微信分享

调用此方法可以配置微信应用内分享消息卡片的标题，缩略图，描述等信息。(需要先调用微信鉴权方法且鉴权通过后才可配置成功)

示例:

const common = new commonFunction()

const isPass = await common.wechatConfig(configData)

//判断鉴权是否通过
if(!isPass) return;

common.shareConfig({
    title: window.title, //分享标题
    link: location.href, //分享地址
    desc: "", //分享描述
    imgUrl: "", //分享缩略图
    success(res) {}, //分享成功回调函数
    cancel(can) {}, //取消分享回调函数
    fail(fail) {}, //分享失败回调函数
})

参数列表:

参数名	说明	默认值
options (object)	微信分享配置信息	{title: window.title,link: location.href,desc: "",imgUrl: "",success(res) {},cancel(can) {},fail(fail) {},}

3. getSites 获取用户位置信息

返回当前用户位置信息(需要先调用微信鉴权方法且鉴权通过后才可配置成功)
示例:

  const common = new commonFunction()

  const isPass = await common.wechatConfig(configData)

  //判断鉴权是否通过
  if(!isPass) return;

  common.getSites('wgs84').then(res=>{
   // 获取成功
   console.log(res)
  }).catch(err=>{
   // 获取失败
   console.log(err)
  })

  //默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'

参数列表:

参数名	说明	默认值
type (String)	默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入gcj02	wgs84

---

页面交互

方法列表

函数名	用途	参数
showToast	显示提示文字	text:提示文案 times:持续时间
alert	弹出对话框	option:配置参数 callback:弹窗按钮点击后回调函数
confirm	弹出确认对话框	option:配置参数 confirm:点击确认回调函数 cancel:点击取消回调函数
loading	显示loading加载层	title:加载标题
hideLoading	关闭loading弹窗	callback:关闭后回调函数
close	关闭弹框	type:弹窗类型（合法值:alert,confirm,toast,loading）

调用示例:

showToast 提示框

common.showToast("加载中", 1000, () => {
  //提示框关闭回调
  console.log("toast close");
});

---

alert 对话框

common.alert({
  title:'提示',
  content:'确认框'
},()=>{
  //点击确认后回调函数 默认关闭弹窗
  console.log('close alert')
})

---

confirm 确认框

common.confirm(
  {
    title: "提示",
    content: "是否确认*****",
    hsCancel: true, // 是否展示取消按钮
    cancelText: "算了", //取消按钮文案
    hsConfirm: true, //是否展示确认按钮
    confirm: "确认",
  },
  () => {
    //点击确认
    console.log("confirm click");
  },
  () => {
    //点击取消
    console.log("cancel click");
  }
);

---

loading 加载框

common.loading("加载中")

---

hideLoading 关闭加载框

common.hideLoading()

Created Date: 2023.09.28
Developer: Weesion.Zhang(张文璇)
Email: weesionzhang@gmail.com
Version: 3.0