background

Recently, I made an animation sharing activity for the public account H5. Although I had already realized that there would be a lot of problems before I did it, the ups and downs of the final completion to the launch were still beyond my expectation. Below is my summary from the development to the online pit in the middle, I hope to give you some advice when doing similar projects.

Technology stack: vue + vue-Router + velocity.js

Webpack LAN access

During the development process, we need to test and debug the style frequently, so we want to use the computer to start the local service. The mobile phone (connected to the same wifi with the computer) can access the local service for easy debugging. The configuration is introduced in the Webpack document

Host: 0.0.0.0Copy the code

After following this configuration, I restarted the local service, but still couldn’t access the service started on my computer. After fiddling for a long time, I finally discovered that it was the Firewall policy of Windows 10

The page layout

Generally, this full-screen animation project is not allowed to appear a scroll bar, so in order to adapt to various screens and models, it is necessary to make a minimum height security zone, to ensure that the content in this security zone is able to meet the majority of models (generally based on iphone6)

  • The light blue area in the figure above is the safe content area, where interactive content and animation elements are suggested for the page.
  • The content area should be vertically centered based on the height of the screen for easy adaptation to various models.
  • The reason why the height of the security zone in the figure is 554 is not 603 is that the wechat ios version will add a navigation bar with a white background when there are historical access records. The height of the navigation bar is 49px, which reduces the safety height area of the page by 49px. Moreover, as long as wechat is authorized to log in, there will be this navigation bar. So this space has to be accounted for.

Transition and animation are suitable for timing

Each page has some transition animations and embellishment animations, so we are faced with the problem of how to choose the animation implementation mode. Which implementation mode should we choose for the effect that transiton and Animation can achieve? It was found in the real development that the animition animation will automatically start after the element is ready, and the transition is difficult to do (js is needed). Therefore, the animation triggered by natural loading is suitable for animation, while the animation triggered by interaction has no significant difference.

Open source library pit:

There are A lot of sequential queue animations in the active page (A —-> animation end —- B —-> animation start), and if they were all done using VUE’s native event binding, it would be too expensive, requiring event handlers to be tied to each animation element, and the development experience would be particularly unfriendly. I know that velocity.js is a great way to animate queues so I brought it in. The initial test of some animations went well. Until after the test, I found that some of the pages of the animation stuck. Error message displayed after adding debugging information:

For example

Transform transparency Velocity($el, { opacity:1 }, { duration:1000 }); The transform Velocity ($el, {
   transform:["translateY(-8rem)', 'translateY(0)"}, {duration:1000});}, {duration:1000});Copy the code

After changing according to the above scheme, I used my mobile phone to test normally (Android, there are foreshadovers here), which was the end. Ps:

  • The official document of velocvelocity. Js is quite different from version 2.0. The document only says that the value of the initial change is added.
  • In addition, versions 2.0 and above no longer support documentation

    This shorthand is not supported on version 2.0, and native transform must be used.

As mentioned above, android test is normal, but the result test student uses ios test, GG still does not move, but there is no error message on the page (I feel more desperate, it is better to have error message). There is no way but to continue debugging, fortunately, the project installed debugging tool Eruda. Finally, by lengthening the animation time and observing the DOM node, it was found that the style of the target animation element did not change at all. Instead, a transform was added to the DOM attribute. The problem was finally found when, on iOS devices, the Transform change was applied to attribute instead of style. Although I found the problem, I didn’t know how to fix it, so I had to go to Github to see how the open source library was written, and finally found this code

var base = document.createElement('div'),
        rxSubtype = /^SVG(.*)Element$/,
        rxElement = /Element$/;
   
    Object.getOwnPropertyNames(window).forEach(function (property) {
        
        var subtype = rxSubtype.exec(property);
        if(subtype && subtype[1] ! = ='SVG') {
            
            // Don't do SVGSVGElement. try { var element = subtype[1] ? document.createElementNS('http://www.w3.org/2000/svg', (subtype[1] || 'svg').toLowerCase()) : document.createElement('svg'); // tslint:disable-next-line:forin for (var attribute in element) { // Although this isn't a tween without prototypes, we do
                    // want to get hold of all attributes and not just own ones.
                    var value = element[attribute];
                    if(isString(attribute) && ! (attribute[0] ==='o' && attribute[1] === 'n') && attribute ! == attribute.toUpperCase() && ! rxElement.test(attribute) && ! (attributeinbase) && ! isFunction(value)) { // TODO: Should this all beset on the generic SVGElement, it would save space and time, but not as powerful
                        
                        registerNormalization([property, attribute, getAttribute(attribute)]);
                    }
                }
            } catch (e) {
                console.error('VelocityJS: Error when trying to identify SVG attributes on ' + property + '. ', e); }}});Copy the code

For some reason, this logic was applied to normal elements on ios. The logic was commented out (because I don’t have SVG elements on my page either) and ios worked fine, but I still don’t know exactly what the condition was. This application is wrong (mainly because it uses a lot of JS bit calculation, I feel pain in my head and don’t want to see it), but I still put forward an issue to the author to see if he will confirm this problem.

