js通过浏览器语言 设备跳转指定页面

//移动设备访问跳转

(function(){
var pathname = window.location.pathname;
pathnameobj = pathname.split(‘/’);
filename=pathnameobj[pathnameobj.length – 1];
// alert(filename);

var language=(navigator.browserLanguage || navigator.language).toLowerCase()
var ua=navigator.userAgent.toLowerCase();

var bIsIpad = ua.match(/ipad/i) == “ipad”;
var bIsIphoneOs = ua.match(/iphone os/i) == “iphone os”;
var bIsMidp = ua.match(/midp/i) == “midp”;
var bIsUc7 = ua.match(/rv:1.2.3.4/i) == “rv:1.2.3.4”;
var bIsUc = ua.match(/ucweb/i) == “ucweb”;
var bIsAndroid = ua.match(/android/i) == “android”;
var bIsCE = ua.match(/windows ce/i) == “windows ce”;
var bIsWM = ua.match(/windows mobile/i) == “windows mobile”;
//移动端
if(bIsIpad||bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM){
if(language.indexOf(‘zh’) > -1){
if(filename!=’m_index.html’)window.location.href = “m_index.html”;
}else{
if(filename!=’m_index_en.html’)window.location.href = “m_index_en.html”;
}
}
else//PC端
{
if(language.indexOf(‘zh’) > -1){
if(filename!=’index.html’)window.location.href = “index.html”;
}else{
if(filename!=’index_en.html’)window.location.href = “index_en.html”;
}
}

})();

小程序webview跳转页面后没有返回按钮完美解决方案

随着小程序越来越火爆,使一个产品如果只有公众号H5页面APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很。在此驱动下,我所在公司也决定赶紧上车。

但是,如果要按照小程序的套路重新写一份的话,又感觉付出的时间成本太大了,非常的不划算。于是乎,脑子灵光一闪,想起了小程序貌似有个小弟叫webviewwebview是啥,按字面意思就是网页视图(来自百度翻译)。官方是这么定义的:

web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

简单的讲就是我们可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。也就是说,已经写好的微信公众号H5页面可以直接挪到小程序了。一行代码就完成公众号到小程序的转移,一行代码就让我们多了一个流量入口,一行代码就解决了重新开发一套小程序代码的难题。想到这真的是激动死了。

当我兴致冲冲的把链接放进webview中,就像这样:(真实项目链接地址,用自己的域名代替了^_^)

<!--微信小程序index.wxml-->
<web-view src="https://www.hxkj.vip/"></web-view>

但是点击跳转页面的时候。唉哟,我去,我当时就真的楞了一下,页面左上角没有!!返回按钮!!导致回不去了,只能不停的往下点,没有回头路,这不是搞笑的吗。。。

当时想了一种方案,就是在每个H5页面都加上一个带返回按钮的导航栏,但是想了一下,这种方案不可取,因为小程序的头部已经有个导航栏了,再加一个的话就显得非常的不协调,可以用一个字来形容——【丑到爆】。果断弃用!

看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮的。那我们可以想到,如果在第二个页面也放个webview组件,用来显示跳转之后的链接,不就完美解决了吗?那么问题来了,怎么把主页点击的链接传到第二个页面呢?

我们可以在H5页面使用jssdkH5页面跳转到小程序页面的方法wx.miniProgram.navigateTo,然后再携带一个weburl参数:

//H5页面js
navigate(modelName) { //控制页面跳转---小程序、公众号、非微信跳转方式 【modelName---vue路由名字】
      this.isMiniProgram((res)=>{//判断是否是小程序页面的回调函数
        if (res) {//小程序页面
             wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName});
        } else {
             this.$router.push({name: modelName});//非小程序页面使用vue路由跳转
        }
      })
},
isMiniProgram(callback) { //是否为小程序环境
      //是否在微信环境
      if (!isWeixin()) {
          callback(false);
      } else {
           //微信API获取当前运行环境
           wx.miniProgram.getEnv((res) => {
               if (res.miniprogram) {//小程序环境
                   callback(true);
               } else {
                   callback(false);
               }
          })
      }
}

接着在小程序第二个页面webview.js中接收weburl参数,注意配置分享的页面链接:

// pages/webview/webview.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url:''
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      url: options.weburl //获取H5页面传递过来的weburl
    });
  },

  /**
   * 用户点击右上角分享***【特别注意这里,配置分享链接一定要给首页链接,要不然别人点进来又是没有返回按钮的哦】***
   */
  onShareAppMessage: function () {
    return {
      path: '/pages/index/index'
    }
  }
})

