落梅抚雪-优快云博客

原创 vue中v-model和.sync的差异和用法

vue中v-model和.sync的差异和用法二者相同点都是语法糖，都可以实现父子组件中的数据的双向通信不同点:书写格式不同 v-model=“sum”, :num.sync=“sum”绑定个数不同 v-model一个组件或输入框只能绑定一个 .sync可以有多个v-model 是@input + value的语法糖.sync 是@update:sum 的语法糖v-model用法// 父组件<template> <div&gt

2022-02-18 17:24:57 430

原创 js开发小技巧

获取指定范围内的随机数function getRadomNum(min,max){ return Math.floor(Math.random() * (max - min + 1)) + min;}随机获取数组中的元素function getRadomFromArr(arr){ return arr[Math.floor(Math.random()*arr.length)];}生成从0到指定值的数字数组function getArray(len) { var a

2022-02-17 11:44:18 609

原创唤端技术浅析

唤端技术浅析本文主要浅析唤起 APP的基本方式以及相关方案，兼容性部分暂不作深入探讨，有待补充。唤起 APP用唤端代述。前言在 H5 页面的日常开发中，往往需要通过唤端改善用户体验。比如一个常见的场景：用户通过链接分享或其他途径，在端外访问 H5 活动页面，与页面发生交互后，需要实现以下功能：功能 A：对于已安装 APP，唤起 APP，并跳转到对应的活动页。功能 B：对于未安装 APP，唤起的应用商店（APP 主页）。功能 C：基于功能 B，在下载安装完成，打开 APP 后，跳转

2021-11-10 15:02:29 1958

原创 React-hooks useReducer和useContext 封装和使用

一、React-hooks useReducer和useContext 封装和使用userReducer.ts 数据存储文件/*** userReducer.ts* 数据封装：reducer*/ type Actions = 'updateUserId' | 'updateToken';export interface TAction { type: Actions; data: any;}export interface TState{ userId: string

2021-11-03 19:56:42 988 1

原创浏览器缓存机制

浏览器缓存机制一、浏览器缓存类型1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache；2.协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；两者的共同点：都是从客户端缓存

2021-04-02 16:09:23 415

原创 vue面试H5适配快速搭建

vue面试H5适配快速搭建一、环境的搭建nodejs 环境搭建nodejs下载检查版本node -vnpm -v切换淘宝镜像cnpmnpm install cnpm -g --registry=https://registry.npm.taobao.org验证：npm config get registry如果返回https://registry.npm.taobao.org，说明镜像配置成功。vuecil 脚手架下载cnpm i @vue/cli -g

2020-11-14 16:02:51 482

原创前端seo优化

前端 seo 优化一、什么是seo优化：SEO是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎检索原则并且对用户更友好(Search Engine Friendly)，从而更容易被搜索引擎收录及优先排序从属于SEM(搜索引擎营销)。SEO的中文意思是搜索引擎优化。通俗理解是：通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和Google的排名提高，让搜索引擎给你带来客户。深刻理解是：通过SEO这样一套基于搜索引擎的营销思路，为网站提供生态式的自我营销解决方案，让网

2020-10-28 11:33:20 4791

原创 qiankun微前端路由模式

qiankun在vue框架下history 和hash路由模式的使用一、主应用是hash模式说明当主应用是 hash 模式时，一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用（比如 #/base1 ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 #/base1/child1 ），这个场景在当前 VueRouter 的实现方式下需要自己手动实现，给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 ba

2020-10-27 16:09:20 13374 2

原创 qiankun微前端学习

微前端学习（qiankun、singleSpa）一、微前端的优势什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略几个核心价值：技术栈无关，独立开发、独立部署，增量升级，独立运行时特点基于single-spa封装，提供了更加开箱即用的 API。HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。样式隔离，确保微应用之间样式互相不干扰。JS 沙箱，确保微应用之间全局变量/事件不冲突。资源预

2020-10-26 18:03:23 1952 8

原创 uniapp 任务栏顶部导航适配

uniapp 任务栏顶部导航适配一、问题说明：1、问题：手机型号不一样头部导航显示样式和高度都不一样，例如：刘海屏、挖孔屏2、解决思路：利用uni.getSystemInfo() 获取手机设备的型号信息,获取手机状态栏的信息statusBarHeight，在给顶部导航设置高度时比例高度加上状态栏的高度比例高度x：750/100 = screenWidth / x二、代码示例：下面代码直接是一个头部组件：可以直接使用<template> <view

2020-10-23 15:12:15 2604

原创 uniapp中NFC功能的实现

uniapp 中实现NF功能一、前期准备1、在manifest.json文件中开发NCF权限2、需要注意这里更改了manifest.json中的内容需要整包更新客户端包才能生效，如果是服务器热更新下载的包不生效二、实现示例<template>  <view id="page"> <view class="list-item flex align-items justify-between">

2020-10-23 14:51:41 9863 5

原创 uniapp 安卓证书生成

uniapp android私有证书的生成一、基本概念了解1、什么是证书：证书是一个开发者的身份标志，对Android系统而言。使用一个证书签发的App，是属于同一个开发者的App，强化了App的唯一性为什么上线使用私有证书：1、举个极端的例子，如果你的应用证书泄露，那么别人可以用这个证书签名一个仿冒App，假如包名和你的包名也一样，就可以覆盖安装安卓手机上你之前的包。2、当前仅依赖证书校验是不完善的，所以主流的Android应用市场，通过实名认证开发者信息和著作权，强化了App的

2020-10-23 12:10:27 4812 3

原创 uniapp消息推送push

uniapp uni push 消息推送一、前期准备1、账号：生成该应用账号进行配置uni push2、勾选uni push 推送二、配置uni push1、配置厂商推送设置2、配置厂家推送示例：（华为）（1）、为什么要配置厂家推送设置：配置：可以实现不打开应用的时候接受后台的推送消息不配置：只能在打开应用的时候消息才能推送过来（2）、点击跳转进行账号注册（3）、配置完成之后的页面（4）、获取appid 和secretkey(5)、进

2020-10-23 10:53:55 3337 6

原创 DOM常用操作

1. 修改2. 添加删除元素3. HTML DOM常用对象一. 修改:1. 样式:内联样式: 元素.style.css属性=“值”a. css属性名要去-，变驼峰b. 不要用元素.style来获取样式。因为style只表示内联样式。而将来，我们样式多数写在样式表中。(2). 获取完整样式: 用计算后的样式a. 什么是计算后的样式: 最终应用到一个元素上的所有样式的集合。...

2019-12-30 19:39:11 374

weixin_43825389的博客