🔥 Mobile common error handling, the project is still iterating, so we will continue to update common problems and solutions. This is the project introduction: good single library CMS

Unknown character appears in text

The test appeared on wechat in ios13.7, chrom, dege and android could not be reappeared. At first, it was speculated that there were no other characters in the data, but there was nothing before I saw the text in the console of dege.

That’s weird. Well, fuck. Finally found that this problem can be repeated in IE, directly in IE console input this record

There’s something in front of this thing, but I don’t know what it is. Run the code on him under a rogue

decodeURIComponent(res.itemshorttitle)
// '%EF%B8%8FISDE%E6%97%A5%E6%9C%AC%E8%BF%9B%E5%8F%A3dite%E9%85%B5%E7%B4%A0120*2'
Copy the code

The result shows that the extra thing is %EF% b8% 8F, what the hell is this thing, in a separate decoding of it to see

encodeURIComponent('%EF%B8%8F') // ''
Copy the code

There’s nothing there. Fuck. Okay, so I’ll just replace it with a string.

const e = decodeURIComponent(res.itemshorttitle).replace('%EF%B8%8F', '')
encodeURIComponent(e)
Copy the code

Html2canvas composite base64 pictures cannot be saved by long press

It mainly appears in some older models or older mobile browsers, normal in wechat. With Mi Mix3 test, no matter built-in browser or third-party browser (Firefox, Chrome, QQ browser, quark browser) can be normally saved by long press, but not in edge browser, long press can only be shared without saving download. At first I wondered if edge was the problem. Then I tested two base64 diagrams, one of which was ok and one of which was not, which indicated that there was something wrong with the diagram. Can synthesize base64 picture logic is exactly the same, there should be a difference in size, on the verification, first look can not save the size of the picture, up to 4m, and the normal size of the picture is 1.2m, it seems that the size of the problem. Then the base64 pictures that cannot be saved can be changed to 1.8m, and the test can also be saved by long press. After repeated verification, the result is: it is not good if it exceeds 2.2m, and it is best to control it within 2m.

Html2canvas screenshot is incomplete

Performance for the upper blank, only half of the content, in fact, is not incomplete, should be serious offset, beyond the blank. Verify that there is a scroll bar and scroll occurred, when the page is at the top, the screenshot is normal, so determine the scroll bar pot, this is easy to fix, the solution is to find the DOM that needs to be captured, get its offset from the top and add the scroll bar offset from the top.

const domTop = (this.$refs.imageWrapper as HTMLElement).getBoundingClientRect().top + (document.scrollingElement as any).scrollTop
html2canvas(
    this.$refs.imageWrapper as HTMLElement,
    {useCORS: true, y: domTop, scale: 4}
).then(canvas => {
      const dataURL = canvas.toDataURL('image/png')
      console.log(dataURL)
})
Copy the code

Html2canvas background turned black

Boy, don’t forget to set the background color

html2canvas(this.$refs.imageWrapper as HTMLElement, {background: '#fff'}).then()
Copy the code

Cannot find name ‘ClipboardItem’

Can’t find name “ClipboardItem”, native browser clipboard API, trigger this error when used, also in shims-vue.d.ts file, add code:

declare class ClipboardItem {
  constructor(data: { [mimeType: string]: Blob })
}
// new ClipboardItem
new window['ClipboardItem']({
    [blob.type]: blob
})
Copy the code

Qrcodejs2 check error no declaration file

Qrcodejs2: this library is quite old, and there is no ts declaration file, so there is an error. In this case, you need to add your own declaration file, find the shims-vue.d.ts file in the SRC directory, add the code:

declare module 'qrcodejs2'
Copy the code

The QR code generated by QrcodeJs2 cannot be sized on a mobile phone

Qrcodejs2 library was selected to generate square TWO-DIMENSIONAL code with a ratio of 200 * 200. Because it is a mobile page, the page layout uses REM, and the actual display area of qr code is 90*90.

$refs.qrcode (this.$refs.qrcode, {text: url, width: 200, height: 200) 200, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H })Copy the code

After the generation, img and Canvas nodes are created inside the ref=”qrcode” node. By default, Canvas is hidden and only shows pictures. Next, set the image to 100% width and height to fit the parent element. The PC displays normal information. The two-dimensional code display abnormality appears on the mobile phone, the size is 200 * 200 directly, beyond the parent element. I just lost it, fuck. Mobile browser in such strange, also do not have the width and height Settings directly invalid bar, directly offer vconsole, get the result I directly fuck. The nodes rendered by mobile phones are the exact opposite of those rendered by PC:

  • The SRC of canvas and img is empty and hidden by default
  • The PC defaults to IMG, SRC is base64, and canvas is hidden

It’s hard to change the width and height I set is invalid, where is invalid, it’s completely different, fuck.

Solution: Hide img, use canvas by default, set canvas width and height to 100% to fit parent element.

Gets the parameters on the URL

