项目随笔小记

原创已于 2022-08-05 10:21:57 修改

· 置顶 · 288 阅读

0 ·

版权

文章标签：

#vue #uni-app #小程序

于 2020-11-25 10:38:05 首次发布

Vue 同时被 3 个专栏收录

25 篇文章

订阅专栏

element UI

8 篇文章

订阅专栏

axios

2 篇文章

订阅专栏

前端基础知识汇总 https://github.com/webVueBlog/Leetcode

web scoket

https://blog.youkuaiyun.com/The_more_more/article/details/126060873

VueX 数据持久化

//app.vue created() 添加
//在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") &&
      this.$store.replaceState(
        Object.assign(
          this.$store.state,
          JSON.parse(localStorage.getItem("userMsg"))
        )
      );

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload", () => {
      localStorage.setItem("userMsg", JSON.stringify(this.$store.state));
    });

uniapp 小程序swiper高度自适应

html


<view class="nav">...</view>
<swiper class="swiper">
        <swiper-item>
              <scroll-view scroll-y="true" class="scroll">
              <!-- 自适应内容 -->
              </scroll-view>
        </swiper-item>
</swiper>

css

.nav{
        height:400px;
}
.swiper{
    height: calc(100vh - 400rpx);
}
.scroll{
        height: 100%;
}

uniapp Canvas图片转base64格式

链接地址：https://www.cnblogs.com/nanyang520/p/12668065.html

//图片转base64
            urlTobase64(url){
                // #ifdef MP-WEIXIN
                    uni.getFileSystemManager().readFile({
                        filePath: url, //选择图片返回的相对路径
                        encoding: 'base64', //编码格式
                        success: res => { //成功的回调
                        console.log(res);
                            let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
                        },fail: (e) => {
                            console.log("图片转换失败");
                        }
                    })
                // #endif
                
                // #ifndef MP-WEIXIN
                    uni.request({
                        url: url,
                        method:'GET',
                        responseType:'arraybuffer',
                        success: ress => {
                            let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
                            base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
                        },fail: (e) => {
                            console.log("图片转换失败");
                        }
                    })
                // #endif

            }

element ui table加载手风琴为表格 https://www.freesion.com/article/86761405904/

Vue 每次进入页面显示在顶部

const router = new Router({})
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
})
export default router

Vue 网页内容禁止复制

// 在main.js 里面添加一段代码
document.onselectstart = function () { return false; }

每次显示顶部

main.js 最后添加

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
})

清除多次显示message消息

公共JS页面

import {
  Message
} from 'element-ui';
const showMessage = Symbol('showMessage');
let messageInstance = null;
class DoneMessage {
  [showMessage](type, options, single) {
    if (messageInstance && single) {
      messageInstance.close()
    }
    messageInstance = Message[type](options)
  }
  info(options, single = true) {
    this[showMessage]('info', options, single)
  }
  warning(options, single = true) {
    this[showMessage]('warning', options, single)
  }
  error(options, single = true) {
    this[showMessage]('error', options, single)
  }
  success(options, single = true) {
    this[showMessage]('success', options, single)
  }
}
export const message = new DoneMessage();

