周周池-CSDN博客

原创 null、undefined、void、never

类型含义null缺少值undefined尚未赋值的变量void没有return语句的函数never永不返回的函数。

2022-10-04 10:22:19 631 1

TypeScriptTypeScript内置了大量类型。我们可以让TypeScript根据值推导类型，也可以自己显示注解类型。使用const时推导出的类型更具体，而let和var更一般化。多数类型都分一般和具体两种形式，而后者时前者的子类型。类型子类型booleanBoolean 字面量bigintBigint 字面量numberNumber 字面量stringString 字面量symbolobjectObject 字面量数组元祖enumconst enum。

2022-09-28 18:55:23 427

原创 TypeScript索引签名

key : T] : U 句法称为索引签名，我们通过这种方式告诉TypeScript，指定的对象可能有更多的键。这种句法的意思是，“在这个对象中，类型为T的键对应的值为U类型。”借助索引签名，除显示声明的键之外，可以放心添加更多的键。索引签名还有一条规则要记住：键的类型（T）必须可赋值给number或string。

2022-09-28 10:52:56 483

原创 JS深拷贝

方法一：用JSONconst b = JSON.parse(JSON.stringify(a));//先将a序列化，再反序列化赋值给bJSON深拷贝的缺点:1.不支持日期、正则、undefined、函数等类型2.不支持应用类型使用递归const deepClone = (a, cache) => { if (!cache) cache = new Map() // 缓存不能全局，最好临时创建并递归传递 if (a instanceof Object) {

2022-04-24 02:01:21 1330

原创手写一个AJAX

