H5问题（2）

爱对代码发呆

已于 2023-06-07 16:36:43 修改

阅读量3.4k

点赞数

文章标签：蓝桥杯 linq safari

于 2022-03-16 10:54:34 首次发布

本文链接：https://blog.csdn.net/hsjhjhdsa/article/details/123504079

版权

1.在body上注册load事件

2.移动端获取地址栏并且解析地址栏中的数据

function getQueryParams(url) {

var query = {};

var hashParts = url.split('#');

var urlParts = hashParts[0].split('?');

if (urlParts.length > 1) {

// 有query

var queryParts = urlParts[1].split('&');

for (var i = 0, len = queryParts.length; i < len; i++) {

var items = queryParts[i].split('=');

query[items[0]] = decodeURIComponent(items[1]);

}

return query;

};

var query = getQueryParams(location.href);

var { appName } = query；

3.判断当前设备打开是在微信端还是在浏览器端等

var browser = {

versions: function () {

var u = navigator.userAgent, app = navigator.appVersion;

return { //移动终端浏览器版本信息

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器

};

}(),

language: (navigator.browserLanguage || navigator.language).toLowerCase()

}

function startapp(){

let appid = getQueryVariable('appid');

if(appid==null || appid==''){

alert('参数不合法')

return;

}

if (browser.versions.mobile) {//判断是否是移动设备打开

var wx = (function () {

return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 })();

//获取判断用的对象

if (wx) {

//在微信中打开

window.location.reload()

}else if (browser.versions.ios) {

// 在iOS浏览器打开

} else if(browser.versions.android) {

// 在安卓端浏览器打开

}

function getQueryVariable(variable){

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i=0;i<vars.length;i++) {

var pair = vars[i].split("=");

if(pair[0] == variable){return pair[1];}

}

return(false);

}

4. js获取当前设备所在的经度纬度

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function (position) {  
            console.log( position.coords.longitude );
            console.log( position.coords.latitude );
        },
        function (e) {
           throw(e.message);
        }
    ) 
}

获取设备ip地址

http://pv.sohu.com/cityjson?ie=utf-8

5.(/Android/gi).test(navigator.userAgent)

6.当input输入框或者是整个页面设置user-select: none之后，注：可能为了设置IOS页面长按不可复制粘贴功能

input输入框就没有办法输入了，并且没有光标，设置auto即可

input, textarea {

user-select: auto!important;

}

7.向右的箭头，CSS实现

.icon-jiantou{

font-size: 0.6em;

padding: 0.4em;

width: 2px;

height: 2px;

border-top: 1px solid #FF7A12;

border-right: 1px solid #FF7A12;

transform: rotate(45deg);

margin-left: 2px;

}

8.判断真实数据类型（字符串形式表示）

function typeOf(obj){
var str = Object.prototype.toString.call(obj);
var classType = str.match(/\[object (.*?)\]/)[1];
return classType
}

Object.prototype.toString.call({}) 也可以判断

9. 数组中对象根据某一项去重

var removeDuplicateObj = (arr) => {

let obj = {};

arr = arr.reduce((newArr, next) => {

obj[next.operate_time] ? "" : (obj[next.operate_time] = true && newArr.push(next));

return newArr;

}, []);

return arr;

}

10. swiper插件设置loop为true，页面数量动态，dom同等，注册点击等事件会出现失效情况，需要在swiper的配置里注册事件，作相应的操作逻辑可以是获取到当前的slide数目，拿到对应的数目去做对应的操作，事件中可以接收到swiper中的dom对象参数

11.

解决js无法处理金额乘以100精度的问题

new BigDecimal(app.$data.payCount).multiply(new BigDecimal("100")).setScale(0, BigDecimal.ROUND_HALF_UP).toString();

设备分辨iOS和安卓简单方法

var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;

var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;

var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0 && !deviceIsWindowsPhone;

12.解决H5页面中，按钮等元素固定在底部时，弹出键盘底部元素被遮盖的问题

mounted() {

this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;

window.addEventListener('resize',this.handleResize);

}, 先注册resize事件