function getUrlParam (name, url) { const urlPar = url ? new URL(url) : window.location const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') const r = urlPar.search.substr(1).match(reg) const h = urlPar.hash.split('? ') [1]? urlPar.hash.split('? ')[1].match(reg):null if (r ! = null) { return unescape(r[2]) } else if (h ! {return unescape(h[2])} else {return null}} GetUrlParam ('cid') // read location getUrlParam('id', 'https://a.aaa.com/?id=2') // 2 getUrlParam('val', 'https://a.aaa.com/?id=2#/home?val=1') // 1Copy the code

Some Android phones don’t display a 1px border

All px units in the project will be converted to REM, and 1px will become 0.03125 REM after conversion. Some Android devices cannot display anything less than 1px.

Border: 1PX solid red // Specify 1PX, uppercase PX will not be convertedCopy the code

The price gets rid of the extra 0’s

// 12.10 -> 12.12 // 12.00 -> 12 parseFloat(price)Copy the code

Ios is not centered

Used to represent the selection of the small bar, generally using the pseudo-class + positioning implementation

position: absolute;
bottom: 0;
Copy the code

Normally, it’s left and right, but ios has a mind of its own:

left: 0;
right: 0;
margin: 0 auto;
Copy the code

Ios horizontal scroll bar hidden

::-webkit-scrollbar
    display: none
Copy the code

Ios rounded corners have an unknown line

This problem is more metaphysical, do not know what reason (the big guy that knows please inform below). There are two current solutions:

  • Add 1 pixel to the original height
  • Remove the height of the element directly

Ios uses a row-level block layout with uneven display

With no height specified by the parent, all child elements are aligned horizontally, resulting in a jagged state on ios

display: inline-block; vertical-align: top; // Explicitly specify alignmentCopy the code

Ios text gradient effect is invalid

At first, I suspected that there was a compatibility problem with background-clip: text attribute in ios. After checking, I found that ios supports it very well (Caniuse). All the models I tested were ios9, which could not be a compatibility problem. Display: Flex display: flex display: Flex

// display: flex;
display: inline-block;
Copy the code

The iframe nested page cannot be jumped

In the project, iframe is used to display the outer chain, which is convenient to add the back button to the outer chain. However, it was later found that if window.location.href was used to jump to a page nested with iframe, the jump would fail and the page URL would not change. Solution can use window. The parent. The location. The href or Windows. The top. The location. The href. Window. parent refers to the parent level, which is usually iframe, and window.top refers to the heel level, which is usually the outermost layer of multiple IFrames. With no iframe, window.parent==window.top==window

window.parent.location.href = ''
Copy the code

Windows environment authentication is invalid in QQ

My validation function

export const isWin = () => {
  return /Windows|Win/i.test(navigator.userAgent)
}
Copy the code

Through QQ debugging, IT is found that the information of NAVIGATOR. UserAgent in QQ contains the word “nMagicWin”, which is judged as Windows environment

Mozilla / 5.0 (Linux; Android 10; M2007J1SC Build/QKQ1.200419.002; Wv) AppleWebKit / 537.36 (KHTML, Like Gecko) Version/4.0 Chrome/77.0.3865.120 MQQBrowser/ 6.2TBS /045614 Mobile Safari/ 537.36v1_AND_SQ_8.7.5_1738_YYb_d A_8070510 QQ/8.7.5.5330 NetType/WIFI WebP/0.3.0 Pixel/1080 StatusBarHeight/91 SimpleUISwitch/0 QQTheme/1000 InMagicWin/0  StudyMode/0Copy the code

Remove the Win flag and use Windows only

export const isWin = () => {
  return /Windows/i.test(navigator.userAgent)
}
Copy the code

Better-scroll is disabled after switching on ios

When I switch to another page in the Keep-alive page, the component will not be destroyed. When ios slides on other pages, forward and backward buttons will pop up at the bottom, and when it returns to the better-Scroll page, it will not be able to scroll. The height of the scroll region needs to be recalculated in the Activated hook.

activated() {
    if (this.bs) {
      this.bs.refresh()
    }
  }
Copy the code

Better-scroll judges pull up and pull down

// dom scroll area
this.bs.on('touchEnd'.(str: BScrollStr) = > {
        if (str.y > 60) {
          console.log('Pulled down')
          return false
        }
        const tranY: number = (dom.scrollHeight - dom.clientHeight) * -1
        if (tranY - str.y > 60) {
          console.log('Pulled up', tranY)
          return false}})Copy the code

Better – Scroll up and down to update data cannot be clicked

My actual case is that the navigation button is on the left and the scrolling area is on the right. When the navigation button is clicked, the data of the scrolling area on the right should be updated accordingly. If the scrolling can be done correctly, the scrolling height needs to be recalculated. The scrolling content is a different category of goods and is clickable. When initialized, add the click: True attribute.

this.bs = new BScroll(dom, {
    probeType: 3.// Send scroll in real time
    click: true // Respond to the click event
})
Copy the code

Initialization for the first time, data can be normal to click, click on the side navigation, update the data, recalculate, after rolling is normal, click is normal also, problems arise in the slide after the update data, failure, click a few times, was found in the pull, the determination of the drop-down triggered when the update data function, while the data is normal, normal rolling, But the old scroll was not finished, causing click to fail. Finding the problem is easier to solve:

if (this.bs) {
    this.bs.stop() // Stop scrolling first
    this.bs.destroy() // The event is being destroyed
}
// re-instantiate
this.bs = new BScroll(dom, {
    probeType: 3.click: true
})
Copy the code