并赋值给webview.wxml中的src属性

<!--pages/webview/webview.wxml-->
<web-view src="{{ url }}"></web-view>
好了,这样的话,就完美解决了小程序webview跳转页面后没有返回按钮的问题。

作者:_TSY_
链接:https://www.jianshu.com/p/a7bb1a826548
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

jQuery图片裁剪插件jQuery-photoClip

一款支持手势的裁图插件插件

由于目前网上很难找到一款支持手势的裁图插件,因此自己动手写了一个。为了快速开发,依赖了很多其他的开源插件。不过目前仅解决需求即可。

依赖插件

  • [jquery.transit.js] 插件 (v1.4 中已经移除了对该插件的依赖)
  • [iscroll-zoom.js] 插件(由于原插件的zoom扩展存在几个bug,所以建议使用demo中提供的iscroll-zoom.js文件,本人已经将这些bug修复)
  • [hammer.js] 插件
  • [lrz.all.bundle.js] 插件

操作说明

在移动设备上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度

在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度

使用方法及参数配置简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.min.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [640, 640], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
    file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
    loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
    loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
});
</script>

Destroy

1
clipArea.destroy();

常用正则表达式—邮箱(Email)

常用正则表达式—邮箱(Email)

本文针对有一点正则基础的同学,如果你对正则一无所知,请移步“正则表达式30分钟入门教程”学习。

要验证一个字符串是否为邮箱的话,首先要了解邮箱账号的格式。我尝试过在网上找出一个标准的格式,但是很遗憾我没有找到。我也尝试使用RFC标准来判断邮箱的格式,但是也没有结果。网上些博客说不应该使用RFC标准来验证邮箱是否合法,有兴趣的可以看看“is this email valid?”和“Don’t RFC-Validate Email Addresses”。据了解【参考】,现在用中文命名的邮箱也合法了,比如“杨元庆@联想.中国”。

虽然没有统一的邮箱账号格式,但是所有邮箱都符合“名称@域名”的规律。对于名称和域名的字符限制,我们可以根据项目的情况定义一个,比如只允许有英文、数字、下划线等组成。下面举例实现一些验证邮箱格式的正则表达式。

实例1、只允许英文字母、数字、下划线、英文句号、以及中划线组成

举例:zhangsan-001@gmail.com
分析邮件名称部分:

  • 26个大小写英文字母表示为a-zA-Z
  • 数字表示为0-9
  • 下划线表示为_
  • 中划线表示为-
  • 由于名称是由若干个字母、数字、下划线和中划线组成,所以需要用到+表示多次出现

根据以上条件得出邮件名称表达式:[a-zA-Z0-9_-]+

分析域名部分:

一般域名的规律为“[N级域名][三级域名.]二级域名.顶级域名”,比如“qq.com”、“www.qq.com”、“mp.weixin.qq.com”、“12-34.com.cn”,分析可得域名类似“** .** .**.**”组成。

  • “**”部分可以表示为[a-zA-Z0-9_-]+
  • “.**”部分可以表示为\.[a-zA-Z0-9_-]+
  • 多个“.**”可以表示为(\.[a-zA-Z0-9_-]+)+

