Hype for WeChat - extract QR Code - background-image


#1

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 :slight_smile: :

http://content.lincko.com/CollaboratewithLincko.html

Thanks in advance for anyones thoughts/help.


微信内自动播放背景音乐怎么弄?(已解决)
#2

Yeah that’s probably it. To workaround this, you could create a rectangle and insert it manually, by using code like this:

<img src="http://site.com/image.jpg" width="100" height="100">

That would like be more compatible. Also, make sure that it is the topmost layer in the layer order.


#3

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.

Thanks again!


#4

WeChat? 哥们中国的吗?


#5

我是美国人,但是我工作在中国


#6

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).


(Lydia Lee) #7

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~!


#8

It would be great if we can share good advice on H5s :relaxed: Thanks for posting!


(zealman) #9

你好,能发个微信识别二维码的demo吗?我也遇到这个问题了


#10

可以给你看。但是需要用英文,不好意思。

  1. Place the QR image into the project like normal. (or you can draw a shape the same size.

  2. Double-click the image (or shape) to bring up the option to edit its html.

  1. Click the edit (pencil) icon.

  2. 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.

http://content.lincko.com/AgileTraining.html
http://content.lincko.com/CollaboratewithLincko.html

如果你还是有问题,可以问我, 也可以用微信交流。


(zealman) #11

谢谢你这么细心耐心的写了步骤,我发现当场景尺寸是375X667的时候的确可以,但是我的场景是640X1008的就不行了


(kaiwiaho) #12

Jim的方法並不是非常通用,在遇到androd或者是ipad的情況會出現無法識別的情況,我的做法是再弄一個二維碼透明度降到0(這一層用Jim的方法做),覆蓋在上面,成功率會比較高。


(zealman) #13

非常感谢哈,你这个方法确实有效,但就是屏幕下半个区域不能再做点击类的东西了。