这里写自定义目录标题
个人工作笔记
益鸟CRM后台
- 签名算法
// 后端提供的params 放在query参数中算签名
let secret = '364af34d2a064a6fac3f5889470d7e87'
let obj = {
timestamp: parseInt(Date.now() / 1000),
appkey: '79af14bcef114812836e298292b32b4f',
}
// 需要把参数和和后台给的key 用MD5一起算签名
// let paramsMD = Object.assign(obj, config.params)
// let sign = md5(jsonSort(paramsMD) + secret)
// 不把参数放进去算签名
let sign = md5(jsonSort(obj) + secret)
// 把签名拼接到query中
config.url = config.url + '?' + 'appkey=' + obj.appkey + '×tamp=' + obj.timestamp + '&sign=' + sign;
// 全局设置请求头header中带token
config.headers['token'] = sessionStorage.getItem('token')
// console.log('request请求拦截器', config);
// 这些接口路径不显示请求loading
if (config.url.indexOf('convRec') == -1 && config.url.indexOf('polling') == -1 && config.url.indexOf('/v1/biz/list') == -1) {
showFullScreenLoading()
}
- keepAlive缓存页面
<!--缓存当前路由下meta.keepAlive为true页面-->
<keep-alive>
<router-view :key="key" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- meta.keepAlive为false的页面不缓存 -->
<router-view :key="key" v-if="!$route.meta.keepAlive"></router-view>
- element-ui 自定义表单验证
//data外 自定义校验规则
var validateNum = (rule, value, callback) => {
if (!this.opportunityForm.telephone && !this.opportunityForm.wechat) {
callback(new Error("电话和微信至少填写一项"));
} else {
callback();
}
};
//data内
telephone: [
{ required: true, validator: validateNum, trigger: "blur" },
{
pattern: /^1[3456789]\d{9}$/,
message: "手机号格式不正确",
trigger: "blur"
}
],
- element-ui 表单验证重复问题
// 解决表单验证重现问题
this.$nextTick(() => {
this.$refs.opportunityRef.clearValidate();
});
// 取消表单验证
this.$refs.opportunityRef.resetFields(); //表单数据清空
- download-excel 导出
<download-excel
class="export-excel-wrapper"
:data="excelData"
:fields="json_fields"
:fetch="exportExcel"
:before-generate="startDownload"
:before-finish="finishDownload"
:header="title"
name="标品预约信息.xls"
>
<el-button type="success">导出</el-button>
</download-excel>
// excel数据导出中
async exportExcel() {
var pageOffset = 1; //当前页码
var pageOffsetNum = 1; //总共多少页
var dataList = [];
if (this.total > 100) {
pageOffsetNum = Math.ceil(this.total / 100); //次数
}
for (let i = pageOffset; i <= pageOffsetNum; i++) {
let params = {
page_size: 100,
page_offset: i,
date: this.createTime / 1000, //日期的时间戳
query_type: this.categoryValue, //查询类型 cont - 联系人 tel - 手机号 ord_no - 订单编号 addr - 地址 wechat - 微信号
keyword: this.inputCategoryValue //keyword
};
const res = await API_getStandardInfo(params);
if (res && res.code == 0) {
dataList.push(res.data.list);
} else {
break; //退出当前循环
}
}
// 二维数组转为一维数组
this.excelData = dataList.flat();
console.log("导出excel表格数据", this.excelData);
return this.excelData;
},
// 数据导出开始
startDownload() {
console.log("数据导出开始");
this.myLoading = true;
},
// 数据导出完成
finishDownload() {
console.log("数据导出完成");
this.myLoading = false;
}
elementui下拉框滚动加载更多数据
//新建一个 directive.js文件 引入vue 创建自定义指令并导出
import Vue from 'vue'
export default () => {
Vue.directive('scroll', {
bind(el, binding) {
// 获取滚动页面DOM
const SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
let scrollPosition = 0
SCROLL_DOM.addEventListener('scroll', function () {
// 当前的滚动位置 减去 上一次的滚动位置
// 如果为true则代表向上滚动，false代表向下滚动
const flagToDirection = this.scrollTop - scrollPosition > 0
// 记录当前的滚动位置
scrollPosition = this.scrollTop
const LIMIT_BOTTOM = 100
// 记录滚动位置距离底部的位置
const scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) < LIMIT_BOTTOM
// 如果已达到指定位置则触发
if (scrollBottom) {
// 将滚动行为告诉组件
binding.value(flagToDirection)
}
})
}
})
}
//在main.js中引入全局注册
// 自定义指令 elementui下拉框滚动分页加载数据指令
import Directives from './directive/ScrollingLoad';
Vue.use(Directives)
html页面
<el-form-item label="推客人员">
<el-select
filterable
clearable
remote
v-model="ruleForm.tuike"
placeholder="推客人员"
:remote-method="getReferrerList"
v-scroll="loadMore"
>
<el-option
:label="
referrer.name +
'_' +
referrer.mobile +
'_' +
referrer.community
"
:value="referrer.id"
v-for="referrer in referrerList"
:key="referrer.id"
>
</el-option>
</el-select>
</el-form-item>
// 下拉分页加载更多
loadMore() {
// 这里写入要触发的方法
this.tuiKePageNum += 1;
if (this.referrerList.length > this.tuiKeTotal) return;
this.getReferrerList();
},
// 获取推荐人列表 通过关键字可以远程搜索
async getReferrerList(val) {
const res = await API_getGeneral({
page_offset: this.tuiKePageNum, //当前页
keyword: val
});
if (res && res.code == 0) {
this.tuiKeTotal = res.data.total;
this.referrerList = this.referrerList.concat(res.data.list);
}
},
在项目中使用Animate.css动画库
它的官网地址：https://animate.style/(可能需要梯子)
1.安装命令： npm install animate.css --save
2.在nodemodules复制animate.css到引入utils文件夹的nimate.css
3.在 main.ts全局 文件中写入 @import ‘./utils/animate.css’ 即可：如果放在其他位置，自己改下路径就OK的
ps:最后还需要注意：4.0版本 之后 要加 animate__animated 前缀，不然它是不会出效果哦
在TS项目中使用lodash库
$ npm i -g npm
$ npm i --save lodash
益鸟推客宝盒原生小程序
- app.js全局埋点
// 当前页面信息
currentPage: {
path: '', // 当前页面路径
startTime: 0, // 当前页面开始时间
},
// 页面启动生命周期================================================
onLaunch: function () {
// 在应用启动时绑定监听页面路由跳转事件 完成按钮点击和页面时长埋点
wx.onAppRoute(route => {
const path = route.path; // 当前页面路径
const time = new Date().getTime(); // 当前时间戳
// 如果currentPage.path不为空，说明有上一个页面
if (this.currentPage.path) {
const lastTime = this.currentPage.startTime; // 上一个页面开始时间
const lastPath = this.currentPage.path; // 上一个页面路径
const duration = time - lastTime; // 上一个页面停留时间
const currentPageTitle = this.getCurrentPageTitle(pageTitles, lastPath) // 当前页面title
const systemInfo = wx.getSystemInfoSync() //设备信息
// console.log('记录上一个页面>>标题', currentPageTitle, '>>设备信息', systemInfo, '>>路径', lastPath, '>>时间', duration);
// 上报数据到后台
util.requestLoading(pointUrl + '/v1/mp/view_page', {
user_id: wx.getStorageSync('userid') + '' || null, //用户id，未登录填 none
appid: 'wxab9895c4ac9ed7f1', //小程序应用id
dvc_id: '', //设备id
time: parseInt(new Date().getTime() / 1000), //发请求时间的时间戳，s为单位
app_ver: "", //app版本
event_name: "MPViewPage", //事件名称
page_title: currentPageTitle, //页面标题
page_url: lastPath, //页面链接，例如 https://uri，小程序用 page_path 同样的字段
page_path: lastPath, //页面路径，例如 pages/index/index
type: 1, //浏览类型，浏览页面 / 浏览视频 / 浏览图片
event_dur: parseInt(duration / 1000), //停留时间，s 为单位
ip: "", //ip地址，ipv4 格式
cntry: "", //国家
prov: "", //省份
city: wx.getStorageSync('cheng'), //城市
long: 0, //经度
lat: 0, //纬度
brand: systemInfo.brand, //品牌，例如 huawei、apple
model: systemInfo.model, //设备型号，例如 iPhone13
os: systemInfo.system, //操作系统，例如 ios
os_ver: systemInfo.system, //操作系统版本
scrn_h: systemInfo.screenHeight, //屏幕高度
scrn_w: systemInfo.screenWidth, //屏幕宽度
wifi: 0, //是否连接wifi
brower: '', //浏览器，例如 chrome
brower_ver: "", //浏览器版本
carrier: "", //运营商
net_type: "", //网络类型，例如 4g，5g
url_query: "", //链接包含的 query 参数
page_from: "", //上级页面
is_end: 1, //视频是否已播完 0 未播完 1 已播完
is_bottom: 1, //页面是否完整浏览 1 - 是 0 - 否
},
"POST", '',
function (res) {
if(res.code==0){
// console.log('浏览事件上传成功', res);
}
})
}
// 更新页面跳转前的时间戳
this.currentPage.path = path;
this.currentPage.startTime = time;
})
// 判断小程序是否有更新
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
// console.log('判断小程序是否有更新',wx.canIUse('getUpdateManager'))
// console.log('onCheckForUpdate====', updateManager)
updateManager.onCheckForUpdate(function (res) {
// console.log('onCheckForUpdate====', res)
// 请求完新版本信息的回调
if (res.hasUpdate) {
console.log('res.hasUpdate====')
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success: function (res) {
console.log('success====', res)
// res: {errMsg: "showModal: ok", cancel: false, confirm: true}
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
// wx.setStorageSync('store_manager_id', '')
wx.clearStorageSync()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
})
})
}
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// var city = wx.getStorageSync('cheng')
wx.login({})
wx.getSetting({
success: res => {
}
});
},
// 全局点击事件处理函数=============================================
wholeClickEvent: function (event) {
const systemInfo = wx.getSystemInfoSync() //设备信息
// console.log('点击当前按钮', event);
// 上报数据到后台
util.requestLoading(pointUrl + '/v1/mp/click', {
user_id: wx.getStorageSync('userid') + '' || null, //用户id，未登录填 none
appid: 'wxab9895c4ac9ed7f1', //小程序应用id
dvc_id: '', //设备id
time: parseInt(new Date().getTime() / 1000), //发请求时间的时间戳，s为单位
app_ver: "", //app版本
ip: "", //ip地址，ipv4 格式
cntry: "", //国家
prov: "", //省份
city: wx.getStorageSync('cheng'), //城市
long: 0, //经度
lat: 0, //纬度
brand: systemInfo.brand, //品牌，例如 huawei、apple
model: systemInfo.model, //设备型号，例如 iPhone13
os: systemInfo.system, //操作系统，例如 ios
os_ver: systemInfo.system, //操作系统版本
scrn_h: systemInfo.screenHeight, //屏幕高度
scrn_w: systemInfo.screenWidth, //屏幕宽度
wifi: 0, //是否连接wifi
brower: '', //浏览器，例如 chrome
brower_ver: "", //浏览器版本
carrier: "", //运营商
net_type: "", //网络类型，例如 4g，5g
event_name: "MPClick", //事件名称
page_title: event.name, //页面标题
page_url: event.path, //页面链接，例如 https://uri，小程序用 page_path 同样的字段
page_path: event.path, //页面路径，例如 pages/index/index
elem_id: event.id.toString(), //元素唯一标识id
elem_cont: event.name, //元素内容
elem_name: "bindTap", //元素名称
elem_type: "bindTap",//元素类型
elem_tgt_url:''//元素跳转链接
},
"POST", '',
function (res) {
if(res.code==0){
// console.log('点击事件上传成功', res);
}
})
},
// 获取当前页面的标题===============================================
getCurrentPageTitle: function (pageTitles, pagePath) {
// 根据路径信息获取页面配置信息
let pageTitle = '';
pageTitles.forEach((item) => {
if (item.path == pagePath) {
pageTitle = item.title
}
});
return pageTitle;
},
// 小程序自动检测更新===============================================
gen: function () {
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// console.log('onCheckForUpdate====', res)
// 请求完新版本信息的回调
if (res.hasUpdate) {
console.log('res.hasUpdate====')
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success: function (res) {
console.log('success====', res)
// res: {errMsg: "showModal: ok", cancel: false, confirm: true}
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
// wx.setStorageSync('store_manager_id', '')
wx.clearStorageSync()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
})
})
}
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
},
在页面点击事件中引用该方法
// 监听当前页面的tabbar 切换点击事件
onTabItemTap: function (item) {
// 监听点击事件参数----------------------------------------
let eleTap = {
id: 9,
name: 'tabBar产品服务',
path: 'pages/productTab/productTab'
}
// 调用全局上传点击事件方法
getApp().wholeClickEvent(eleTap);
// -------------------------------------------------------
},
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