总结，写个博客记录一下const ajax = (method, url, data, success, fail) => { var request = new XMLHttpRequest() request.open(method, url); request.send(data); // 如果是POST请求有请求体，GET没有请求体 request.onreadystatechange = function () { if (reques

2022-04-21 01:19:33 1019

原创封装微信小程序实时获取经纬度+权限判定+引导授权(无30秒延迟)

我们知道微信小程序的wx.getLocationapi可以获取到定位信息（经纬度），但是wx.getLocationapi有个问题，不能实时获取经纬度。wx.getLocationapi在每30秒钟只能有效的获取一次经纬度，比如我坐在高铁或者飞机上面，每隔几秒刷新一次，但是获取到的经纬度是30秒钟之前的经纬度，用户体验会很差。所以微信小程序还提供了可实时获取经纬度的api，wx.startLocationUpdate,wx.onLocationChange,wx.offLocationChange组合使用

2022-04-20 16:08:21 1263

原创手写通用防抖与节流函数

我们经常会绑定一些持续触发的事件，比如resize、scroll、mousemove等等，如果事件调用无限制，会加重浏览器负担，导致用户体验差，我们可以使用debounce(防抖)和throttle(节流)的方式来减少频繁的调用，同时也不会影响实际的效果。防抖的概念触发事件后n秒后才执行函数，如果在n秒内触发了事件，则会重新计算函数执行时间防抖函数可以分为立即执行，和非立即执行两个版本直白点：一定时间内，只有最后一次操作有效，再过wait毫秒后才执行函数使用场景：例如拖动改变浏览器大小的时候，需要

2022-04-20 01:02:08 228

原创如何清除浮动？

方法一：给父元素加上.clearfix.clearfix:after{content: '';display: block; /*或者 table*/clear: both;}.clearfix{ //可以不写zoom: 1; /* IE 兼容*/}方法二：给父元素加上overflow:hidden(BFC)

2022-04-18 02:07:58 117

原创（4种）实现垂直居中的方法总结

如果父元素的height不写，只需要设置父元素padding:10px 0;就可以将子元素垂直居中；如果父元素的height写死了，就比较难垂直居中，以下是垂直居中的几种方法。使用table自带的功能实现垂直居中。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title></head><body> &l

2022-04-18 01:51:19 3495

原创 Canvas和SVG的区别

Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的元素来绘制图形。Canvas API主要聚焦于2D图形。与一般标签一样可以设置宽高。canvas画布就是一张图片，可以以图片的形式保存。Canvas和SVG的区别:Canvas主要是用笔刷来绘制2D图形。SVG主要是用标签来绘制不规则的矢量图。相同点：都是主要用来画2D图形。不同点：Canvas画的是位图，SVG画的矢量图。不同点：SVG节点过多时渲染慢，Canvas性能更好一点，但写起来更复杂。不同点：S

2022-04-16 20:13:06 696

原创生成订单核销二维码，扫码完成核销

需求：用户端：根据用户支付成功的订单商品，生成核销二维码店员端：扫描客户的二维码，获取二维码信息，验证判断二维码是否正确，根据二维码信息，获取用户信息，完成核销功能步骤1.对用户订单号进行加密加钥处理2.利用QRcode生成二维码3.使用uni.scanCode获取二维码信息4.对信息进行解密，判断是否正确源码导入qrcode.jsimport qrCode from "../../common/weapp-qrcode.js";对信息加密加钥，保存信息使用qrcode

2022-03-01 17:46:38 6649

原创移动端触底加载动画 (uni)

封装一个移动端触底加载刷新动画组件需求：无数据时隐藏，触底时显示加载动画，无更多数据时，提示无更多数据（自适应父盒子大小，高性能）代码components/tr-TouchBottom<template> <view class="mescroll-upwarp" :style="{height: TouchBottom_heigth+'rpx',color:TextColor}" v-if="SoleType==1 ||

2022-03-01 17:25:40 390 2

原创 promise.all

promise.all()该方法用于将多个Promise实例，包装成一个新的Promise实例。var p = Promise.all([p1,p2,p3]);只有p1、p2、p3的状态都变成fulfilled(成功)，p的状态才会变成fulfilled(成功)，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。只要p1、p2、p3之中有一个被rejected(失败)，p的状态就变成rejected(失败)，此时第一个被reject的实例的返回值，会传递给p的回调函数代码Getl

2022-03-01 17:03:05 680

原创 vuex 的语法糖（mapState, mapGetters, mapActions, mapMutations）

Vuex语法糖vueximport { token} from '@/config/AppParameter.js';/* 用户信息 */const state = { UserInfo: {}, //用户信息 accessToken: uni.getStorageSync(token) || '', //token DayList: []};const getters = { ReturnAccessToken(state) { return state.accessToken

2022-03-01 16:53:51 449

原创封装uni网络请求（uni.request）

在前面的项目中，总结后写了一个基于uni的api(uni.request)封装的网络请求，比较好用，做个笔记api集中管理，利于查看和维护apiUrl/apiUrl.js// API 请勿修改const apiUrl = { home: { xxxxxx: 'xxxxxx/xxxxxx/xxxxxx', //获取店铺列表 }, Collage: {}};export default apiUrl;拼接域名request/appOnlaunch.jsimport apiU

2022-03-01 15:24:57 1843

原创 uniapp生成canvas商品海报

uniapp生成canvas商品海报之前做一个uniapp开发的微信小程序需要生成商品海报，在网上学习后完成，记录一下。主要使用了canvas,uniapp官网链接：canvas使用方法自定义生成海报组件tr-xqgenrate.vue<template> <view> <u-mask :z-index="90" :show="share_qrcode_flag" :zoom="true" :custom-style="{ background: 'rgba(0,

2022-02-08 10:44:35 1140

原创 uniapp web-view示例(微信小程序)

uniapp web-view示例(微信小程序)web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。需求：需要把H5网页嵌套入uniapp开发的微信小程序。用vuex当做仓库保存web-view路径,跳转到pages/webview/indexnavigateToMineDay(url, type) { if (type == 'webView') { let myurl_ = appUrl + `/h5/

2022-02-08 10:21:10 1702

原创 APP首次进入，弹出服务协议和隐私政策

uniapp APP第一次下载进入首页前的用户服务协议和隐私政策的授权弹窗app上应用市场里需要几个条件,需要第一次下载并进入首页前展示用户协议和隐私政策弹窗提醒, 以及在应用内版块有常驻入口（就是应用里有可以看到这个协议的版块）, 登录或者注册页面也需要有同意服务协议和隐私政策的提醒在上个项目上线时候android端审核不通过，做个笔记在uni官网上面找到也告诉了开发者，uni自带有原生隐私权限政策弹框勾选后，项目的根目录就会多出一个androidPrivacy.json文件，再编写如下代码{

2021-11-22 14:10:14 8320 2

原创 APP更新

App更新主要分为两种方式整包更新热更新最近项目碰到的app更新问题，安卓和iOS更新。今天主要讲app整包更新（Android与IOS）功能实现效果android：检测新版本，后台下载，自动弹出安装页面IOS：跳转 appStore app更新界面一、点击检测版本直接上代码哈，后面有效果图通过plus.runtime.getProperty获取APP版本信息，// 获取APP版本号 getVersion() { let that = this; plus.r

2021-11-22 13:35:57 1485

原创 api集中管理

一个程序离不开接口，而要怎么集中管理好程序的接口呢程序能不能进行二次维护、升级，接口够不够灵活就占很大的部分一个程序的接口乱放，我相信你不会想再看到这样的程序（看的头痛啊）第一步封装请求（request.js）import Interceptor from "./core/interceptor";import Request from "./index";import indexConfig from "@/config/index.config"export const globalIn

2021-09-15 10:56:55 328

原创微信支付功能

调起微信支付在之前完成的微信小程序中，微信支付功能用得比较多，做个笔记记录一下微信支付可以通过前端拼接，也可以通过后端拼接，调取提交订单接口，获取对应参数前端拼接， V2方式微信支付所需要的的参数，先调统一下单接口获取参数appid ，微信开放平台申请的账号对应的appid也是小程序的appidtimeStamp，时间（时间戳格式）package，支付ID（拼接格式'prepay_id=' + prepay_id,后面的为支付ID）signType，签名的加密方式(建议使用

2021-09-15 10:33:29 243

原创微信小程序使用色彩字体图标（笔录）

微信小程序怎么使用色彩字体图标在阿里巴巴矢量图标库选择对应图标，添加到自己的项目中，下载到本地通过npm全局导入iconfont-tools工具，语法：npm i -g iconfont-tools再iconfont-tools // 生成小程序专用文件（可以取名字也可以使用默认名称，使用默认名称就一直enter）得到如下文件目录结构，iconfont-weapp就是小程序色彩图标文件把iconfont-weapp中css文件拷贝到项目中，在app.vue中全局导入ico

2021-08-25 17:40:55 612

原创微信小程序登录流程

做个笔记记录一下之前写的微信小程序登录流程微信小程序中，微信登录是必备定的微信开发平台微信登录流程流程图如下看这个图文信息，就能看懂大概的流程我就根据我的项目说一下微信小程序登录流程使用到uni.getUserProfile()、uni.login()APIuni.getUserProfile()：提示用户授权获取用户信息(账号名、电话号码、性别、头像)等基本信息给后端uni.login()：获取微信用户的临时code(用户登录凭证。开发者需要在开发者服务器后台，使用 co

2021-08-09 19:17:48 716

原创自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）

在之前完成的小程序项目中，遇到微信顶部导航栏高度，在不同手高度不一样问题（不适配微信胶囊按钮）。总结了一下特发这篇文章整理思路问题一个前端，肯定不希望页面结构不好看。客户、老板、自己不满意啊解决方法通过uni.getSystemInfo获取系统信息（用来手机状态栏高度），因为状态栏的高度不同的手机是不一样的，状态栏如下通过uni.getMenuButtonBoundingClientRect()获取微信小程序胶囊按钮的信息（top：胶囊按钮上边界坐标、height：胶囊按钮的高度）通过w

2021-08-09 17:42:50 2460

原创 Vue根据用户权限动态更新路由规则（附上案例及思路）

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-03-19 17:59:06 1768

周周池的博客