![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web/H5/小程序
Web、H5全汇集
liberg
JAVA/大数据/前端(Web/H5/Android)
展开
-
流行的前端游戏引擎/框架
PixiJS,Phaser,CreateJS,Three.js,Egret原创 2018-10-22 14:23:22 · 583 阅读 · 1 评论 -
Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html
Electron 14开始remote模块已被移除,为了能够在html中访问Electron的UI能力(app/BrowserWindow/dialog),需要额外单独安装。包代替:https://www.electronjs.org/docs/latest/breaking-changes#removed-remote-module。设置中打开remote模块,即可在main进程调用UI渲染进程的dialog/menu等。Electron 14开始remote模块已被移除,可用。原创 2024-02-04 16:34:51 · 808 阅读 · 0 评论 -
Electron实战(一):环境搭建/Hello World/打包exe
Electron整合Chromium浏览器(跨平台界面容器)和Node.js(跨平台系统能力),实现了一个使用JavaScript的全栈开发环境,逐渐成为开发跨平台桌面应用程序的有力竞争者。–-save-dev/-d/-D 本地安装,安装版本写入package.json的devDependencies。–-save/-s/-S 本地安装,安装版本写入package.json的dependencies。(g代表global全局安装的意思)安装语句时,会将安装的模块安装到。无奈,遇到版本不兼容了!原创 2024-02-04 15:57:45 · 1565 阅读 · 0 评论 -
JavaScript ES5 模拟实现“继承”
本文尝试用JavaScript(ES 5)模拟实现,面向对象语言中的“继承”机制。原创 2023-12-13 11:03:44 · 455 阅读 · 0 评论 -
js常用正则表达式(生成环境)
【代码】js常用正则表达式(生成环境)原创 2023-10-17 09:16:13 · 146 阅读 · 0 评论 -
CSS background背景图不显示(空白、部分显示)的问题
2种情况下,背景图不显示(空白)、部分显示的问题。原创 2022-09-28 09:50:59 · 2605 阅读 · 1 评论 -
js中Numer类型最大值9007199254740991,精度丢失问题解决
js中Numer类型最大值9007199254740991,精度丢失问题解决原创 2022-08-29 17:14:06 · 2104 阅读 · 0 评论 -
浏览器原生select使用总结
HTML中,浏览器原生select使用总结:onchange事件,获取/设置value,获取/设置text原创 2022-08-14 11:21:57 · 1829 阅读 · 0 评论 -
清除微信小程序、微信H5缓存
清除微信小程序缓存清除微信浏览器H5缓存原创 2022-07-19 14:39:15 · 3226 阅读 · 0 评论 -
js date详解、string转date
js date详解;string转date原创 2022-07-18 17:31:40 · 7337 阅读 · 0 评论 -
iOS input[type=checkbox]打勾后不显示选中状态的问题
webkit内核浏览器的问题:1、检查-webkit-appearance样式属性是否被设置为了none或者auto。2、-webkit-appearance属性设置为checkbox原创 2022-02-22 10:31:14 · 2276 阅读 · 0 评论 -
js判断对象及属性是否存在
判断全局变量是否存在//方法1if(typeof wx === 'undefined') {}//方法2 浏览器环境if(window.wx === undefined) {}//方法3 wx存在,并且值等价于trueif(window.wx) {}判断对象是否有某个属性var obj = {};//判断某个已存在的对象,是否有某个属性if(obj.x === undefined) {}//不存在x属性if(obj.x) {} //存在x属性,并且值等价于trueif(o.原创 2021-10-29 12:02:40 · 435 阅读 · 0 评论 -
H5跳转微信公众号关注页面
微信公众号的页面地址(示例):'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=xxxxx&scene=124#wechat_redirect';可以通过location.href的方式直接跳转过去。<div class="p:32 text-center"> <button id="btn1" class="btn btn-main">关注公众号1</button>&l原创 2021-06-28 16:45:24 · 1633 阅读 · 0 评论 -
微信H5整图背景适配方案
微信H5页面的全屏背景图,建议设计尺寸:800px*1440px,ratio=1.8找了几部不同屏幕尺寸的手机,ratio表示长宽比:1、iPhone6s: 750*1206,ratio=1.608,标题栏高度:1282、华为1: 800*1430,ratio=1.788,标题栏高度:2603、华为2: 784*1458,ratio=1.860,标题栏高度:1424、华为3: 720*1352,ratio=1.878,标题栏高度:2485、iPhoneX:750*144原创 2021-04-10 14:59:23 · 1692 阅读 · 0 评论 -
H5页面中使用html2canvas总结
H5页面中使用html2canvas总结html2canvas插件实现的功能是,将dom节点的内容复制到一个动态创建的<canvas>中,而通过canvas对象就可以很方便地将画布的内容转成图片。github直达:html2canvas使用方式html2canvas(domNode, options).then(function(canvas){ var img = document.createElement('img'); img.src = canvas.toDat原创 2021-02-02 16:46:25 · 1958 阅读 · 3 评论 -
前端Js WebSocket测试代码,连websocket.org
连接ws://echo.websocket.org/进行测试,代码如下:<script> function initWebSocket(wsUri) { var websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { console.log('open...'); }; websocket.onclose = func原创 2020-10-22 15:47:52 · 2046 阅读 · 0 评论 -
Post请求中@RequestParam和@RequestBody的混合使用
如何在一个@RestController方法中混合使用@RequestParam和@RequestBody呢?就像这样的代码:@PostMapping("/scanRecord")public Response scanRecord(@RequestParam("t") int type, @RequestBody ScanRecord scanRecord) { System.out.println("type="+type); System.out.println(JSON.toJS原创 2020-10-22 15:04:18 · 29445 阅读 · 6 评论 -
微信H5页面跳转小程序,wx-open-launch-weapp总结
文章目录官网链接核心代码注意事项官网链接微信网页开发-开放标签说明文档核心代码#launch-btn { width: 50%; background: transparent;}<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxxx" path="pages/home/home.html"> <原创 2020-10-20 14:36:01 · 3012 阅读 · 7 评论 -
TypeScript极速入门示例
全局安装typescriptcnpm install -g typescript# 查看typescript版本tsc -v# 编译ts文件tsc test.ts基础代码示例//test.tswindow.onload = function() { //定义/声明变量,变量赋值 let num:number = 100; let str:string = 'a'; str = 'b'; console.log(str); var a:null = null..原创 2020-09-06 22:22:35 · 281 阅读 · 0 评论 -
Win10/11系统Rust安装 + WebAssembly入门实战(从0到1超详细)
1 Windows 10下安装Rust2 Rust Hello World3 WebAssembly入门3 rustup 更新4 crates搬家:指定CARGO_HOME4 VSCode插件安装5 Rust + WebAssembly上手初探6 不用Webpack打包前端代码,直接浏览器访问原创 2020-07-28 10:22:24 · 8646 阅读 · 0 评论 -
js去BOM
js去除字符串开头的BOM:function trimBOM(orgText) { //orgText = ""+orgText;//防止orgText传入数字的情况 var text = []; for(var i=0;i<orgText.length;i++) { var cc = orgText.charCodeAt(i); //过滤掉BOM,0xFEFF(65279) if(cc != 65279) { text.push(String.原创 2020-07-27 16:31:20 · 467 阅读 · 0 评论 -
WebAssembly+Rust:wasm返回给js的字符串长度看似不对的问题
现象js调用xxx.wasm中的函数,得到一个字符串。但字符串的length要比console.log输出的字符串长度大1。这是什么原因?解释笔者通过打印输出字符串中各个字符的charCode发现,xxx.wasm中返回给js的字符串,有的时候是带BOM(Byte Order Mark)的,即字符串的前面有一个charCode为65279的字符,亦即十六进制的0xFEFF。解决orgText = ""+orgText;var text = [];for(var i=0;i<orgTe原创 2020-07-27 16:17:31 · 681 阅读 · 0 评论 -
网页上跳转直接添加QQ好友、加入QQ群
添加QQ好友:服主QQ:757453794添加QQ群:QQ群:618967676现在还有一个其他方法可以应用: 这个方法比较简单;就是在群的主页有个群应用——>群分享——> 我们由此获得群链接,这样也可以加群,但是在各个方法有一点不好的就是中间会有个跳转页面,不是很美观。eg: https://jq.qq.com/?_wv=1027&k=56f8R6I...原创 2020-06-12 17:57:20 · 11280 阅读 · 2 评论 -
js中文乱码问题,还有比这更诡异的么?
经历了一次”顽固而诡异的js中文乱码“问题,特将问题排查过程记录下来,加深印象、吸取教训。如果你也遇到类似的问题,又碰巧看到了这篇文章,希望能够对你有所帮助和启示。问题描述前端A.html文件引用了一个含有中文配置信息的extend.js文件。其中extend.js本身的编码格式是utf-8。现象1:微信扫码访问一个短链接,最终跳转到A.html文件,发现Android机型上出现中文乱码,iOS手机上正常显示。现象2:如果在A.html对extend.js的引入时加上一个版本号,比如e.原创 2020-05-25 23:14:40 · 345 阅读 · 0 评论 -
加载的js脚本中中文乱码的问题
问题描述两个js文件(记为a.js、a1.js),从文件编码格式(都是无Bom的utf8)、文件大小、乃至文件中的每一个字符都是一模一样的。svn、git这种基于纯文本的diff工具看不出两者有任何区别。后续如果还出现问题是要BeyondCompare进行二进制比对看看。但是其中一个有问题,在有些Android 微信浏览器初次访问H5页面的时候,页面上中文乱码(页面上的中文都是从a.js中获取的),刷新页面还是乱码(这个本质上是Android微信浏览器的缓存机制,刷新页面只是从缓存又读取了一遍a.js)原创 2020-05-22 14:52:59 · 641 阅读 · 0 评论 -
ACE框架实践备忘录
1 form-horizontal/form-group/form-control的使用可以直接form-group下面套内容:&amp;amp;lt;div class=&amp;quot;form-group&amp;quot;&amp;amp;gt; &amp;amp;lt;label class=&amp;quot;label-sm control-label&amp;原创 2018-08-23 10:59:18 · 178 阅读 · 0 评论 -
CSS 多个动效叠加导致图片模糊
这是在Android机型上发现的问题。比如,有2个CSS animation动效先后应用在同一张图片上,两个动效里面都涉及到scale(缩放)。那么很有可能,第二个动效开始后,图片变得很模糊(特别是图片上有文字的情况,尤为明显)。一个解决办法是,在每一个动效完成之后,就重置一下目标对象的style.animation属性。document.getElementById('motion-im...原创 2020-05-08 12:42:50 · 490 阅读 · 0 评论 -
CSS animation多个动效叠加的问题
一个简单的动效叠加问题:@keyframes motion01 { 0% { /*transform: rotate(0deg) scale(0.3) translate3d(0,-50%,0);*/ transform: translate3d(0, -50%, 0) scale(.3) rotate(0deg); } 100% { ...原创 2020-05-06 17:16:34 · 2240 阅读 · 1 评论 -
原生js操作dom
原生js对dom的常见操作:1. document.getElementById 2. node.setAttribute/getAttribute3. node.children //获取node的下一级孩子节点4. node.firstElementChild //node的下一级第一个孩子节点...原创 2020-04-27 11:17:52 · 315 阅读 · 0 评论 -
解决iOS h5 audio自动播放(亲测有效)
微信H5页面,实现audio自动播放:function initMusic() { var audio = document.createElement('audio'); audio.setAttribute('id', 'audio'); audio.setAttribute('autoplay', 'autoplay'); audio.setAttribut...原创 2020-04-08 15:36:44 · 7104 阅读 · 1 评论 -
(fixed、absolute) input输入框被Android浏览器软键盘遮挡的问题处理
如果input的父容器position为absolute/fixed,那么很可能会遇到input框点击后,会被弹出的系统软键盘给遮挡住,造成无法正常输入的后果。一般有两种解决办法:1 监听window的resize事件,进行相应的高度或位置调整。var winHeight = $(window).height();$(window).resize(function() { var ...原创 2020-04-07 17:29:51 · 861 阅读 · 0 评论 -
微信小程序开发相关
1、小程序获取用户信息,直接调用app的getUserInfo方法。 2、获取用户OpenId。 小程序里面通过login得到一个code:wx.login({ success: function (res) { if(res.code) { wx.request({ url: 'https://xxx/testApp...原创 2018-02-12 17:39:33 · 281 阅读 · 0 评论 -
Java snippets(1): 单例模板
public class ${class} { private static ${class} mInstance = null; private ${class}(){ } public static ${class} getInstance() { if (mInstance == null) { mInstance = getIn...原创 2019-08-12 12:32:07 · 238 阅读 · 0 评论 -
开篇: Eclipse templates/snippets的使用
开篇: Eclipse templates/snippets的使用文章目录开篇: Eclipse templates/snippets的使用TemplatesSnippets小结TemplatesEclipse使用Templates的设置路径为:Window -> Preferences -> Java -> Editor -> Templates打开Templat...原创 2019-08-12 12:14:57 · 1736 阅读 · 0 评论 -
高德地图相关
经纬度查详细地址http://restapi.amap.com/v3/geocode/regeo?output=json&location=104.05286,30.641445&key=4a2555a66f344a811893f7b616b44e16&radius=1000&extensions=base原创 2017-12-14 09:27:19 · 433 阅读 · 0 评论 -
JavaScript计算地球上两个经纬度之间的直线距离
上述代码以球状模型计算地球上两点之间的直线距离。计算结果为9700米,跟。原创 2017-12-29 14:44:01 · 1506 阅读 · 0 评论 -
微信小程序开发备忘
1、Win10 64位机器上安装64位的小程序开发工具,貌似有兼容性问题,编辑代码后无法PC上预览效果,后面改装32位版本了。 2、scroll-view不能设置min-height:100%; 否则PC模拟器上正常显示,但是手机上死活显示不出来。(可能高度被处理成0了)。 3、app.json中不能带注释!!! 4、 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控原创 2018-01-26 14:21:16 · 285 阅读 · 0 评论 -
前端偏前实践总结(永久更新)
1、全屏背景: body { background-image: url(images/bg.png); background-size: 100% 100%; } 2、absolute居中: width: 95%; height: 95%; position: absolute; top: 0; right: 0; ...原创 2018-03-06 16:52:03 · 435 阅读 · 0 评论 -
流行的前端游戏引擎/框架/库
1、lufylegend 比较小巧,基于canvas,有时间多学习下 官方网站:http://lufylegend.com/lufylegend API文档:http://lufylegend.com/lufylegend/api2、cocos2d-x 比较成熟,也比较重一些。...原创 2018-03-21 15:11:28 · 1415 阅读 · 1 评论 -
记录前端10个极其隐蔽的错误
1 jQuery v2.2.1 $.ajax的坑$.ajax({ url : postUrl, data : { data:dataObj,//当dataObj为{}空对象时,data参数不会post到服务端, 一个不小的坑 page:pageArg, path:pathArg }, type : 'post'...原创 2018-08-29 17:28:27 · 233 阅读 · 0 评论