I’m creating an animation with Hype intended for use on WeChat. WeChat commonly uses H5 pages as advertisements/forwards. I’ve got everything working, but one of the typical things in WeChat is QR codes. Even in mobile H5 pages - a QR code is placed within, and WeChat has a feature to Extract that QR code after a long press (you long press, a popup menu appears, and one option is Extract QR Code).
When I load the H5 page I created in WeChat - and I long press on the QR code - I do not receive a popup menu. My theory (which could be completely wrong) is that this is because Hype puts all its elements as background-image. In the same as when you normally click in a website on an image, you have the option to save that image, the use of background-image prevents that action. Now presumably I could edit the html after the fact - but I was wondering if there is something simpler I’m missing in Hype in regards to this.
The page is here for if interested, but the content is in Chinese :
Great - thanks so much! That worked - in Hype I simply edited the HTML of the image element as you suggested with an image source, and put it in top most position. It was recognised in WeChat as a QR code.
Just an update here for those who are interested. We launched the H5 campaign above and received a good response. I think Hype is a great tool for it. We created two pages, one in English and one in Chinese. The English one is here for those interested to see how it works. http://content.lincko.com/MakeStuffHappen.html. They are designed only for display on mobile, as that’s the primary interface for WeChat. The Chinese one was updated, but remains at the link above.
Editing the html of the element and loading it that way allows for both long press+extract and tap events to be recognised in WeChat. We placed both a tap event on each QR code to go to a link (done in hype). Also the native Extract QR code function of WeChat is allowed to work this way (no special code or events needed for that as long as you are using a QR code image, loaded through html in the element).
Hi! I’m Chinese, and we have used Hype to make H5 for a long time. It’s really an amazing tool for it!! Thanks for your share~ We can discuss a lot later about Hype using in H5 making~!
Enter the html reference to the file (can also specify the size). I am referencing an image that I have uploaded to the web. You can also reference the file internally from your resources folder.
One caveat - for some reason, 微信 uses the first image you reference as the image it shows in the 文章 preview. So you make want to use the same technique above to reference another image first. Even if you modify the header with tags, WeChat seems to use the first referenced image.
You can see examples here - use the inspect/developer tools in your browser to view.
:
Thanks for posting!
