前端
文章平均质量分 61
落丶寞
这个作者很懒,什么都没留下…
展开
-
SRS流媒体服务(四)WebRTC实现实时视频通话和低延时互动直播
使用webRTC API实现实时的视频通话和低延时互动直播原创 2023-08-17 18:01:55 · 3353 阅读 · 9 评论 -
web前端项目使用electron打包成跨平台桌面端程序(Windows)
使用electron将前端项目打包成跨Windows、Linux、macOS的桌面端应用原创 2023-07-14 16:56:17 · 2743 阅读 · 9 评论 -
CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法
CSS中解决弹性盒子的弹性子元素被文本撑开影响原来宽或高的解决办法原创 2023-07-04 17:53:24 · 2023 阅读 · 0 评论 -
vue使用img标签:src属性动态引入资源路径的方法
vue中img动态绑定资源的方法原创 2023-07-02 13:47:51 · 3271 阅读 · 0 评论 -
Angular实现一个简单的带tabs选项卡切换的首页导航功能
Angular实现首页顶部tabs导航切换原创 2023-07-01 14:16:29 · 1607 阅读 · 0 评论 -
nodejs安装及环境变量配置(修改全局安装依赖工具包和缓存文件夹及npm淘宝镜像新站域名)
node安装及环境变量配置原创 2023-06-25 17:25:35 · 5021 阅读 · 0 评论 -
ionic5/angular11通过修改ShadowRoot样式更改ionic UI组件原样式
通过浏览器调试可以找到需要更改的UI组件样式,找到其CSS class类名后,通过CSS无法直接修改样式,需要使用shadowRoot.appendChild();方法注入新的样式覆盖原来的样式达到修改原样式的目的。一、编写HTML<ion-header > <ion-toolbar> <ion-title> Tab 2 </ion-title> </ion-toolbar></ion-head原创 2021-05-23 17:26:36 · 983 阅读 · 0 评论 -
ionic5/angular11添加Image Picker插件错误Error: cordova-plugin-telerik-imagepicker cannot be added. <edit-c
Failed to install 'cordova-plugin-telerik-imagepicker': Error: cordova-plugin-telerik-imagepicker cannot be added. <edit-config> changes in this plugin conflicts with <edit-config> changes in config.xml. Conflicts must be resolved before plugi.原创 2021-05-19 19:47:52 · 475 阅读 · 0 评论 -
基于angular11实现类似饿了么左右分类展示UI(左右联动)和右侧滚动吸顶效果
基于angular11实现一个分类展示组件,根据左侧分类点击改变被点击组件样式和右侧展示内容,根据右侧滑动显示内容改变左侧对应分类样式和右侧滑动距离实现右侧展示内容标题吸顶效果。一、编写HTML和CSS。<ion-header #header [translucent]="true"> <ion-toolbar> <ion-title> 分类 </ion-title> </ion-toolbar>&l原创 2021-05-18 19:49:19 · 641 阅读 · 0 评论 -
ionic5/angular11使用angular的@ViewChild获取DOM(@ViewChildren获取DOM数组)并使用Renderer2操作DOM
一、编写HTML和CSS。<ion-header [translucent]="true"> <ion-toolbar> <ion-title> 分类 </ion-title> </ion-toolbar></ion-header><ion-content class="content" > <div class="content_1" > <!原创 2021-05-11 20:11:15 · 815 阅读 · 0 评论 -
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊。如下图:轮播图切图时下面的内容:“办公家具”、“更多”明显视觉效果会发生抖动现象。尝试QQ浏览器、火狐浏览器、谷歌浏览器调试发现仅QQ浏览器有此问题。解决办法:我的轮播图是通过transform:translateX()在X轴移动实现效果,给轮播图容器加一个transform:translateZ(0);或者transform:translateY(0);属性即可解决问题。如...原创 2021-05-01 14:35:34 · 833 阅读 · 0 评论 -
ionic5/angular11使用路由及路由传值和取值
angular路由中文官方在ionic5中创建angular项目,路由使用angular路由一、创建一个ionic项目ionic start myrouter tabs --type=angular二、ionic5中默认三个tab切换页面,再创建一个新页面。通过tab1里的跳转按钮点击跳转至tab1-one页面ionic g page tab1-one三、编写tab1.page.html。<ion-header > <ion-toolbar>原创 2021-04-29 19:56:31 · 799 阅读 · 0 评论 -
Angular11中使用Angular animations动画效果非可复用和可复用方式
一、在app.module.ts里导入BrowserAnimationsModule模块。......//全局导入动画模块import {BrowserAnimationsModule} from '@angular/platform-browser/animations'@NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, Ioni原创 2021-04-28 20:08:29 · 842 阅读 · 0 评论 -
CSS里设置子元素浮动导致父元素高度塌陷的解决办法(清除浮动)
一、未设置子元素浮动的效果。<!DOCTYPE html><html lang="en"><head> <style> .box{ background-color:red; width:100%; } .box1{ width:50%; height:200px; background-color:blue; text-align:center; line-height:200px; font-size:原创 2021-04-25 22:22:36 · 672 阅读 · 0 评论 -
ionic5/angular11集成百度地图JSAPI及ionic官方定位插件Geolocation实现定位
一、添加Geolocation定位插件。ionic cordova plugin add cordova-plugin-geolocationnpm install @ionic-native/geolocation二、在ionic项目下src/app/index.html里导入百度地图JSAPI。<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥">&原创 2021-04-24 16:21:42 · 759 阅读 · 0 评论 -
ionic5/angular11项目添加插件报错npm ERR! File exists: D:\ionic\myapp\node_modules\.bin\tsc.cmd npm ERR! Move
在项目中添加定位插件,报如下错误,通过提示说拒绝删除XX文件,XX文件已经存在,删除后重试操作。按照提示删除文件后重试操作,再次报错另一个文件存在。。。最终解决办法:npm降级。当前版本:执行降级命令:npm(cnpm) install npm@4 -g最终降级后的版本:再次执行:ionic cordova plugin add cordova-plugin-geolocation添加成功,问题解决。...原创 2021-04-20 14:21:50 · 358 阅读 · 0 评论 -
ionic5/angular11里集成ng-zorro-antd-mobile(Ant Design Mobile of Angular)V4.0.0使用跑马灯UI
在ionic5项目里安装ng-zorro-antd-mobile一、安装ng-zorro-antd-mobile。执行npm/cnpm install ng-zorro-antd-mobile --save二、在 app.modules.ts 中,全局引入ng-zorro-antd-mobile。import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-brow.原创 2021-04-17 17:42:52 · 1174 阅读 · 0 评论 -
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置。一、编写代码。<!DOCTYPE html><html lang="en"><head> </head><body><div style="width:100%; height:400px;background-color:blue"><div style="width:80%;he原创 2021-04-17 14:57:33 · 1375 阅读 · 0 评论 -
IONIC5项目下载、安装Android环境并打包成APK安装包
一、下载Android SDK Manager。SDK Manager下载地址解压:二、配置环境变量。我们的SDK解压到D盘D:\Android SDK Tools,直接在path后面追加;;D:\Android SDK Tools\android-sdk-windows\tools;D:\Android SDK Tools\android-sdk-windows\platform-tools;三、下载Android相关SDK根据图解来看需求下载四、下载安原创 2021-04-16 16:25:53 · 920 阅读 · 0 评论 -
<img>清除默认间距
在DIV里放4张图片<img>,可以看到<img>图片上下左右会有默认间隙<div style="width:100%; height:2000px;background-color:blue"><img src="./images/banner1.jpg" style="width:200px;height:200px"> <img src="./images/banner1.jpg" style="width:200px;height:2原创 2021-04-13 19:37:10 · 994 阅读 · 0 评论 -
关于ionic4打包Android发布版(release)签名过程及发布版无法访问服务器IP
项目从开始部署以来遇到了大大小小各种问题总结一下:1、浏览器跨域问题关于前端跨域问题解决办法2、打包Android测试包后不允许明文(HTTP请求转换为HTTPS)关于Android8以上不允许明文传输(即HTTP请求转换为HTTPS请求)的方法3、服务端部署后客户端访问不到服务端IP(最坑就是这里,以前用阿里云和腾讯云可以直接访问IP,但是在电信云控制台有个安全组需要设置入口...原创 2019-08-06 23:48:49 · 971 阅读 · 0 评论 -
关于IONIC4打包Android后ERR_ClEARTEXT_NOT_PERMITTED错误
在ionic4打包成Android包以后真机运行的时候可能会报ERR_ClEARTEXT_NOT_PERMITTED错误,原因是Android8以后对网络安全进行了限制,不允许明文传输,即http请求解决办法三种:1、Android版本降级,删除原Android8以上版本,添加Android7以下版本ionic cordova platform rm android//执行删除A...原创 2019-07-31 15:49:18 · 2084 阅读 · 4 评论 -
关于前端跨域请求的解决方法
近期在做项目(前后端业务分离),遇到跨域请求失败的问题,记录一下,报错信息如下:Access to XMLHttpRequest at 'http://192.168.2.114/goods/get/111' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Cont...原创 2019-07-31 14:35:14 · 798 阅读 · 0 评论