nonsense

Same old rules, bullshit, and I haven’t blogged in a while. I have been busy with my work recently, so I don’t have much independent learning to do.

ForEach is not a pure synchronization function

A period of time between the beginning of the year and the beginning of the year to reconstruct a function, need to receive the market data structure, and then the front end to parse, rearrange the data, pure front-end data collation, and then call the storage JSON interface, stored in the back end. One of the things that happens here is I have a data handler. Inside use pure forEach, continuous nesting, use. Up to 3 levels, with async await requests for interface data in between and then waiting for results.

The rough code structure is as follows

forEach(async () => {
    const data = await fun
})
async fun () {
    await data()
}
Copy the code

In the end, there was no problem with the data I got in the case of a small amount of data at the beginning, but in the case of a large amount of data, my data was eventually returned and not processed.

It turns out that in cases like the code above, use a for loop instead of a foreach case, otherwise your data will be processed incompletely. It turned out to be wrong.

This belongs to a small knowledge point.

Two, recently made an iPad side, horizontal screen, caused by rem adaptation problem

To be honest, the REM adaptation was found to be completely wrong on the phone when doing landscape. But my phone’s native browser works fine.

Device information: Mi 6, native browser, Baidu, UC, QQ, native no problem, UC, QQ, Baidu all destroyed.

Here’s how it works on the iPad

html {
    font-size: calc(100vw/1024);
}
Copy the code

This code is fine for ipads, computers, etc. On mobile, it just doesn’t work. The page is wrong.

Finally, I gave up the REM adaptation scheme and adopted VW to adapt the responsive type. The effect was surprisingly good and perfect.

Finally, share the ratio between VW and each design drawing

Design drawing ratio 1240:0.08065vw 1024: 0.09765625vw #### Mobile phone 75:0.1333 vw 375: 0.2667vwCopy the code

I guess the result is that the font size value is too small, and there is a minimum font size problem. But I didn’t get a chance to verify it, mainly because VW smells a little. It’s perfectly OK that you don’t adapt to very old models.

But I also generally know that my rem mode above should be multiplied by 100 at the end so that the minimum font size problem doesn’t occur. And that’s why people divide rem by 20 or 10.

I’m really curious how the RPX unit of the applet is implemented.

Three, summarize a function, including page pull down, scroll to the bottom, listen to the page return, page scrolling, page display hide and other functions.

Code address :github.com/ht-sauce/to…

Of course this code is flawed.

In particular, the monitor at the bottom of the page drop down and scroll is prone to problems.

For page drop-down listening, it is recommended to use a Component wrapped in Vant, or to wrap one yourself.

Then I scroll to the bottom of the page and since Vant doesn’t wrap it, I’ll have to wrap another one myself. The core function is taken out of js above.

Vue3 component: Document address

<template> <div class="root" @scroll="OnScroll" ref="root"> <slot></slot> </div> </template> <script> import { ref, defineComponent, onBeforeUnmount, onMounted } from 'vue' export default defineComponent({ name: 'DhtReachBottom', emit: ['load', 'roll'], props: { bottom: { type: Number, default: Setup (props, CTX) {const root = ref('root') let _currentScroll = 0, Function OnScroll() {const dom = root.value const function OnScroll() {const dom = root.value const ClientHeight = dom.clientHeight const contentHeight = dom.scrollHeight // contentHeight const scrollTop = dom.scrollTop // scrolling distance const scollType = scrollTop >= _currentScroll ? 'down' : 'up' const BottomDistance = contentHeight - clientHeight - scrollTop // page scroll event ctx.emit('roll', {dom: dom, clientHeight, contentHeight, scrollTop, PercentageDown: ScrollTop/(contentHeight - clientHeight), // Scroll down percentage BottomDistance: BottomDistance, // BottomDistance, px}) // when reaching the bottom 10px, the page scrolls to the bottom of the event if (! _isOnReachBottom && scollType === 'down' && BottomDistance <= props.bottom) { _isOnReachBottom = true ctx.emit('load') }  if (scollType === 'up') { _isOnReachBottom = false } _currentScroll = scrollTop } return { root, OnScroll, } }, }) </script> <style scoped lang="scss"></style>Copy the code

Four, monitor page size changes, elements hidden issues

The problem is that when testing on the iPad, elements that use abslote or fixed at the bottom of the page are highlighted by the input box. Some models, not all. One solution offered here is to hide pages when they get smaller. And then it comes back.

The same vue3 code, when used, export a ref: fiexdShow, according to this to control explicit and implicit on the line

import { ref, onBeforeUnmount, onDeactivated, watch, Reactive} from 'vue' export default function () {const fiexdShow = ref(true) onBeforeUnmount(() => { window.removeEventListener('resize', heightscroll) }) onDeactivated(() => { window.removeEventListener('resize', Heightscroll)}) const h2 = reactive ({docmHeight: document. DocumentElement. ClientHeight, / / the default screen height showHeight: Document. The documentElement. ClientHeight, real-time screen height / /}) window. AddEventListener (' resize, heightscroll) function heightscroll() { h2.showHeight = document.documentElement.clientHeight } watch( () => h2.showHeight, () => { if (h2.docmHeight > h2.showHeight) { fiexdShow.value = false } else { fiexdShow.value = true } }, ) return { fiexdShow, } }Copy the code

UserAgent can’t tell whether an Android tablet is a phone or an iPad

This problem is really a fuck of very, one is my computer above the test well, the results to the tablet above all not good ah. It turns out that when you go to an Android tablet, all you get is Android, which is just a phone, but you don’t know if it’s a tablet or a phone.

Fortunately, the project doesn’t have a three-way adaptation yet, so I went straight to the iPad page. But this problem is also very troubling, in the case of baidu, originally wanted to get the page physical inch judgment, but it seems not to work.

Finally found that the pixel is better. But pixels are a bit of a rule of thumb. Let me summarize a function

But the actual use of the recommendation we should judge according to the vertical and horizontal screen

// The px is mobile, PC, Export default function clientPX() {const width = window.screen.width if (width <= 600) {return 'mobile'} if (width > 600 && width < 960) { return 'ipad' } return 'pc' }Copy the code

Horizontal and vertical judgment

/ / landscape or portrait export function orientation () {const clientWidth = document. The documentElement. ClientWidth const clientHeight = document. DocumentElement. ClientHeight / / cross the if (clientWidth > = clientHeight) return 'vertical' else return 'transverse' / / vertical}Copy the code

Vi. Canvas generates qr code and download pictures and A tag

Export function Download(url) {if (! url) return false let a = document.createElement('a') a.href = url a.download = url a.click() a = null }Copy the code

Canvas generates qr code, download

import QRCode from 'qrcode' export default function (text, PNG) {let canvas = document.createElement('canvas') return new Promise((resolve, resolve, reject) => { QRCode.toCanvas( canvas, text, { width: 400, height: 400, }, function (error) { if (error) reject(error) else { const fullQuality = canvas.toDataURL('image/jpeg', Href = fullQuality save_link.download = name save_link.click() save_link = null canvas = null return resolve() } }, ) }) }Copy the code

Thank you:

Thanks for watching, love to give it a thumbs up.