环境HBuilder X +VUE3
记录一下，几个我用的顺手的辅助类。
1、配置 config.js
配置类，很容易实现开发、正式环境的路径切换
const CONFIG = {
// 开发环境配置 服务器配置
development: {
assetsPath: '/static', // 静态资源路径
baseUrl: 'http://localhost:6666/', // 后台接口请求地址
dataUrl: 'http://localhost:6666/api', // 后台接口请求地址
hostUrl: '', // H5地址(前端运行地址)
weixinAppId: '' ,// 微信公众号appid
expiretime:3600//1小时
},
// 生产环境配置 服务器配置
production: {
assetsPath: '/static', // 静态资源路径
baseUrl: 'http://192.168.1.1:8080/', // 后台接口请求地址
dataUrl: 'http://192.168.1.1:8080/api', // 后台接口请求地址
hostUrl: '', // H5地址(前端运行地址)
weixinAppId: '' ,// 微信公众号appid
expiretime:3600//1小时
}
};
export default CONFIG[process.env.NODE_ENV];
2、请求request.js
/*request重写
调用
let obj={};
obj.Data = "[{\"str\":\"321\"},{\"str\":\"\"}]";
obj.DBstr = "123";
const params = {
"object": "Data",//指向DataController
"method": "GetTest",//指向方法
"data": JSON.stringify(obj),
}
this.$request({
data: params
}).then((res) => {
if (res.data == false) {
} else {
}
}, err => {
this.$mHelper.toast('请求失败');
})
}
*/
import indexConfig from '@/common/config.js';
import assist from '@/common/assist.js';
const PATH = indexConfig.dataUrl;
const request = (options) => {
let url=PATH+'/'+options.data.object+'/'+options.data.method
options=options.data;
uni.showLoading({
title: '加载中'
});
options.url=url;
options.method= 'POST';
options.header = {'content-type': 'application/json','authorization':'Bearer '+assist.gdata("Token")}
return new Promise((resolve,reject) => {
console.log(JSON.stringify(options));
uni.request({
...options,
success: (res) => {
console.log(res);
console.log(res.statusCode);
if(res.statusCode == '403') {
// 登录过期跳转到登录界面
uni.showToast({
title: '超时，请稍后再试！',
icon: 'none'
});
// logOut()
}
if(res.statusCode == '-1') {
uni.showToast({
title: res.data.msg ? res.data.msg : '接口请求失败！',
icon: 'none'
});
}
uni.hideLoading();
resolve(res);
},
fail: (err) => {
console.log(err);
console.log(options);
uni.hideLoading();
reject(err)
},
})
})
}
export default request
3、路由router.js
/*路由对象
* 示例：
this.navTo('/pages/home')
navTo(url) {
//console.log(url);
this.$mRouter.push({
route: url
});
},
*
*/
function constructor() {
this.callBack = () => {};
}
function beforeEach(callBack) {
if (callBack instanceof Function) this.callBack = callBack;
}
function push(to) {
this.callBack('navigateTo', to);
}
function redirectTo(to) {
this.callBack('redirectTo', to);
}
function reLaunch(to) {
this.callBack('reLaunch', to);
}
function switchTab(to) {
this.callBack('switchTab', to);
}
function back(delta) {
// #ifdef H5
history.back();
// #endif
// #ifndef H5
uni.navigateBack({
delta
});
// #endif
}
export default {
constructor:constructor,
beforeEach:beforeEach,
push: push,
}
要生效，需要先在main.js上 声明钩子
import $mRouter from '@/common/router.js';//路由重写
$mRouter.beforeEach((navType, to) => {
uni[navType]({
url: $assist.objParseUrlAndParam(to.route, to.query)
});
});
4、辅助类
import config from '@/common/config.js';
const PATH = Config.baseUrl;
const expire = config.expire; //缓存过期时间
/*辅助脚本 */
/*返回图片 服务器路径 */
function getimg(img) {
return PATH + img;
}
/*数值两位小数 */
function unitConverter(num) {
if (num) {
num = num.toString().split("."); // 分隔小数点
var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列
var res = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (i % 3 === 0 && i !== 0) {
res.push(","); // 添加分隔符
}
res.push(arr[i]);
}
res.reverse(); // 再次倒序成为正确的顺序
if (num[1]) {
if (num[1].length < 2) {
// 如果有小数的话添加小数部分
res = res.join("").concat("." + num[1] + '0');
} else if (num[1].length > 2) {
let data = num[1].substring(0, 2)
// 如果有小数的话添加小数部分
res = res.join("").concat("." + data);
} else {
res = res.join("").concat("." + num[1]);
}
} else {
res = res.join("").concat("." + '00');
}
} else {
res = '0.00'
}
return res;
}
/*日期格式 */
function formatDate(str) {
var now = new Date(parseInt(str.replace("/Date(", "").replace(")/", ""), 10));
var year = now.getFullYear(); //取得4位数的年份
var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
var date = now.getDate(); //返回日期月份中的天数（1到31）
var hour = now.getHours(); //返回日期中的小时数（0到23）
var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
var second = now.getSeconds(); //返回日期中的秒数（0到59）
//return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
return year + "-" + month + "-" + date;
}
/*日期格式 后缀 */
Date.prototype.Format = function(fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
"00" + o[
k]).substr(("" + o[k]).length)));
return fmt;
}
/*减法 防失精无限小数 */
function jian(arg2, arg1) {
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2));
//lastmodifybydeeka
//动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return ((arg2 * m - arg1 * m) / m).toFixed(n);
}
/*加法 防失精无限小数 */
function jia(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2));
return (arg1 * m + arg2 * m) / m;
}
/*缓存写入*/
function setCache(key, value, expire) {
let obj = {
data: value,
time: Date.now()/1000,
expire: expire
}
uni.setStorageSync(key, JSON.stringify(obj));
}
/*缓存读取*/
function getCache(key, value, expire) {
let val = uni.getStorageSync(key);
if (!val) return null;
let obj = JSON.parse(val);
if (Date.now() / 1000 - obj.time > obj.expire)//过期
{
uni.removeStorageSync(key);
return null;
}
return obj.data;
}
function objParseParam(obj){
console.log("111："+obj);
let paramStr="";
if(obj instanceof Array) return paramStr;
if(!(obj instanceof Object)) return paramStr;
for(let key in obj)
{
paramStr+=`${key}=${obj[key]}&`;
}
return paramStr.substring(0,paramStr.length-1);
}
function objParseUrlAndParam(path,obj){
console.log(path)
let url=path||'/';
let paramStr='';
if(obj instanceof Array) return url;
if(!(obj instanceof Object)) return url;
paramStr=this.objParseParam(obj);
console.log(paramStr)
paramStr && (url+='?');
url+=paramStr;
return url;
}
function showMsg(msg){
uni.showToast({
title:msg,
icon: 'none'
});
}
function showYes(msg){
uni.showToast({
title:msg,
icon: 'success',
duration: 1000
});
}
function showNo(msg){
uni.showToast({
title:msg,
icon: 'error',
duration: 1000
});
}
export default {
getimg: getimg,
unitConverter: unitConverter,
jian: jian,
jia: jia,
formatDate: formatDate,
sdata:setCache,
gdata:getCache,
objParseParam:objParseParam,
objParseUrlAndParam:objParseUrlAndParam,
showMsg:showMsg,
showYes:showYes,
showNo:showNo,
}
示例
//日期格式化
let datenow=New Date();
return datenow.formatDate("yyyy-mm-dd");
//浮点计算，偶尔会出现无限未小数点
let a='0.0001'; let b='0.0002';
return this.$assist.jia(a,b); //0.0003
return this.$assist.jian(a,b); //0.0001
//缓存
this.$assist.sdata("userName","张三")//赋值
this.$assist.sdata("userName",null)//清空
let userName=this.$assist.gdata("userName")//读取
if(this.$assist.gdata("userName")==null)//判断
//提示
this.$assist.showYes("修改成功")
this.$assist.showYes("连接异常")
//图片名， 假设从数据库读取 赋值 aimg='/upload/1.png'
<img :src="$assist.getimg(aimg)">
//这样加上域名，方便测试环境和正式环境无缝连接。
5、全局申明 main.js
vue3
import App from './App'
import store from './store'
import {
createSSRApp
} from 'vue'
import $mConfig from '@/common/config.js'; //服务器配置
import $assist from '@/common/assist.js';//赋值函数
import $mRouter from '@/common/router.js';//路由重写
import $request from '@/common/request.js';//POST 重写
import scan from '@/components/scan/scan.vue'//扫描
//申明钩子
$mRouter.beforeEach((navType, to) => {
uni[navType]({
url: $assist.objParseUrlAndParam(to.route, to.query)
});
});
export function createApp() {
const app = createSSRApp(App)
app.use(store)
app.config.globalProperties.$adpid = "1111111111"
//脚本申明
app.config.globalProperties.$mConfig = $mConfig;
app.config.globalProperties.$assist = $assist;
app.config.globalProperties.$mRouter = $mRouter;
app.config.globalProperties.$request = $request;
//组件申明
app.component("scan",scan);
//-end
return {
app
}
}
/*vue2 申明方法
import Vue from 'vue'
//自定义
Vue.prototype.$mConfig = $mConfig;
Vue.prototype.$assist= $assist;
Vue.prototype.$mRouter = $mRouter;
Vue.prototype.$request = $request;
*/