综上所述,域名部分可以表示为[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+

最终表达式:
由于邮箱的基本格式为“名称@域名”,需要使用“^”匹配邮箱的开始部分,用“$”匹配邮箱结束部分以保证邮箱前后不能有其他字符,所以最终邮箱的正则表达式为:
^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

实例2、名称允许汉字、字母、数字,域名只允许英文域名

举例:杨元庆001Abc@lenovo.com.cn

分析邮件名称部分:

  • 汉字在正则表示为[\u4e00-\u9fa5]
  • 字母和数字表示为A-Za-z0-9
    通过分析得出邮件名称部分表达式为[A-Za-z0-9\u4e00-\u9fa5]+

分析邮件域名部分

邮件部分可以参考实例1中的分析域名部分
得出域名部分的表达式为[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+

最终表达式:
我们用@符号将邮箱的名称和域名拼接起来,因此完整的邮箱表达式为
^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

http://blog.csdn.net/make164492212/article/details/51656638

https://c.runoob.com/front-end/854

微信 WEUI原生以及使用webuploader插件上传方法

摘要: weui构架下的原生及webuploader插件上传js代码

weui1.0.0

webuploder-0.1.5

不多说,直接看代码

		$(function() {
			// 允许上传的图片类型
			var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];
			// 1024KB,也就是 1MB
			var maxSize = 1024 * 1024;
			// 图片最大宽度
			var maxWidth = 300;
			// 最大上传图片数量
			var maxCount = 6;
			$('.js_file').on('change', function(event) {
				var files = event.target.files;
				// 如果没有选中文件,直接返回
				if (files.length === 0) {
					return;
				}
				for (var i = 0, len = files.length; i < len; i++) {
					var file = files[i];
					var reader = new FileReader();
					// 如果类型不在允许的类型范围内
					if (allowTypes.indexOf(file.type) === -1) {
						$.weui.alert({
							text : '该类型不允许上传'
						});
						continue;
					}
 					if (file.size > maxSize) {
 						$.weui.alert({
 							text : '图片太大,不允许上传'
 						});
 						continue;
 					}
 					if ($('.weui_uploader_file').length >= maxCount) {
 						$.weui.alert({
 							text : '最多只能上传' + maxCount + '张图片'
 						});
 						return;
 					}
					reader.onload = function(e) {
						var img = new Image();
						img.onload = function() {
							// 不要超出最大宽度
							var w = Math.min(maxWidth, img.width);
							// 高度按比例计算
							var h = img.height * (w / img.width);
							var canvas = document.createElement('canvas');
							var ctx = canvas.getContext('2d');
							// 设置 canvas 的宽度和高度
							canvas.width = w;
							canvas.height = h;
							ctx.drawImage(img, 0, 0, w, h);
							var base64 = canvas.toDataURL('image/png');

							// 插入到预览区
							var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('
									+ base64 + ')"><div class="weui-uploader__file-content">0%</div></li>');

							$('.weui-uploader__files').append($preview);

							// 然后假装在上传,可以post base64格式,也可以构造blob对象上传,也可以用微信JSSDK上传
							var progress = 0;
							function uploading() {
								$preview.find('.weui-uploader__file-content').text(++progress + '%');
								if (progress < 100) {
									setTimeout(uploading, 30);
								} else {
									// 如果是失败,塞一个失败图标
									//$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
									$preview.removeClass('weui-uploader__file_status')
											.find('.weui-uploader__file-content')
											.remove();
								}
							}
							setTimeout(uploading, 30);
						};
						img.src = e.target.result;
					};
					reader.readAsDataURL(file);
				}
			});
		});



html

<div class="weui-cells weui-cells_form">
	<form method="post">
		<div class="weui-cells__title">照片</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader__bd">
					<ul class="weui-uploader__files">
						<li class="weui-uploader__file" style="background-image:url(http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/ba2d23de68ad4dcc8ed67622f911f14c20170113154227.png_140x88x1x85.jpg)">
						</li>
					</ul>
					<div class="weui-uploader__input-box">
						<input id="uploaderInput" class="weui-uploader__input js_file" type="file" accept="image/*" multiple>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div>
	</form>
</div>

上面是搜到的原生解决办法,这个基础上可以将base64上传到七牛,详见:

https://support.qiniu.com/question/69078

下面是webuploader插件上传代码,本例上传七牛

var uploader = WebUploader.create({
	auto: true,
	swf: '/statics/webuploader-0.1.5/Uploader.swf',
	server: 'http://upload.qiniu.com/',
	pick: '#imgInput',
	accept: {
		title: 'Images',
		extensions: 'gif,jpg,jpeg,bmp,png',
		mimeTypes: 'image/*'
	},
	method: 'POST',
	formData: {'token':'%token%'}
});
uploader.on('uploadStart',function(file) {
	this.options.formData.key='image/'+new Date().getTime()+'/'+file.name.replace(/,/g, '');
});
uploader.on('fileQueued', function(file) {
	var $preview = $('<li id="'+file.id+'" class="weui-uploader__file weui-uploader__file_status"><div class="weui-uploader__file-content">0%</div></li>');
	$('#imgList').append($preview);
	uploader.makeThumb(file, function( error, src) {
	$('#'+file.id).css('background-image','url('+src+')');
    }, 79, 79 );
});
uploader.on('uploadProgress', function(file, percentage ) {
	$('#'+file.id).find('.weui-uploader__file-content').html(percentage+'%');
});
uploader.on('uploadSuccess', function(file, response) {
	$('#'+file.id).removeClass('weui-uploader__file_status')
	.find('.weui-uploader__file-content')
	.remove();
// 上传成功,想干点什么就在这里干吧
});

html

<div class="weui-cell">
	<div class="weui-cell__bd">
		<div class="weui-uploader__bd">
			<ul class="weui-uploader__files" id="imgList">
				<li id="" class="weui-uploader__file" style="background-image:url()"></li>
			</ul>
			<div class="weui-uploader__input-box">
				<div id="imgInput" class="weui-uploader__input">选择图片</div>
			</div>
		</div>
	</div>
</div>

https://my.oschina.net/illone/blog/826574

使用clipboard.js实现页面内容复制到剪贴板

clipboard.js是一个github上的开源项目,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

1、访问clipboard.js项目主页——https://github.com/zenorocha/clipboard.js

2、下载clipboard.min.js,并在页面中引用

  1. <!– clipboard Script –>
  2.         <script type=“text/javascript” src=“script/clipboard.min.js”></script>

 

3、在script中写实例化语句:

  1. <script type=“text/javascript”>
  2.         $(document).ready(function(){
  3.             var clipboard = new Clipboard(‘.btn’);
  4. }
  5. </script>

4、写页面按钮,实现点击按钮复制指定内容

  1. <button class=“btn” data-clipboard-text=“http://www.hbcloudwide.com/oss/video/7”>点击复制</button>

当然,clipboard.js还可以实现多种复制或剪切效果。具体用法参看github项目主页即可。

 

http://blog.csdn.net/softwave/article/details/50054477

js可以监听浏览器默认按钮的后退事件吗back()

window.history.back() // 上一頁
window.history.go(-2) // 前第二頁
監聽事件
jQuery(document).ready(function($) {

if (window.history && window.history.pushState) {

$(window).on(‘popstate’, function() {
var hashLocation = location.hash;
var hashSplit = hashLocation.split(“#!/”);
var hashName = hashSplit[1];

if (hashName !== ”) {
var hash = window.location.hash;
if (hash === ”) {
alert(‘後退按鈕點擊’);
}
}
});

window.history.pushState(‘forward’, null, ‘./#forward’);
}

});

jquery 回到顶部

<html>
<head>
<title></title>
</head>
<body>
<style type=”text/css”>
.go-top-trigger {
width: 52px;
height: 52px;
cursor: pointer;
z-index: 10;
right: 13px;
bottom: 132px;
position: fixed;
background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/n/nvn/static/news/imgs/go-top_b1fff84.png) no-repeat;
background-size: 52px auto;
-webkit-background-size: 52px auto;
background-position: right center;}
</style>
<div class=”go-top-trigger” style=”display:none;” ></div>

</body>
<script type=”text/javascript” src=”http://www.jq22.com/js/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 300){
$(‘.go-top-trigger’).fadeIn(300);
}else{
$(‘.go-top-trigger’).fadeOut(300);
}
});
$(‘.go-top-trigger’).click(function(){
$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});
});
</script>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
</html>