Wechat JSSDK & Vue-Router History mode mixing pit

I made a dozen page.vue’s because I wanted to use the transition widget’s ability to animate pages.

  • Ios environment, after applying for JSSDK, it was found that it did not take effect, debugging found that because the previous several pages are automatically jump, leading to JSSDK can not be set successfully, change to JSSDK initialization success before jump. (Avoid the pit where ios JSSDK permission must be applied for first time by entering url)
  • After ios was normal, I tested two Android phones (Xiaomi and Huawei), so as to solve the problem —- In the afternoon, students gave feedback that OPPO and one of Huawei’s custom sharing failed. The final test found that android wechat used the custom sharing JSSDK function for history mode, and there were differences in the table above for different models. Some phones support setting on the entry page (Xiaomi), while others require reapplying for each page (Huawei and OPPO). In the final test, the application was re-launched on every page, which was supported by Android phones, and the sharing content was re-set every time you entered the page.
  • Registering every page will cause every ios page to wait for the JSSDK initialization success before continuing to jump. Finally, the compromise solution is that ios only set JSSDK on the entry page, android set JSSDK on every page.
  • I thought this was the end, but it turned out that there was no problem with the ios custom sharing content title, sub-title and picture, but the link was not the one I set (the activity entry page, with a bunch of transfer page logic), but the link of the current page. In order to fix this problem, I even modified the code of the introduced wechat JSSDK. Invalid to write parameter URL to target page address ——–. Can not change the behavior of wechat, can only change yourself!! Routes and pages are logically processed as follows:
Home adds an identity to the active entry pageexport default {
    beforeCreate() {
        window.entryFlag = true; }}; Add router code to routes. beforeEach((to, from, next) => {if(to.name ! = ='home' && !window.entryFlag ) next({ name: 'home' });
     else next();
});

Copy the code

BeforeEach must be used. AfterEach cannot be used. This will impact the JSSDK registration if routes are already generated

Image format

There were some small animations in the middle of the page, which were made with GIF at the beginning, but the designer student thought the white edge of GIF was unacceptable, and it was too much work to cut Sprite again, so the designer suggested using APNG. I thought APNG would have compatibility problems, but in the final test, I found that both ios and Android supported it, so I changed GIF to APNG. Apng ended up with the.png suffix everywhere, so I had the bold idea of making Sprite images to reduce concurrent requests. However, after making Sprite, I found that the animation effect was lost. At first I thought I lost the animation information when COMPOSiting Sprite, so I tried switching the original APNG image to the background to see how it looked, but it didn’t work. Change the img tag to cut normal. Summary: ApNG images are currently supported by ios and Android, but can only be used as the foreground image img tag, not the background image, otherwise it will lose animation effect, so it will not be able to make Sprite image.

Ios music pit

Although ios does not support automatic music playback, there is a time when a music playback can be triggered in the wechat browser environment

document.addEventListener('WeixinJSBridgeReady', () => {
        document.getElementById('music1').play();
    });
Copy the code

However, there are originally two music on the page, one foreground sound and one background sound. In the ios environment, the foreground sound and background sound can only be combined into one sound source (it should also be noted that the sound can only be played when entering the page. If it is to achieve the synchronization of sound and picture, there is no need for interaction and cannot be played automatically). Ps: Android supports multiple audio tags for automatic playback, unlimited.

Ios recognizes small program code and qr code pit

In the ios environment of Vue-Rotuer History mode, the page automatically jumps, which will lead to the failure of the small program or two-dimensional code on the page after the jump to evoke the long-press recognition function. We tried various solutions in the community:

  • Two-dimensional code size problem —- size change (invalid)
  • Blog.souche.com/ios-wei-xin… —- the demo he wrote worked, but it didn’t work for my project, and he broke the JSSDK sharing.
  • Change to hash mode —- to solve the problem, and finally choose to change to hash mode to solve the problem, originally thought it would be expensive, but later found that the cost of converting the history mode to hash mode is not high, because of the problem of nginx Settings, The previous links can continue to be used and changed to Hash mode, which also solved the previous JSSDK sharing problem for each platform of history mode. It no longer needs to be initialized by platform, and sharing links is correct.

In short, although the Hash mode is not pretty, the wechat support is good, and the wechat support of the History mode is really unbearable!

The above is the pit record of my project, and the key points are summarized:

  • Content security zone should be planned in advance for page design to facilitate subsequent page compatibility
  • Animation is a good way to use animation when the element is loaded automatically.
  • Velocityjs has a glitch in ios regarding transform changes
  • JSSDK sharing god pit in vue-router history mode, it is recommended that interactive jump (such as click) automatic jump need to wait for initialization completion, Android needs to initialize every page.
  • Apng images need to be used as foreground images to be animated, not background images.
  • It is not recommended to set automatic music playing on ios. You are advised to reserve interactive triggers in advance
  • In history mode, ios will lose the ability to recognize small program codes and qr codes.
  • Switching from the history mode to the hash mode is inexpensive

If you are interested, you can scan the code on wechat and play by yourself: