tianruine-CSDN博客

就是在原生里面先写好打开原生分享的逻辑的一个函数，但是不执行，然后把调用这个函数挂载到webview.window上，然后再H5页面需要的调用的时候就直接传入函数中的参数，调用函数就可以调用原生的分享。是在原生里面通过ifream.src自定义网址并携带参数，在原生里面拦截这个接口，并且取出里面的参数，然后通过区分发来的这个接口，来的调用原生的分享。键盘不能回落问题出现在iOS12+和wechat6.7.4+中，而在微信H5开发中是比较常见的Bug。调用的时候不刷新WebView。...

2022-07-22 10:31:57 1926 1

原创 webpack5性能优化

资源文件打包 base64css文件的单独提取（1. 单独提取利用浏览器并行加在机制，2. 可以使用 splitchunk 减少重复引用导致的代码冗余）css 样式的兼容性处理（使用了postcss）css 样式压缩使用 babel 对 js 代码进行兼容性处理（简单的）babel 使用 runtime 解决辅助代码重复的问题使用 core-js 处理 esnext 不能被 es5 转化的语法糖开启 sourcemap 帮助我们快速定位问题利用 webpack 提供的 tree-sh

2022-07-11 22:44:14 545

原创 webpack 5

1.在webpack中5个重要的元素2.所有东西都要导出，通过3.图片的打包通过：url-loader file-loader html-loader在webpack@5中通过type='‘accect’ 参数详解资源目录的自定义rules配置中增加 generator 配置项2.3 说明：两种修改方式同时出现时，以generator 为准html文件中引入（html-loader处理） ,这样就能直接在html模板文件引入图片或者css3.加载css资源（loader的使用

2022-07-11 22:40:46 817

原创 redux 原理