html 实现 消息咨询提示框 微信提示框 微信咨询按钮

需要引用jquery    图标

[html]

&lt;style&gt;
#ding {width:100%; max-width:640px; max-height:100px; position:fixed; top:0; z-index:999999; background-color:#000; background:transparent; color:#FFF; background-color:rgba(0,0,0,0.70);}
.wxin { width:10%; height:100%; overflow:hidden; padding-top:8px; padding-bottom:8px; padding-left:8px; padding-right:8px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #c7c5c5; }
.wxin img { width:100%; max-height:74px;}
.wenz { width:60%; height:100%; overflow:hidden; float:left; margin-left:8px; padding-top:2%;}
.wenz { color:#FFF; font-size:14px;}
.huifu { width:18%; height:100%; overflow:hidden; float:left; background-color:#3daf35; border-radius:6px; text-align:center; padding-top:4px; padding-bottom:4px; margin-top:15px;}
.huifu span { font-size:14px; color:#FFF;}
&lt;/style&gt;
&lt;div id="ding" style="display:none;"&gt;
&lt;div class="wxin"&gt;&lt;img src="/images/wx1.png"&gt;&lt;/div&gt;
&lt;div class="wenz"&gt;&lt;p&gt;真爱在线医生&lt;br&gt;您好,请问有什么可以帮您?&lt;/p&gt;&lt;/div&gt;
&lt;div class="huifu"&gt;&lt;a href="javascript:void(0)" onClick="openZoosUrl();LR_HideInvite();return false;"&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function () {
//绑定滚动条事件
//绑定滚动条事件
$(window).bind("scroll", function () {
var sTop = $(window).scrollTop();
var sTop = parseInt(sTop);
if (sTop &gt;= 10) {
if (!$("#ding").is(":visible")) {
try {
$("#ding").slideDown();
} catch (e) {
$("#ding").show();
}
}
}
else {
if ($("#ding").is(":visible")) {
try {
$("#ding").slideUp();
} catch (e) {
$("#ding").hide();
}
}
}
});
})
&lt;/script&gt;

[/html]