获取当前时间

 getData() {
      var myDate = new Date();
      myDate.getYear(); // 获取当前年份(2位)
      myDate.getFullYear(); // 获取完整的年份(4位,1970-????)
      myDate.getMonth(); // 获取当前月份(0-11,0代表1月)
      myDate.getDate(); // 获取当前日(1-31)
      myDate.getDay(); // 获取当前星期X(0-6,0代表星期天)
      myDate.getTime(); // 获取当前时间(从1970.1.1开始的毫秒数)
      myDate.getHours(); // 获取当前小时数(0-23)
      myDate.getMinutes(); // 获取当前分钟数(0-59)
      myDate.getSeconds(); // 获取当前秒数(0-59)
      myDate.getMilliseconds(); // 获取当前毫秒数(0-999)
      myDate.toLocaleDateString(); // 获取当前日期
      var mytime = myDate.toLocaleTimeString(); // 获取当前时间
      myDate.toLocaleString(); // 获取日期与时间
      // 对Date的扩展，将 Date 转化为指定格式的String
      // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
      // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
      // 例子：
      // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
      // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18

      Date.prototype.Format = function (fmt) {
        // author: meizz
        var o = {
          "M+": this.getMonth() + 1, // 月份
          "n+": this.getMonth() + 2, // 月份
          "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;
      };
      var time1 = new Date().Format("yyyy-MM-dd");
      return time1;
    },

main.js页面引用

import {message} from '@/utils/reaetMessage'

Vue.use(ElementUI);
//必须放在Vue.use之后
Vue.prototype.$message = message

VuePDF插件
https://blog.youkuaiyun.com/weixin_42398301/article/details/107672466
封装自定义指定（参考）
https://blog.youkuaiyun.com/smlljet/article/details/91874728
样式初始化

npm install --save normalize.css
import 'normalize.css/normalize.css'

//table对齐

.el-table {
      th.gutter {
        display: table-cell !important;
      }
    }

//vuex
this.$store.commit(‘token’,accessToken)
token 是motations里面的函数名，accessToken，传给state中的值
//往数组里面填数据

list = [...list,...[ a,b,c,d]]

//处理树（递归）

getData(arr) {
      //第一层
      var newTree = new Array();
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].children.length == 0) {
          delete arr[i].children;
        } else {
          var sonTree = new Array();
          sonTree = arr[i].children;
          arr[i].children = this.getNodes(sonTree);
        }
        newTree.push(arr[i]);
      }
      return newTree;
    },
    getNodes(arr) {
      //第二到n层
      var sonList = new Array();
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].children.length == 0) {
          delete arr[i].children;
        } else {
          var sonTree = new Array();
          sonTree = arr[i].children;
          this.getNodes(sonTree);
        }
        sonList.push(arr[i]);
      }
      return sonList;
    },
this.menulist =getData(data)

//处理背景图平铺

background-repeat:no-repeat center center ;
  background-size:cover;
  position: fixed;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  width: 100%;
  z-index: -1;
  height: 100vh;

//封装Vue指令

处理权限验证问题（按钮级别）

import Vue from "vue";
Vue.directive("has", {
  bind: function (el, binding) {
    //需要在DOM更新完成以后再执行以下代码，不然通过 el.parentNode 获取不到父节点，因为此时还没有绑定到
    Vue.nextTick(function () {
      var role = binding.value.role;
      if (!Vue.prototype.$_has(role)) {
        el.parentNode.removeChild(el);
      }
    });
  },
});

Vue.prototype.$_has = function (role) {
  //当前角色可以从cookie中获取
  var currentRole =JSON.parse(sessionStorage.getItem('perms')) ;
  if (Array.isArray(role)) {
    return currentRole.some(function (ele) {
      return role.indexOf(ele) >= 0;
    });
  } else {
    return currentRole.indexOf(role) >= 0;
  }
};

//echarts页面不是官网
https://info.swufe.edu.cn/netinfo/echarts/doc/example.html

新增test环境

修改page.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:prod": "node build/build.js -- prod",
    "build:test": "node build/build.js -- test",
    "build": "node build/build.js"
  },

修改config文件夹下的prod.env.js

let env = process.argv.splice(2)[1] || 'prod';
let api = env === 'prod' ? '/' : '/taxation'
module.exports = {
  NODE_ENV: '"'+env+'"',
  // 生产环境
  BASE_API:'"'+api+'"',
}

http.js修改baseURL

const baseURL = process.env.BASE_API

vant 加载pdf

<iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" width="100%" height="100%">
 This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf" rel="external nofollow" >Download PDF</a>
</iframe>

全局使用加载

//分装的http里面头部引入
import { Message, Loading } from 'element-ui';
let loading
function startLoading() {    //使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}
function endLoading() {    //使用Element loading-close 方法
  loading.close()
}

let needLoadingRequestCount = 0
export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}
//路由拦截

h5加载pdf pdfh5
vue使用粒子特效

npm install vue-particles --save

在main.js里面引用

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

在需要的地方直接引用

<template>
  <div id="app">
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <router-view></router-view>
  </div>
</template>
/*如果想做背景图片 可以给标签一个class 直接添加背景图*/

二、属性说明

color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。

作者：GL曲终人散
链接：https://www.jianshu.com/p/0153f6e3efcd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。