自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(59)
  • 资源 (3)
  • 问答 (1)
  • 收藏
  • 关注

原创 vue3的生命周期

vue3生命周期

2022-11-21 15:35:55 1964 1

转载 统计-友盟埋点

友盟+埋点、统计

2022-11-21 15:34:57 635

转载 sass的快速入门与使用

sass快速入门

2022-11-21 15:20:20 341

原创 select组件设置居右对齐, text-align无效

select组件设置居右对齐, text-align无效

2022-09-21 15:54:30 1848

原创 时间轴的实现

时间轴

2022-06-22 10:53:07 289

原创 移动端和PC端的pdf预览与下载

实现移动端的pdf文件的预览与下载

2022-06-20 16:56:50 3423

原创 判断是微信环境还是支付宝环境

判断是微信环境还是支付宝环境 iswxorapipay () { var ua = window.navigator.userAgent.toLowerCase(); var iswxmini = '' return new Promise((resolve, reject) => { if (ua.indexOf('micromessenger') > -1) { wx.miniProgram.getEnv(function (res)

2022-05-24 09:32:50 1276

原创 支付宝微信支付方式的选择

32.支付宝微信的单选框选择场景: 一个h5网页支付页面,需要同时展现支付宝和微信两种支付方式实现目标:实现步骤:在项目中,安装并引入vant的相关组件:RadioGroup, Radio, Cell, CellGroup和样式页面代码实现 <div> <div class="paytype" v-show="paylist.length!==0" > <div class="title">请选择自费支付方

2022-05-13 10:56:39 843

原创 mint-ui实现轮播图

mint-ui实现轮播图使用mint-uinpm安装mint-uinpm install mint-ui -S一定要安装2版本以上的,1版本的会报错在main.js中引入import MintUI from ‘mint-ui’import ‘mint-ui/lib/style.css’Vue.use(MintUI)在需要的地方引入swipe组件import {Swipe, SwipeItem} from ‘mint-ui’import ‘mint-ui/lib/style.

2022-03-09 20:49:07 834

原创 身份证号加密显示,只显示前后两位

身份证号加密显示在页面中,显示前两位和末尾两位例如:330110200010198500 ------- 33**************00410102201807248396 ------- 41**************96 encryptPaperNo (card) { // 加密身份证号 let enCard = [] enCard.push(card[0]) enCard.push(card[1]) for (l

2022-01-06 15:10:15 1804

原创 姓名加星号显示,只显示第一位和最后一位

姓名加密显示,只显示第一位和最后一位例如:张三---------张*王麻子 ---------王*子王二麻子 -------王**子encryptName (name) { // 加密姓名 let enName = [] if (name.length === 2) { return name[0] + '*' } else { let num = name.length - 2 enName.pu

2022-01-06 15:01:52 981

原创 vue的父子组件双向数据绑定

vue中父子组件数据双向绑定父组件父组件中引入子组件,并在template中使用父组件中的数据使用:data.sync用于动态实时获取子组件数据<template> <dele :data.sync="delShow" v-show="delShow" /></template>import dele from './../components/Del.vue'export default { components: { dele

2022-01-06 14:41:18 854

原创 先勾选协议选框,才能进行下一步

先勾选协议选框,才能进行下一步效果图:<template> <div class="con"> <div> <div class="input_con"> <div>真实姓名</div> <input v-model.trim="realname" class="input" type="text" placeholder="请输入姓名" /> &l

2022-01-05 11:50:00 1140

原创 动态class与三目运算符结合的坑

动态class与三目运算符结合的坑

2022-01-05 11:38:23 1081

原创 删除input的首尾空格

删除input的首尾空格.trim() :删除首尾的空白字符 <input v-model.trim="idcard" class="input" type="text" placeholder="请输入身份证号" />

2022-01-04 11:17:47 757

原创 微信小程序获得用户地理位置

微信小程序获得用户地理位置//app.json"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } },wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const longitud

2021-12-09 15:50:35 192

原创 微信小程序嵌套h5页面怎么实现小程序支付

小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付的prepay_id和其他参数,小程序这边只需要将它传过来的参数(wxJson)接收并解析完拼接到wx.requestPayment微信调起支付的接口参数中用来发起微信支付<--interHosp.wxml--><view bindtap="gopay" style="color: red;"

2021-12-01 10:07:04 6226 3

原创 网页嵌入高德地图

网页嵌入高德地图搜索场景:在app中需要有导航功能,定位到某个医院的地点,不用插入高德地图sdk可以直接使用将高德地图的地址直接拼接到window.location中gomap(address){ window.location.href = `https://m.amap.com/search/mapview/keywords=${address}` }...

2021-11-30 16:28:58 2141

原创 input搜索框在ios系统中兼容问题

input搜索与ios适配兼容问题场景:h5页面在手机上嵌入时,会有搜索框并且改变键盘“搜索”字体的需求问题1:ios下input中type=“search”,键盘中不变“搜索”的问题 <input type="search" placeholder="搜索生" v-model="searchValue" @keypress.13="goSearch()" />​ 解决:在input标签的外面嵌套form

2021-11-24 16:53:16 2760

原创 微信小程序navigateTo跳转问题

新建组件在pages文件夹中检查组件四件套是否存在,最好在四件套最外侧有文件夹包裹,方便管理检查app.json中的pages数组里是否存在页面路径,如果没有,需要手动添加在页面中使用navigateTo跳转时,不要相信自动补全的,会报错页面找不到 wx.navigateTo({ url:`./../netHospital/netHospital.html` })报错如下:正确写法不要带后缀.wxml,否则跳转不过去,测试后正常跳转wx.navigateTo.

2021-11-17 16:33:39 785

原创 MVVM模式

对MVVM的理解model view view-modelmodel:表数据模型,仅关注数据本身,不关心任何行为view:视图,用户操作界面,当view-model对model进行更新时,会通过数据绑定更新到view上view-model:业务逻辑层,桥梁的作用,作用:简化了界面与业务的依赖,解决了数据频繁更新,mvvm在使用中,利用双向绑定技术,使得model变化时,vm会自动更新,而vm变化时,model也会更新...

2021-09-22 14:21:29 56

原创 简述从输入URL到浏览器显示页面发生了什么?

从输入URL到浏览器显示页面发生了什么?DNS域名解析出IP地址,找到该网址的服务器,​ 先去浏览器的历史记录中看是否访问过该网址,是否已经缓存过,–》缓存过的话,去本地DNS找,去计算机的host文件,文件中有域名和IP之间的映射关系;本地没有域名解析服务器,就去网络上找,(全球的13台根域名服务器)根服务器中找是否有域名与IP的映射关系,找到后缓存,–》请求服务器,服务器将用户请求的资源传过来,–》通过传输层协议TCP协议(三次握手过程)建立连接,与客户端浏览器建立连接,–》将全部资源传递过来后把

2021-09-22 10:15:50 85

原创 vue中v-for中key值作用和原理

Vue中v-for中key值作用和原理v-for中,渲染列表时用到key,采用different算法就地渲染/就地复用,没有key,在每一次for的每一个项目改变时都是重新遍历整个列表,使用key时就只修改该改的那一个 会重新渲染dom元素或这标签key的作用主要是为了高效的更新虚拟DOM,在vue中使用过相同标签名元素的过渡切换时,也会使用到key属性,目的是为了让vue可以区分他们。...

2021-09-22 10:11:08 269

原创 cookie localStorage SessionStorage的区别

cookie localStorage SessionStorage的区别共同点:都是保存在浏览器端,且是同源的不同点:cookie是为了表示用户身份二存储在用户本地终端上的数据,时钟在同源http请求中携带,在浏览器和服务器端来回传递,另外两个不会自动把数据发给服务器,仅存在本地保存存储大小:cookie不大于4k,梁歪两个数据大,可达5M数据有效期:cookie在有效期内有效,session一个会话内有效,即在浏览器窗口关闭前有效,local时钟有效,永久保存数据作用域:cookie在

2021-09-22 10:00:40 124

原创 Vue中computed watch methods 的区别

computed、watch methods 的区别⭐️⭐️⭐️watch支持异步,computed不支持异步computed会有进行缓存,watch不会计算属性与methods中的函数的差别1.计算属性可缓存计算结果,反复使用,避免重复计算2.methods中的函数不会缓存计算结果,可能会导致重复的计算三者的区别methods中保存普通函数它更倾向于执行一项操作,而不是计算出一个值如果methods中函数计算返回一个值,它也不会被缓存,可能造成重复的计算调用时,要么是

2021-09-18 09:26:34 101

原创 单页面应用的首屏加载慢的问题

首屏加载太慢的问题原因:因为第一次要把所有页面组件内容下载下来解决:异步延迟加载(脚手架默认选择)打包时,每个文件打包为单独文件首屏加载时,只强制加载第一个组件的内容,后续组件由底层程序异步加载优点:不影响首屏加载速度,又能实现单页面应用的效果缺点:因为即使用户不看其他组件的内容,也会下载其他组件,浪费网络流量懒加载(可通过配置脚手架实现)打包时,每个文件打包为单独文件首屏加载时,不会下载其他组件只有当用户切换到其他某个组件时,才临时下载用户想看的组件优点:

2021-09-16 19:35:50 457

原创 FlatList组件

React Native 之FlatList组件​ ScrollView组件与FlatList组件同为自带滚动效果的组件,两者之间有所差异,各有所优势。与ScrollView相比较,FlatLis可以通过data属性进行自动遍历,根据其中的结果显示相应的视图。​ FlatList一个高性能的列表组件,具有多个属性(多列、下拉刷新、触底加载更多、间隔组件、自动滚动、横向滚动、表头、表尾…),更加方便。import React, {Component} from 'react';import { A

2021-09-15 23:19:56 296

原创 创建React Native项目

React Native及项目开启React Native的产品是真正的手机端原生代码:得益于其特殊的编译环境,可以使用JS来开发项目,最终通过编译环境改变为原生的android或iOS代码生成项目包:npx react-native init 包名连接模拟器:步骤顺序非常重要先开启adb服务器:adb devices开启模拟器侦测设备:adb devices运行,在项目目录下执行:npm run android 或 yarn run android(推荐使用,成功概率高)把编译成功

2021-09-10 19:23:50 817

原创 Vue的概述

Vue一.概述【1】vue是什么?第三方开发的基于MVVM设计模式的渐进式的:可以逐步在项目中使用vue技术,可以和其他技术混搭纯前端:单靠浏览器就可以运行,不需要任何后端技术js框架:可以自动化的完成大部分重复的劳动,提高开发效率【2】何时使用以数据操作(增删改查)为主的项目,可以使用vue框架开发比如: 饿了么,每天,大众点评,淘宝,京东,今日头条,微博,网易云音乐,小红书,知乎,自如,链家,携程,去哪儿…不是以数据操作为主: 大型游戏,微信/qq(即时通信),抖音,爱奇艺【

2021-07-19 20:47:08 400

原创 初步认识Vue

Vue一.概述【1】vue是什么?第三方开发的基于MVVM设计模式的渐进式的:可以逐步在项目中使用vue技术,可以和其他技术混搭纯前端:单靠浏览器就可以运行,不需要任何后端技术js框架:可以自动化的完成大部分重复的劳动,提高开发效率【2】何时使用以数据操作(增删改查)为主的项目,可以使用vue框架开发比如: 饿了么,每天,大众点评,淘宝,京东,今日头条,微博,网易云音乐,小红书,知乎,自如,链家,携程,去哪儿…不是以数据操作为主: 大型游戏,微信/qq(即时通信),抖音,爱奇艺【

2021-07-19 20:43:02 233

原创 DOM及DOM查找

1.DOM【1】定义:专门操作网页内容的一套对象和函数的总称【2】为什么使用DOM:ES标准中只规定了js语言的核心语法,没有规定如何使用js操作网页的内容。【3】何时:今后,只要想操作网页中的内容,只能用DOM,JQuery和框架都是对DOM的简化【3】DOM标准:国际标准,由W3C负责制定并维护,几乎所有浏览器都兼容2.DOM树【1】定义:一个网页的所有内容是在浏览器内存中以树形结构保存的。【2】为什么:树形结构是能够最直观的展现上下级包含关系的结构。而网页内容中的元素结构,也是上下级包含

2021-07-10 15:02:34 1038

原创 es6中的class

6.7class【1】问题:旧的js中,构造函数和原型对象是分开定义的,不符合“封装”的概念【2】解决:今后只要在ES6中创建一种新的类型,包含构造函数+原型对象,都可以使用class创建【3】定义:class是程序中专门集中保存一种类型的所有子对象的统一属性结构和方法定义的程序结构。【4】如何定义class:3句话​ i:用class{}包裹原构造函数+原型对象方法​ ii:原构造函数名升级为整个class的名字,所有构造函数统一更名为"constructor"​ iii:原型对象中的

2021-07-07 20:05:36 505

原创 数组解构、对象解构、参数解构

6.6解构destruct【1】问题:旧js中,要想使用对象中的成员,或数字中的元素,都必须带着"对象名."或"数组名[]"前缀。但是,实际开发中,对象或数组的嵌套结构可能很深。前缀就可能写很长: “对象名.子对象名.子对象名…”,非常麻烦。【2】何时使用:如果遇到复杂的对象或数组时,都可以通过解构的方式,来减少数组或对象的嵌套结构,便于使用【3】如何使用:分为3种i:数组解构​ 1).功能:从一个复杂的数组中只提取出需要的元素单独使用​ 2).如何使用:var [变量1,变量2,...

2021-07-07 19:57:22 1172

原创 拆散数组和...

6.5.3展开运算符spread【1】原因:数组的拆散之前学习过apply函数,但是apply函数不那么好用,因为apply的本职工作不是拆散数组,而是替换this,是在替换this的同时拆散的数组【2】解决:如果希望单纯的拆散数组,就使用 … 展开运算符【3】如何使用:在调用函数时,函数名(...数组名);【4】原理:…先将数组拆散成多个实参值,再依次分别传给函数的每个形参变量。【5】…的作用:​ i:定义函数时,形参列表中的…表示收集​ ii:调用函数时,实参列表中的…表示拆散【6】

2021-07-07 19:35:24 158

原创 ES6的剩余参数rest

6.6剩余参数rest【1】问题:箭头函数不支持arguments,如果箭头函数遇到参数个数不确定的情况,怎么办?【2】解决:只要在ES6箭头函数中遇到参数个数不确定的情况,都可以使用剩余参数语法来代替arguments接收参数的值【3】如何使用 var 函数名=( ...数组名 )=>{ //将来传入函数的所有实参值,都会被...收集起来,保存到...会指定的数组中。 }【4】优点​ i:支持箭头函数ii:生成的数组是纯正的数组类型,可以使用数组的所有函

2021-07-06 20:09:32 156

原创 ES6的参数增强

6.5参数增强参数默认值default【1】定义:调用函数时,即使不传入实参值,形参变量也有默认值可用,而不会是undefined【2】何时使用:希望即使不传入实参值,形参也有默认值使用【3】如何使用:定义函数时: function 函数名(形参1=默认值1, 形参2=默认值2, ...){ //调用函数时,给形参传了实参值,则首选用户传入的实参值。如果没有给形参传是实参值,则形参默认启用=右边的默认值。 }【4】存在问题:只能连续修改前一个或前几个或全部的值,而不能只

2021-07-06 20:08:51 116

原创 ES6的for of循环

6.4 for of循环【1】功能:可以遍历数字下标的数组或类数组对象【2】优点:与es6中的箭头函数,很简化​ 缺点:无法用于遍历类数组对象【3】使用:只要是遍历数组下标的,都可以for of替换普通for循环和forEach循环【4】原理 for(var 变量 of 索引数组/类数组对象){ //of会依次取出数组或类数组对象中每个属性值 //自动保存of前的变量中 }【5】存在的问题i:无法获得下标位置i,只能获得元素值ii:无法控制遍历的顺序或步调

2021-07-06 20:08:02 676

原创 ES6的let声明变量

6.3 let【1】var的两个问题​ i:会被声明提前——打乱程序的正常执行顺序​ ii:没有块级作用域——代码块内的变量会超出其范围,影响到外部变量【2】块级作用域:指的是对象{}和function的{}之外,其余if else、for、等程序结构的{}范围,在其他语言中称为块级作用域。但是,在js中这些{},都不是作用域。拦不住内部的局部变量声明被提前。【3】使用let的优点​ i:不会被声明提前——保证程序顺序执行​ ii:拥有块级作用域——作用域内的变量不再影响作用域外的变量

2021-07-06 20:06:45 279

原创 ES6中的箭头函数

6.2箭头函数【1】定义:对绝大多数匿名函数的简写【2】为什么:反复写function来定义函数很繁琐【3】何时使用:几乎所有匿名函数都可以用箭头函数简化【4】如何使用:3句话 步骤​ i:去掉function,在()和{}之间加=>​ ii:如果只有一个形参,则可以省略()​ iii:如果函数体只有一句话,则可以省略{},如果函数体仅剩的一句话还是return,则必须去掉return【5】示例:// function add(a,b){// retur

2021-07-06 20:05:50 108

原创 ES6的模板字符串

6.ES66.1模板字符串【1】定义:支持换行、动态拼接内容的特殊字符串格式【2】为什么使用它:旧的js中,旧的js中,拼接字符串使用的+,易于与算数计算的+混淆【3】如何使用:3句话​ i:整个字符串用一对反引号``包裹​ ii:在反引号中可以写单引号,双引号、换行等​ iii:在反引号中凡是动态拼接的变量或js表达式都要放在${}【4】${}中的内容​ 可以放:变量、算术计算、三目、对象属性、创建对象、调用函数、访问数组元素——有返回值的合法的js表达式​ 不能放:没有返回

2021-07-06 20:04:42 100

以微信小程序为基础的影院项目

以微信小程序为基础的影院项目

2021-09-22

电影项目的React App项目

React Native

2021-09-22

有关于大三下学期的代码初印象

对基础的HTML、CSS、JavaScript的简要概述

2021-09-10

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除