1、处理字数，当超过多少字就做....处理
reduceNum(value,num){
var result = null;
if(value.length>num){
result=value.substring(0,num-1)+'...';
}else{
result=value;
}
return result;
}
2、分享（分享到微信，朋友圈，QQ，QQ空间）——vue实现
html部分：
<div id="page">
<div id="shareBtn"></div>
<
div
class=
"share-mask hidden"
id=
"wrap"
>
<
ul
class=
"share share-enter"
id=
"share"
>
<
li
class=
"qq-app"
data-platform=
"QQ"
>
<
img
src=
"https://appd.knowbox.cn/public/img/icon-share-qq-app.png"
alt=
"分享到QQ"
/>
</
li
>
<
li
class=
"qq-zone"
data-platform=
"QQZone"
>
<
img
src=
"https://appd.knowbox.cn/public/img/icon-share-qq-zone.png"
alt=
"分享到QQ空间"
/>
</
li
>
<
li
class=
"wechat-app"
data-platform=
"WX"
>
<
img
src=
"https://appd.knowbox.cn/public/img/icon-share-wechat-app.png"
alt=
"分享到微信"
/>
</
li
>
<
li
class=
"wechat-timeline"
data-platform=
"WXCircle"
>
<
img
src=
"https://appd.knowbox.cn/public/img/icon-share-wechat-timeline.png"
alt=
"分享到微信朋友圈"
/>
</
li
>
</
ul
>
</
div
>
</div>
css部分
.page .share-mask {
width:
100%;
height:
100%;
position:
fixed;
top:
0;
background:
rgba(
0,
0,
0,
.7);
left:
0;
z-index:
99
}
.page .share {
height:
1.8rem;
width:
100%;
padding:
0.46rem
0
0;
box-sizing:
border-box;
margin:
0;
position:
absolute;
bottom:
0;
display:
table;
list-style:
none;
transition: transform
0.4s;
will-change: transform;
color:
#8e8e8e;
background:
#fff;
font-size:
0.2rem;
z-index:
999;
}
.page .share .share-enter-active,
.page .share .share-leave-active {
-ms-transform:
translateY(
0);
transform:
translateY(
0);
-webkit-transform:
translateY(
0);
}
.page .share .share-enter,
.page .share .share-leave-to {
-ms-transform:
translateY(
100%);
transform:
translateY(
100%);
-webkit-transform:
translateY(
100%);
}
.page .share:before {
position:
absolute;
left:
0.12rem;
top:
0.12rem;
content:
'
\5206\4EAB\5230
';
display:
block;
}
.page .share >
li {
display:
table-cell;
text-align:
center;
}
.page .share >
li.qq-app:after {
content:
'QQ';
}
.page .share >
li.qq-zone:after {
content:
'QQ
\7A7A\95F4
';
}
.page .share >
li.wechat-app:after {
content:
'
\5FAE\4FE1
';
}
.page .share >
li.wechat-timeline:after {
content:
'
\670B\53CB\5708
';
}
.page .share >
li >
img {
display:
block;
margin:
0
auto
0.04rem;
width:
0.96rem;
height:
0.96rem;
}
.page .hidden {
display:
none
}
js部分
mounted
:
function() {
var
that =
this;
pageEl =
document.
getElementById(
'app');
btnEl =
document.
getElementById(
'shareBtn');
shareEl =
document.
getElementById(
'share');
wrapEl =
document.
getElementById(
'wrap');
btnEl &&
btnEl.
addEventListener(
'touchstart',
function (
e) {
if (
shareEl) {
shareEl.
parentNode.
classList.
remove(
'hidden');
setTimeout(
function() {
shareEl.
classList.
remove(
'share-enter');
shareEl.
classList.
add(
'share-enter-active');
},
10);
}
});
shareEl &&
shareEl.
addEventListener(
'touchstart',
function (
e) {
var
elem =
e.
target;
while (!
elem.
classList.
contains(
'share')) {
if (
elem.
dataset.
platform) {
that.
doShare(
elem.
dataset.
platform);
}
elem =
elem.
parentNode;
}
});
wrapEl &&
wrapEl.
addEventListener(
'touchstart',
function (
e) {
var
elem =
e.
target;
while (!
elem.
classList.
contains(
'page')) {
if (
elem.
classList.
contains(
'btn') ||
elem.
classList.
contains(
'share')) {
return;
}
elem =
elem.
parentNode;
}
if (
shareEl) {
shareEl.
classList.
remove(
'share-enter-active');
shareEl.
classList.
add(
'share-enter');
setTimeout(
function() {
shareEl.
parentNode.
classList.
add(
'hidden');
},
400);
}
});
}
doShare
:
function(
platform) {
var
params = {
text:
'@shareDescText',
// 描述
// imageUrl: 'https://appd.knowbox.cn/ss/' + (@userType == 0 ? 'student' : 'teacher') + 'Icon.png',
imageUrl:
'XXX',
title:
'@shareTitleText',
// 标题
titleUrl:
'@doShareUrl',
url:
'@doShareUrl',
description:
'',
// site: '作业盒子' + (@userType == 0 ? '学生端' : '老师端'),
site:
'XXX',
siteUrl:
'@doShareUrl',
type:
2
};
params =
encodeURIComponent(
JSON.
stringify(
params));
window.
shareCallBack =
function() {
if (
shareEl) {
shareEl.
classList.
remove(
'share-enter-active');
shareEl.
classList.
add(
'share-enter');
setTimeout(
function() {
shareEl.
parentNode.
classList.
add(
'hidden');
},
400);
}
};
location.
href =
'hybird://method/doShare?platform=' +
platform +
'&data=' +
params +
'&jsCallBack=shareCallBack';
}
3、获取页面url里某个参数的方法
方法一：
function GetQueryString(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //寻找 &参数名=值& 这样的字段，&可以不存在，name就是参数名
var r = window.location.search.substr(1).match(reg);//开始匹配，找到了返回对应url的值，没找到返回null
if(r!=null)return unescape(r[2]); return null;
}
GetQueryString('token');
方法二：
var
qs = (
function() {
var
query =
location.
search.
substring(
1);
var
reg =
/&
?
(
\w
+
)
=
([^
&
]
+
)(?:
$|
&
)
/
igm;
var
_query = {};
while (
reg.
test(
query)) {
_query[
RegExp.
$1] =
RegExp.
$2;
}
return
_query;
})();
var
token =
qs.
token;
4、判断所处移动端浏览器版本
var
browser = {
versions
:
function () {
var
u =
navigator.
userAgent,
app =
navigator.
appVersion;
return {
//移动终端浏览器版本信息
trident:
u.
indexOf(
'Trident') > -
1,
//IE内核
presto:
u.
indexOf(
'Presto') > -
1,
//opera内核
webKit:
u.
indexOf(
'AppleWebKit') > -
1,
//苹果、谷歌内核
gecko:
u.
indexOf(
'Gecko') > -
1 &&
u.
indexOf(
'KHTML') == -
1,
//火狐内核
mobile: !!
u.
match(
/AppleWebKit.
*
Mobile.
*
/) || !!
u.
match(
/AppleWebKit/),
//是否为移动终端
ios: !!
u.
match(
/
\(
i
[^
;
]
+
;
(
U;
)
?
CPU.
+
Mac OS X/),
//ios终端
android:
u.
indexOf(
'Android') > -
1 ||
u.
indexOf(
'Linux') > -
1,
//android终端或者uc浏览器
iPhone:
u.
indexOf(
'iPhone') > -
1 ||
u.
indexOf(
'Mac') > -
1,
//是否为iPhone或者QQHD浏览器
iPad:
u.
indexOf(
'iPad') > -
1,
//是否iPad
webApp:
u.
indexOf(
'Safari') == -
1
//是否web应该程序，没有头部与底部
};
}(),
language: (
navigator.
browserLanguage ||
navigator.
language).
toLowerCase()
}
if (
browser.
versions.
ios ||
browser.
versions.
iPhone ||
browser.
versions.
iPad) {
console.log('ios系统');
}
else
if (
browser.
versions.
android) {
console.log('android系统');
}