Hippy跨端开发框架.rar

<div id='custom-homepage'> <div><img alt="logo" data-origin="_media/hippy-logo.png" src="/_media/hippy-logo.png" style="min-width: 165px;min-height: 165px;max-height: 22vh;max-width: 22vw"></div> <div class="custom-homepage-container"> <h1 id="hippy"> <a class="anchor" data-id="hippy" href="#/?id=hippy"> <span>Hippy</span> </a> </h1> <div class="sub-title"><span>Cross-Platform Framework for Developers</span></div> <a href="https://github.com/Tencent/Hippy/stargazers" rel="noopener" target="_blank"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Tencent/Hippy?color=50c52a"></a> <a href="https://github.com/Tencent/Hippy/releases" rel="noopener" target="_blank"> <img alt="GitHub release (latest SemVer)" data-origin="https://img.shields.io/github/v/release/Tencent/Hippy" src="https://img.shields.io/github/v/release/Tencent/Hippy" /> </a> <p class="btn-container"> <a href="//github.com/Tencent/Hippy" rel="noopener" target="_blank">GitHub</a> <a href="#/guide/integration">Get Started</a> </p> </div> <div class="features"> <div class="feature"><h2>⚡ High Performance</h2> <p>Reusable ListView with ultimate smoothness experience, efficient data communication via binding mode</p></div> <div class="feature"><h2>📱 Cross Platform</h2> <p>Different platforms maintain the same interface, support smooth migration to Web</p></div> <div class="feature"><h2>📚 Easy to Learn</h2> <p>React / Vue driven framework and full Flex Layout supported.</p></div> </div> </div> <hr> # Hippy overview Hippy is like a simplified browser, which has done a lot of work from the bottom layer, smoothed out the differences between iOS and Android, and provided a development experience close to the Web. At present, the upper layer supports two sets of interface frameworks, React and Vue, through which front-end developers can convert front-end codes into native instructions to develop native apps. At the same time, Hippy has made a lot of optimization from the bottom layer, providing top performance in startup speed, reusable list components, rendering efficiency, animation speed, network communication, etc. ## Feature Comparison Hippy implemented a lot of interfaces according to browser, convenient for developers to use, here are a few Hippy unique features. | Classifications| Properties | Description | Support| | ---- | ------------------------ | ------------------------ | -------- | | Interface| fetch | Http/Https protocol request | ✅ | | | WebSocket | Instant Messaging Based on Http | ✅ | | Events| onClick | Click Event | ✅ | | | onTouchStart/onTouchDown | Triggered when start to touch screen | ✅ | | | onTouchMove | Triggered when move on screen | ✅ | | | onTouchEnd | Triggered when end to touch screen | ✅ | | | onTouchCancel | Triggered when touch screen canceled | ✅ | | Style| zIndex | Layer level | ✅ | | | backgroundImage | Background image | ✅ | ## Package Volume Hippy's package volume is also very competitive in the industry.  The above figure is an empty APK, showing the comparison of package size among different native SDKs.  The above figure shows the comparison of package size of JS bundle with the simplest ListView. ## Rendering Performance Comparison of ListView performance when sliding, Hippy can always maintain a very smooth state. <img src="assets/img/listxingneng.png" alt="Rendering Performance" width="50%"/> ## Memory Consumption In terms of memory consumption, Hippy has a slight advantage when initializing the List, and the difference in memory consumption is getting bigger and bigger after sliding a few screens.  ## Web-like development experience Hippy has also made a lot of optimizations in the development experience, including but not limited to onClick, onTouch series touch screen events like browsers, simpler animation schemes, hippy-vue provides full compatibility with Vue, etc. ## Who Using it <div style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start"> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_11384_1543315194/128" alt="QQ Brower" width="50"/> <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://mb.qq.com/" title="QQ Brower">QQ Browser</a></p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_6633_1603250105/128" width="50" alt="Mobile QQ" /> <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://im.qq.com/mobileqq/" title="Mobile QQ">Mobile QQ</a></p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_5613_1660103898/96" width="50" alt="Tencent News" /> <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://news.qq.com/mobile/" title="Tencent News">Tencent News</a></p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_10966186_1533019715/128" alt="WeSing" width="50" /> <p style="font-size:16px"> <a target="_blank" style="text-decoration:none;color:#34495e" href="https://kg.qq.com/html/contest/kg-intro.html" title="WeSing">WeSing</a> </p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_6259_1533003792/128" width="50" alt="QQ Music" /> <p style="font-size:16px"> <a target="_blank" style="text-decoration:none;color:#34495e" href="https://y.qq.com/download/download.html" title="QQ Music">QQ Music</a> </p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_10237_1659521178/256" width="50" alt="Tencent Map" /> <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://map.qq.com/mobile/index.html" title="Tencent Map">Tencent Map</a></p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_42287337_1659540466/96" width="50" alt="Camps of Kings" /> <p style="font-size:16px"> <a target="_blank" style="text-decoration:none;color:#34495e" href="https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.gamehelper.smoba" title="Camps of Kings">Camps of Kings</a> </p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="//pp.myapp.com/ma_icon/0/icon_54036620_1658836879/96" width="50" alt="shanxian" /> <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://shanxian.qq.com/" title="shanxian">ShanXian</a></p> </span> <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px"> <img src="assets/img/tv.png" width="50" alt="Ten