isIos() {

var m = navigator.userAgent;

var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

let result = isIos ? true : false;

return result;

handleResize() {

var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;

if (resizeHeight < this.originHeight) {

//当软键盘弹起，在此处操作

if (!this.isIos()) {

//软键盘弹起操作

}

} else {

//当软键盘收起，在此处操作

if (!this.isIos()) {

//软键盘收起操作

}

13.H5页面跳转小程序的方法

$(document).ready(function () {

function docReady(fn) {

if (document.readyState === 'complete' || document.readyState === 'interactive') {

fn()

} else {

document.addEventListener('DOMContentLoaded', fn);

}

var ua = navigator.userAgent.toLowerCase()

var isWXWork = ua.match(/wxwork/i) == 'wxwork'

var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'

docReady(async function() {

var isMobile = false

var isDesktop = false

if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {

isMobile = true

} else {

isDesktop = true

}

console.warn('ua', ua)

console.warn(ua.match(/MicroMessenger/i) == 'micromessenger')

var m = ua.match(/MicroMessenger/i)

console.warn(m && m[0] === 'micromessenger')

if (isWeixin) {

sessionStorage.setItem("state",'back')

var containerEl = document.getElementById('public-web-container')

containerEl.classList.remove('hidden')

containerEl.classList.add('full', 'public-web-container')

var c = new cloud.Cloud({

// 必填，表示是未登录模式

identityless: true,

// 资源方 AppID

// resourceAppid: 'wx2d60e0792cfff4ae',

resourceAppid: 'wxe5f52902cf4de896',

// 资源方环境 ID

resourceEnv: 'postpay-2g5hm2oxbbb721a4',

})

await c.init()

window.c = c

var buttonEl = document.getElementById('public-web-jump-button')

var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')

try {

await openWeapp(() => {

buttonEl.classList.remove('weui-btn_loading')

buttonLoadingEl.classList.add('hidden')

})

} catch (e) {

buttonEl.classList.remove('weui-btn_loading')

buttonLoadingEl.classList.add('hidden')

throw e

}

})

async function openWeapp(onBeforeJump) {

var c = window.c

const res = await c.callFunction({

name: 'public',

data: {

action: 'getUrlScheme',

})

if (onBeforeJump) {

onBeforeJump()

}

location.href = res.result.openlink

}

})

需要填写小程序id和云开发环境id

</a>

</div>

此处注册DOM元素

文件需要引入jweixin-1.6.0.js 、 cloud.js，具体可查看微信公众号官方文档

14.h5页面中表情包的显示

// 表情加密

function utf16toEntities(str) {

var patt=/[\ud800-\udbff][\udc00-\udfff]/g;

// 检测utf16字符正则

str = str.replace(patt, function(char){

var H, L, code;

if (char.length===2) {

H = char.charCodeAt(0);

// 取出高位

L = char.charCodeAt(1);

// 取出低位

code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00;

// 转换算法

return "##" + code + ";";

} else {

return char;

}

});

return str;

}

//表情解码

function uncodeUtf16(str){

var reg = /##.*?;/g;

var result = str.replace(reg,function(char){

var H,L,code;

if(char.length == 9 ){

code = parseInt(char.match(/[0-9]+/g));

H = Math.floor((code-0x10000) / 0x400)+0xD800;

L = (code - 0x10000) % 0x400 + 0xDC00;

return unescape("%u"+H.toString(16)+"%u"+L.toString(16));

}else{

return char;

}

});

return result;

}

15.判断当前页面是否出现滚动条

function hasScrollbar() {

return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);

}

16. 判断当前页面是否超过了一屏高度，超出时页面自动往上滚动一段距离

if(window.innerHeight - $('.add_tips').offset().top < 110){

$('body').height( $('body').height()+50)

$('html,body').scrollTop(50)

}

17、页面出现弹窗禁止内容滚动，弹窗消失不再禁止

$('body,html').css({overflow: 'hidden'})

$('body,html').css({overflow: 'auto'})

18、不同类型的文件在H5页面上的下载

<button οnclick="load(url1,'filename.zip','text/plain;charset=utf-8')">下载zip</button>

<button οnclick="load(url3,'img.png','image/png')">下载png图片</button>

<button οnclick="load(url4,'img.jpg','image/jpeg')">下载jpg图片</button>

var url1 = "https://file/daochu1-1-5x.zip"

var url2 = "https://file/20221226123925.mp4"

var url3 = "https://file/daochu1@1.5x.png"

var url4 = "https://file/ce.jpg"

function load(url,type,blobtype) {

axios({

url,

method: "get",

responseType: "blob"

})

.then(result=>{

console.log(result)

const blog = new Blob([result.data],{

type: blobtype

});

const url = window.URL.createObjectURL(blog);

console.log(url)

let a = document.createElement('a');

a.download = type

a.href = url

a.click()

})

.catch(err=>{

console.log(err)

})

}

</script>

18.求A到B范围随机整数公式

Math.floor((B+1-A) * Math.random()) + A

19.页面自动回到顶部的方法

第一种方法

const scrollToTop = () => {

const fromTopDistance = document.documentElement.scrollTop || document.body.scrollTop;

if (fromTopDistance > 0) {

window.requestAnimationFrame(scrollToTop);

window.scrollTo(0, fromTopDistance - fromTopDistance/ 8);

}

第二种方法

const element = document.getElementById("businessBox");

element.scrollIntoView({ behavior: "smooth"});

scrollIntoView兼容性良好，动画效果存在部分机型不兼容，去除动画效果即可：

element.scrollIntoView();

20. 实现打开弹窗，元素滚动到最底部

$('#zibox').animate({

scrollTop: '10000px'

}, 50);

21.body滚动到最底部

var div = document.getElementsByTagName('body')[0];

div.scrollTop = div.scrollHeight;

22.安卓上配置align-items: end;等不生效，iOS可以

23. 元素盒子设置display:flex,设置不换行显示省略号不生效

爱对代码发呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5问题（2）

1.在body上注册load事件<body class="body" onload="after()">2.移动端获取地址栏并且解析地址栏中的数据function getQueryParams(url) { var query = {}; var hashParts = url.split('#'); var urlParts = hashParts[0].split('?');.........
复制链接

扫一扫