首先用法在createstore(reducers,applyMiddleware（）)在封装createstore的参数的时候，进行了判断，createstore的参数是三个分别是reducer, preloadedState, enhancer，也可以是两个，如果第二个是对象那么第2参数就是preloadedState，如果是函数那么参数就是enhancer，传是三个点时候，第三个参数是函数就是enhancer，也就是也可以写成createstore(reducers,preloadedState，ap

2022-06-30 22:44:33 199

原创 webpack

文件名：webpack.conig.js书写一个 module.exports = { 所有的配置项 }书写一个 module.exports = { 所有的配置项 }以下是在生产webpack@5 webpack-cli@3注意这里是webpack-cli@3直接打开命令行, 切换目录到你的项目根目录 1. 输入指令: 2.需要把这个指令配置在 package.json 文件中去启动 3. 配置 package.json 文件 => 找到 scripts 字段

2022-06-27 14:15:35 270

原创 Electron

在Electron里面有两个进程分别是主进程与渲染进程主进程可以操作作操作系统，数据库的操作，运行node.js当渲染进程想要电脑系统的信息的时候，通过IPC通信给主进程，通过主进程获取电脑系统的数据，再返回给渲染进程但是这样不安全，因为主进程与渲染进程没了隔离，在渲染进程这里就直接操作主进程了方法2：通过桥梁contextBridge思路：创建一个preload的文件夹，这里面有个index.js代码：在这个桥里面可以写node,调用主进程里面的Api,在这里可以访问window,把里面的

2022-06-25 21:29:30 356

原创 vue3中的TS

2.defineComponent让属性具有ts的特性defineComponent可以给组件的setup方法准确的参数类型定义.defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断defineComponent 可以正确适配无 props、数组 props 等形式引入 defineComponent() 以正确推断 setup() 组件的参数类型 3.断言as4.在setup中的props类型（1）通过对象（2）通过泛型

2022-06-23 22:49:29 4072

原创 vue3中的hooks

在react中我们可以通过自定义hooks实现方法，逻辑的服用，在用的时候直接引入这个hooks就行先看一个例子，是之前不用hooks的情况下，是下面这样的，逻辑看起来很乱，并且里面的方法不能复用实现这样一个功能点击+数字加1，增加后面也会变，点击增加 n个前面v就多少个，点重置v变一个所以我们考虑，渲染v的方法写成一个hooks,控制数字的写成一个hooks代码：在hooks文件夹下创建两个文件夹，一个是useCounter.js控制数字的，一个是useWords.js控制v的useCounter.

2022-06-22 01:29:43 927

原创 vue3中vuex与router的改变

在store/index在用的时候与vue2不同的而地方是创建store的时候vue2是const store = new Vuex.Store({}），在挂载的时候vue2在main.js里面而在vue3中通过app.use(store)进行使用在main.jsrouter在router/index下知识点：用createRouter来创建路由对象, createWebHistory是history模式当用的时候在about.vue组件知识点通过useRouter, us

2022-06-22 01:14:28 470

原创组合式API-composition-api

原理就是之前我们写的options API写成了API-composition-api首先我们创建一个vue后缀的文件名，然后里面的内容是这样注意:在setup()不能访问this访问props注意：在组合API ref或者reactive等等API的时候是具有响应式特点的，但是要是通过props从父组件中把这些具有响应是的数据传递给子元素，直接使用props.obj,这样的数据数据有响应式的，是指传递过来一个对象，这个对象有响应式，但是要是通过props传递过来的是一个值就没有响应式了，在子元素

2022-06-21 23:17:17 621

原创 vue3与vue2比较

在vue2中我们是通过new Vue() 的方法进行创建，而在vue3通过vue里面的一个全局方法createApp进行创建，可以通过链式调用例子：该应用实例是用来在应用中注册“全局”组件的。2.自定义指令之前全局通过Vue.directive(),现在通过定义的全局变量，例如上面的app.directive()例子:定义一个v-focus3.自定义插件首先在vue2通过install函数进行创建插件才能进行vue.use，在vue3中用app.use例子;i18n.js,在改文件

2022-06-20 23:02:35 688

原创小程序登录流程

思路:首先在小程序端通过wx.login向微信服务器发送请求拿到code，然后把这个code发送到我方服务器，我方服务器拿到前端发来的code之后，携带code, appid,secret,grant_type:'authorization_code这四个参数向微信服务器'https://api.weixin.qq.com/sns/jscode2session，这个接口发送请求拿到openid与session_key，并通过openid进行查询数据库里面这条信息看看有没有手机号，有的话就是老用户，并把这条信

2022-06-16 21:28:39 2038 1

原创微信小程序

1.首先在master 开发工具上传代码dev的环境2.体验版测试3.master 代码环境变成线上环境4.体验线上环境的小程序，线上的数据，测试5.提交审核6.在发布管理平台，将ischeck改为true，目的影藏内容，在导航栏不显示，（例子，在你申请公众号，在你提交你要卖酱油，但是你在上线你要卖酒，这样审核是通过不了的，所以，你在提交审核后不卖酒的tab隐藏起来）7.审核通过后，在微信的管理平台发布小程序8.将审核状态ischeck改为false9.然后在自己编写的小程序管理平台配置，小程序更新的时候是

2022-06-09 22:04:09 819

原创 v-lazy

思路：刚开始通过install方法进行挂载一个插件，也就是我们自己封装的v-lazy,有两个参数，一个vue:是vue的构造器,一个options:是在vue.use的时候传入的值，在自定义参数的时候用的bind方法，用到里面前两个参数，一个是el：用指令的dom，一个是building参数:里面还好几个参数name:插件的名字，value,用插件里面的值，在用v-lazy='11111',就是111111//接下来就是我们在bind函数的操作了，首先我们在全局封装了两个方法，一个是getScrollPar

2022-06-08 23:02:20 2128

原创文档编辑器

https://note.youdao.com/ynoteshare/index.html?id=4835579af41c46645f1d03eb81ccc655&type=note&_time=1654692325654https://note.youdao.com/ynoteshare/index.html?id=4835579af41c46645f1d03eb81ccc655&type=note&_time=1654692325654协议管理用户协议，隐私协议文档->变成网页思路：1. b端管

2022-06-08 21:06:13 178

原创 Mobx

Mobx是一个功能强大，上手非常容易的状态管理工具。redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。这张图来自于官网，把这张图理解清楚了。基本上对于mobx的理解就算入门了。官网有明确的核心概念使用方法，并配有egghead的视频教程。这里就不一一赘述了。要特别注意当使用时可以定义一个新的生命周期钩子函数。当组件因为它观察的数据发生了改变，它会安排重新渲染，这个时候会被触发。这使得它很容易追溯渲染并找到导致渲染的操作(action)。不接收参数初始化渲染前

2022-06-06 22:52:23 354

原创用户权限拦截

在后端创建每个用户信息的时候都有一个leaval的权限属性，通过这个leaval来确定这个用户是一个adminy用户还是一个管理员用户，此时返回一个403状态码，我们可以通过这个状态码，来弹出一个用户权限不足的提示，402token失效1.不同用户返回不同的侧边栏后端通过用户返回一个接口，这个接口里面显示侧边栏信息不同，例如A用户，通过后端接口只返回下面的权限上面这种方法只是让功能权限不在页面上显示，但是如果用户记住了路径信息的话，在地址上写入路径信息还是能够访问到的，因此在路由上还需要配置，也

2022-06-05 20:47:08 414

原创图片上传与excel的导出

1.通过fileReader 对象将图片变成base64 和一个字符串一样使用可以直接入库把上传的图片的数据直接存到数据库就行2. 通过formdata 服务端将文件保存到服务器之后将图片的服务器路径入库* 通过input file 获取图片信息* 将文件加入到formdata对象中* 后端会从formdata对象解析图片的数据流* 将图片保存到服务器下（可以是自己的服务器也可以是图床） -> 产生一个找到图片的路径* 将路径保存到数据库返回给前端Excel的导出https://not

2022-05-31 23:53:52 1106

原创 Hooks

函数组件就是类组件的render，只要重新渲染整个函数都会从上到下都会渲染，class 只是render 函数执行Useupdateimport { useState } from "react";useState是一个函数接受一个参数作为初始值返回一个数组数组的第一项是state 第二项是修改state的方法例如：import React, { useState } from "react";export default function UseStateDemo(

2022-05-28 13:56:16 292

原创 React-router

用到的插件react-router-dom的理解1.react的一个插件库。 2.专门用来实现一个SPA应用。import { HashRouter, BrowserRouter, Link, NavLink, Route, Switch, Redirect,} from "react-router-dom";HashRouter, BrowserRouter这两个是设置哈希模式，与history模式，需要套在最外层的标签Route相当于router-

2022-05-26 18:05:00 338

原创 immutable实现深浅拷贝

immutable实现深浅拷贝我们都知道在Redux里面在prevstate 与newData之间赋值的时候要实现深拷贝,之前的时候我们都通过const newData = JSON.parse(JSON.stringify(prevState));来实现深拷贝，但是我们知道这个方法太消耗性能，所以我们可以使用node自带的Api lodashlodsh 用法需要先npm i lodshconst { cloneDeep } = require("lodash");const sta.

2022-05-25 23:52:56 343

原创 Redux

方法一：自己封装的方法思路：1. 全局状态值在组件里都能访问到 * context * 单独在内存中存放一个对象来做state的管理2. 修改数据，用户通过dispatch 触发数据修改函数, 返回新的数据赋值给state3. 页面更新需要的组件通过subscribe 注册一个函数，保存到store对象的lister数组里数据改变的时候需要更新事件分发解构目录：首先封装一个全局状态管理的文件store 里面有个index.js......

2022-05-25 01:03:18 166

原创 React基础

react中ref 的用法在react中的ref推荐使用以下这种方式，不在使用Vue里面的用法首先引入方法import { createRef } from "react";然后再constructor里面定义这个Ref，下面创建了两个ref例如 constructor() { super(); this.testRef = createRef(); this.ageRef = createRef(); }在子组件或者子元素进行绑定Ref的时候

2022-05-24 19:39:38 46

原创 React中级

React 生命周期Initialization初始化阶段（Initialization): 没有生命周期函数，只是在constructor里做数据的设置Mounting只有页面在第一次渲染的时候才会执行Mounting过程UNSAFE_componentWillMount组件挂载前有this 没dom 可以不通过setState来修改数据因为这个生命周期在render函数之前，所以就不用通过setState修改数据可以做网路请求能不用就不用都快被干掉了render函数：

2022-05-24 01:34:25 2290

原创 Vue的SSR 与NUXT.JS

首先来看一张图通过这张图可以一个页面要通过服务端与客户端共同进行渲染操作首先在客户端上，注意在客户端只能生成一个静态页面返回到客户端，事件等一些操作是在客户端进行完成的接下来我们模拟一下在客户端渲染首先创建一个名字为template.html的HTML模板，为了让服务器渲染生成的字符串插入到这个模板里面注意 必须在里面写入这个相当于插槽，让服务器渲染的字符串插入到这个地方，并且也可以加style样式//首先创建一个HTML模板

2022-05-20 00:43:47 845

原创 vue 的 render 函数

render函数的作用：render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。render 函数讲解render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement，我们重点来说 createElement 参数。1.render 函数的返回值（VNode）VNode（即：虚拟节点），也就是我们要渲染的节点。2.render 函

2022-05-19 16:06:16 1079

原创服务器上线

首先自己必须拥有一台服务器通过ssh 命令连接服务器ssh name@ip输入密码后就进入服务器配置这里要是ssh不能用的话需要配置环境变量解决方法ssh不是内部或外部命令，也不是可运行的程序或批处理文件【已解决】_落日钢琴家的博客-CSDN博客_ssh' 不是内部或外部命令,也不是可运行的程序ubuntu 基本指令sudo apt-get update 首先更新一下资源列表，更新有关存储库的软件包信息Mongodb 环境配置环境系统：Ubuntu 16.04.

2022-05-19 02:14:17 206

原创 keep-alive

keep-alive概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理：在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染

2022-05-14 01:09:04 58

原创 Vue2 Api 总结大全

全局配置ignoredElements须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。就是你在页面用一个<he></he>标签的时候，这个是一个自定义元素，并不是自已定义的组件，这时候就会抛出一个警告，要想不想让他抛出这个警告就要在全局设置main.js 里面Vue.config.i

2022-05-14 00:48:00 1943

原创 git 解决冲突

1.通过变基冲突原因：当两个同事都拉下了主分支的代码，如下图都是三个圈，同事1更新了一个功能并且功能上线，与主分支合并，此时主分支如下图多了一个三角形，当同事b的功能完成先要去上线的时候，在要与主分支合并的时候，发现没法合并，这是就要用到变基解决这个冲突了首先先同事2在B分支下git pull 一下，获得新的master分支，此时就有了三角形，要变基一下三角形与正方形是否有冲突，然后git rebase master然后手动解决冲突，解决完成之后git add .【一定不要git co...

2022-05-13 00:48:34 849

原创 Vue 笔记

移动端真机调试1. 将手机和电脑处于同一局域网2. 项目地址使用IP地址3. 将ip地址生成二维码手机扫码使用 qrcode 生成二维码或者网址草料网址二维码生成器上面操作就可以把自己做的项目进行真机测试移动端打印Vconsole在移动端也可以打印。东西测试，相当于PC端的console.log()操作：1.先找一个vconsole的CDN文件，直接引入就行，或者npm i vconsole2.然后再main.js里面导入，并使用就可以了im...

2022-05-13 00:47:02 391

原创 Vue.confing.js

const { defineConfig } = require("@vue/cli-service");module.exports = defineConfig({ publicPath: "./hehe/xixi/", //这条配置文件是为了你在打包文件，也就是npm run build 的时候，打包的时候会把你的路径变成/hehe/xixi/加你的原始路径，根据自己的需要配 transpileDependencies: true, lintOnSave: false, devS.

2022-05-12 21:43:49 108

原创首屏加载，与less的初始化css

首屏懒加载代码，为了解决再请求数据的时候出现白屏而不好看<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-s

2022-05-10 21:36:27 141

原创移动端适配rem

第一种方法：通过自己的方法去配置首先：在public的index文件夹中，在下面的代码中加上initial-scale=1.0, 初始的缩放比例minimum-scale=1, 允许用户缩放到的最小比例maximum-scale=1 允许用户缩放到的最大比例,user-scaleable=no" 用户是否可以手动缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scal

2022-05-10 21:31:57 675

原创 Axios

首先下载axios插件 "axios": "^0.27.2"在src文件夹下创建一个utils文件夹，文件夹下面有个axios文件夹，在里面首先导入下载的axios插件import axios from "axios";//先导入axios//下面是请求拦截器axios.interceptors.request.use(function (config) { // Do something before request is sent console.log('config',c

2022-05-09 23:21:37 1939 1

原创 Vue2 基础

Vue实例注意可以注册无数个实例，但是每个同级Vue实例的作用域唯一以下就创建了两个Vue实例<body><div id="app"> {{name}}</div><hr><div id="app2"> {{ name }}</div><script> new Vue({ el: '#app', data: { name: '韩梅梅' } }) // new V

2022-05-08 18:56:08 316

原创 Vuex

src中文件在App.vue中<template> <div id='app'> 这里是根组件 <son1></son1> <son2></son2> </div></template><script>import Son1 from './Son1.vue'import Son2 from './Son2.vue'export defa

2022-05-08 03:03:36 116

原创 vue-router

在脚手架里面src的格式根组件App.vue中<template> <div id='app'> 这里是根组件 <router-view ></router-view>//为了让其他路由能够在页面上显示，也可以用下面的路由视图中的<router-view name='default'></router-view>  <router-

2022-05-08 00:41:06 359

原创目前常见的web网络安全漏洞

XSS（Cross Site Scripting）跨站脚本攻击。 1.存储型XSS黑客主要通过在站点的文本输入区域嵌入脚本标签包裹的恶意代码，然后提交到服务器端，服务器将提交的信息保存后，只要其他人浏览了包含黑客恶意代码的页面后，恶意代码就会执行，可能侵害其他用户的信息。2.反射型XSS黑客将一段含有恶意代码的请求包装到某个链接上，然后诱导用户去点击。用户点击后含有恶意代码的请求提交给服务器端，服务器又将该含有恶意代码的请求返回给用户，恶意代码就在客户端执行。3.DOM型XSS黑客直接..

2022-05-02 16:45:10 3859

空空如也

空空如也