How to make WeChat mini program compatible with IOS and Android

This article mainly introduces relevant information on IOS and Android compatibility issues in WeChat applet development. I hope this article can help everyone. Friends in need can refer to it. I hope it can help everyone.

WeChat applet development IOS and Android compatibility issues

1. Time conversion problem:

This is not just a problem with small programs, but also with ios systems.

is new Date("2017-06-16"). NAN will occur in IOS, so time conversion needs to be encapsulated separately. , the solution is as follows

1. Replace "-" with "/"

2. Delete the string after "." (there will also be problems with milliseconds)

The code is as follows:

 /**
   * 字符串转换为时间
   * @param {String} src 字符串
   */
  strToDate(dateObj){
   dateObj = dateObj.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/')
   dateObj = dateObj.slice(0, dateObj.indexOf("."))
   return new Date(dateObj)
  }

2. Fixed positioning problem

Fixed positioning of the entire page, pulling down on ios will trigger a drop-down event , but there is no animation effect. Android can run normally

Use absolute positioning in flex, ios has serious misalignment, causing the parent element to become absolute positioning, Android can achieve the desired effect

In short, try not to use fixed

3. Absolute positioning problem

1. Using absolute positioning, and the bandwidth is set to 100% and padding is set, which will cause the screen width to overflow, and the page can be moved left and right. Bug, there is no problem on the simulator, but there is this problem on the real machine. This problem made me debug and painful for a long time

2. When using absolute and the current element is a flex container, the layout under Ios will not have any effect, and all elements will be converted into abslote and the text will be misaligned

3. In short, try not to use absolute

4. The problem of word-spacing in buttons

Sometimes when using large buttons, two words I hope there will be a space in the middle, but I haven’t found a placeholder that can be used so far, so I used the word-spacing plus space method to set the spacing of the text. However, on iPhone 6s, when there is a space between two words, the whole will move to the right. Oops, two spaces must be set for it to work properly!

Related recommendations:

Example detailed explanation of IOS database upgrade data migration

Solution to clicking the button flash on the ios side

How to connect H5 with ios and android data

The above is the detailed content of How to make WeChat mini program compatible with IOS and Android. For more information, please follow other related articles on the PHP Chinese website!