前端技术

[置顶] Aiiphp框架测试版发布,欢迎测试!

[置顶] Linux常用运维命令和linux常用管理操作命令(整理)

[置顶] Linux/Window服务器安全配置等常用软件下载列表

IOS微信内置浏览器如何隐藏跳转链接后底部的前进后退横栏

这个主要是由于涉及到跳转链接的问题,解决方法很简单:

跳转的方式改为:

window.location.replace("1.html");

微信分享到朋友圈onMenuShareTimeline成功后的回调函数不执行的解决方法

微信分享到朋友圈onMenuShareTimeline成功后的回调函数不执行的解决方法

测试IOS不支持,具体解决方法:

//以下代码放入success内,
setTimeout(function(){
   //回调要执行的代码
}, 500);

微信小程序HTML富文本渲染方案Html2Wxml2J

曾经有wxParse,一个小程序前端使用的javascript库,前端直接转换渲染。使用到了微信小程序的模板渲染,但是依然弱鸡,经常出现各种Javascript错误,很多标签不兼容。

推荐一个比较靠谱的解析微信小程序渲染方案:

靠谱的小程序插件项目-html2wxml

1、设置=》第三方服务=》添加插件

2、app.json 里面添加插件


 "plugins": {
 	"htmltowxml": {
 		"version": "1.3.0",
 		"provider": "wxa51b9c855ae38f3c"
 	}
 }


» 阅读全文

微信小程序canvas绘画Api功能使用

微信小程序也开放了canvas绘画功能,网上看到一些人做的斗图小程序,里面有图片、文字合成,看了下接口,也顺便了解小微信小程序的绘画,估计常用的就那么几个吧。

简单demo

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFontSize(20);
ctx.setFillStyle('#561212')
ctx.fillText('Hello', 20, 120);
ctx.drawImage("https://ws1.sinaimg.cn/large/9150e4e5jw1fcceiouagwj208c08cglq.jpg", 0, 0, 150, 100);
ctx.draw();
html:部分

 <canvas canvas-id="myCanvas" />

关键词: 微信小程序

安卓微信浏览器中location.href失效的问题

在移动web中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会
存在问题,但是在安卓手机的微信自带浏览器中,会出现一个奇怪的bug。    

window.location.href = baseUrl + 'article/comment';

暂时还没找到具体的原因,但是当时遇到问题时,感觉是缓存在捣乱,所以尝试着给跳转链接后面加了一个随机数或者上面的代码是通过href属性赋值去跳转到文章的评论页面,这段代码在安卓手机的微信自带浏览器中会偶发性的失效,
调用上面的代码后,浏览器进度条加载完后,页面并没有跳转,还是停留在当前页面。

时间戳,结果是问题解决了。

window.location.href = baseUrl + 'article/comment?v='+(new Date().getTime()); 
window.location.href = baseUrl + 'article/comment?v='+Math.random();

HTML5利用Geolocation API获取地理位置定位功能

定位功能(Geolocation)是html5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。


function getLocation(){ 
    if (navigator.geolocation){ 
        navigator.geolocation.getCurrentPosition(showPosition,showError); 
    }else{ 
        alert("浏览器不支持地理定位。"); 
    } 
} 


» 阅读全文

关键词: 定位 , 获取地理位置 , html5

砸金蛋:PHP+jQuery实现的砸金蛋中奖功能

砸金蛋:PHP+jQuery实现的砸金蛋中奖功能。当然案例是3个,你也可以改为1个金蛋,进行抽奖

1.png - 大小: 75.65 KB - 尺寸: 1124 x 688 - 点击打开新窗口浏览全图

抽奖算法:



» 阅读全文

关键词: 砸金蛋

刮刮卡:利用HTML5的画布Canvas的实现移动端刮刮卡效果

我们利用HTML5的画布canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。
HTML
我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上,特别是移动。

1.png - 大小: 40.87 KB - 尺寸: 966 x 542 - 点击打开新窗口浏览全图

DEMO:


http://www.jincon.com/download/guaguaka/

» 阅读全文

关键词: canvas , 刮刮卡

Total: 42123456Next ›