简体   繁体   中英

Polymer 2 and Cordova

I'm trying to create a hybrid app using Polymer 2.0. I've used polymer-2-application and polymer-2-starter-kit sample and it was working when it is tested on safari browser.

Safari浏览器

But when I run it on iOS simulator the Polymer element did not display.

在此输入图像描述

Here's my sample index.html

 <!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <link rel="stylesheet" type="text/css" href="css/index.css"> <meta name="description" content="TestPolymer-2 description"> <link rel="manifest" href="/manifest.json"> <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="src/test-element/test-element.html"> <title>Hello World</title> </head> <body> <div class="app"> <test-element></test-element> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> 

The problem is the Polymer 2 HTML Imports don't work on iOS < 10.3. To make it work you need a Polyfill .

See the Polymer 2 support chart.

Also, Polymer 2 uses ES6, which is only supported on iOS 10+, to use it on iOS 9 you have to compile your application to ES5 .

But with iOS 10 having 86%, I would recommend to just ditch iOS 9 and only support iOS 10 in your app.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM