Bayangkan kuasa aplikasi Chrome yang tersedia pada telefon pintar anda. Kami kini boleh menjalankan aplikasi Chrome kegemaran kami di Android dan iOS menggunakan set alat berdasarkan Apache Cordova.
Cordova adalah kerangka sumber terbuka untuk aplikasi mudah alih pembungkusan menggunakan HTML, CSS dan JavaScript. Cordova membungkus aplikasi web HTML, CSS dan JavaScript menggunakan shell asli dan membolehkan pengedaran di Google Play, Apple App Store dan kedai -kedai lain.
Gambaran Keseluruhan
Membuat aplikasi Chrome
Kod sumber dari tutorial ini boleh didapati di GitHub.
Buat folder projek yang dipanggil Twitterchromeapp. Di dalam folder Projek Buat fail manifest yang dipanggil manifest.json yang akan menjadi fail konfigurasi untuk aplikasi kami. Di dalam manifest.json kami akan menentukan beberapa tetapan yang diperlukan oleh aplikasi Chrome. Aplikasi Chrome memerlukan manifest_version menjadi 2. Kami juga akan menentukan nama aplikasinya, versi dan laluan ke skrip latar untuk dilaksanakan pada melancarkan aplikasi. Kami akan mengambil tweet dari URL perkhidmatan luaran, jadi kami juga akan menyatakan bahawa di dalam fail ini. Inilah cara manifest.json harus melihat:
<span>{
</span> <span>"manifest_version": 2,
</span> <span>"name": "Tweet Chrome App",
</span> <span>"version": "1.0",
</span> <span>"app": {
</span> <span>"background": {
</span> <span>"scripts": ["scripts/main.js"]
</span> <span>}
</span> <span>},
</span> <span>"permissions": [
</span> <span>"http://twittersearchapi.herokuapp.com/search"
</span> <span>]
</span><span>}</span>Di dalam folder projek twitterchromeapp, buat folder lain yang dipanggil skrip dan di dalamnya membuat skrip latar belakang yang dipanggil main.js. Tambahkan kod berikut ke main.js:
<span>{
</span> <span>"manifest_version": 2,
</span> <span>"name": "Tweet Chrome App",
</span> <span>"version": "1.0",
</span> <span>"app": {
</span> <span>"background": {
</span> <span>"scripts": ["scripts/main.js"]
</span> <span>}
</span> <span>},
</span> <span>"permissions": [
</span> <span>"http://twittersearchapi.herokuapp.com/search"
</span> <span>]
</span><span>}</span>Di dalam acara Onlaunched kami akan membuat janda untuk aplikasi Chrome kami. Tambahkan kod berikut ke main.js:
chrome<span>.app.runtime.onLaunched.addListener(function() {
</span> <span>// creating window for app code will be here
</span><span>});</span>Dalam kod di atas, kami telah menggunakan objek skrin untuk mendapatkan lebar dan ketinggian skrin yang tersedia. Berdasarkan lebar sebenar skrin, kami menetapkan batas luar tetingkap krom baru untuk dipaparkan dengan betul.
chrome.app.window.create mencipta tetingkap baru menggunakan HTML di dalam indeks fail.html.
Di dalam folder projek Twitterchromeapp Buat fail baru yang dipanggil index.html seperti yang ditunjukkan di bawah:
chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
<span>var screenWidth = screen.availWidth;
</span> <span>var screenHeight = screen.availHeight;
</span> <span>var width = 500;
</span> <span>var height = 300;
</span>
chrome<span>.app.window.create('index.html', {
</span> <span>id: "tweetAppID",
</span> <span>outerBounds: {
</span> <span>width: width,
</span> <span>height: height,
</span> <span>left: Math.round((screenWidth - width) / 2),
</span> <span>top: Math.round((screenHeight - height) / 2)
</span> <span>}
</span> <span>});
</span><span>});</span>Sekarang cuba pasang aplikasi Chrome dalam penyemak imbas Chrome anda. Terbuka ke Alat -> Sambungan (mungkin lebih banyak alat ). Dayakan mod pemaju dari kotak semak di sebelah kanan atas dan kemudian klik pada Load Unpacked Extension dan pilih folder Projek.
Jalankan lanjutan sama ada melalui tetingkap Apps atau
Seterusnya, kami akan membuat Panggilan Ajax yang dicetuskan apabila tetingkap melancarkan yang mengambil tweet dari URL perkhidmatan. Kami akan menggunakan perkhidmatan yang dihoskan di Heroku. Perkhidmatan ini mempunyai beberapa batasan. Ia hanya mengambil tweet dengan hashtag Perkytweets , ini cukup untuk contoh kami. kami akan menggunakan jQuery untuk membuat panggilan Ajax kami, jadi muat turun ke folder skrip dan masukkannya dalam index.html, contohnya:
Sekarang buat fail baru yang dipanggil script.js dalam folder skrip dan buat panggilan ajax seperti yang ditunjukkan:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Chrome Tweet App<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Tweets !!<span><span></h1</span>></span> </span> <span><span><span></body</span>></span> </span> <span><span><span></html</span>></span></span>
termasuk script.js dalam index.html:
<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></script</span>></span></span>
Sekarang buka
<span>$(function() {
</span> $<span>.ajax({
</span> <span>type: 'GET',
</span> <span>url: 'http://twittersearchapi.herokuapp.com/search',
</span> <span>success: function(response) {
</span> <span>var resObj = JSON.parse(response);
</span> <span>console.log(resObj);
</span> <span>},
</span> <span>error: function(error) {
</span> <span>console.log(error);
</span> <span>}
</span> <span>});
</span><span>});</span>(atau lebih banyak alat ) dan klik Reload untuk mencerminkan perubahan. Klik seterusnya pada aplikasi untuk melancarkannya semula. Jika anda menyemak Konsol Chrome (hanya konsol biasa yang anda akses di Chrome), ia harus menunjukkan respons dari url perkhidmatan. Seterusnya, kami akan memaparkan respons dalam index.html. Kami akan menggunakan bootstrap untuk menggayakan halaman.
Buat folder Styles di dalam folder projek anda dan muat turun fail CSS Bootstrap ke dalam folder. Sertakan fail CSS Bootstrap di index.html.
Sertakan elemen UL dalam index.html untuk memaparkan tweet. Inilah caranya index.html harus melihat sekarang:
<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/script.js"</span>></span><span><span></script</span>></span></span>
Di dalam Ajax Success Call kembali dalam skrip.js termasuk kod berikut untuk menambahkan item yang diambil dari panggilan perkhidmatan ke UL dalam index.html.
<span><span><span><link</span> href<span>="styles/bootstrap.min.css"</span> rel<span>="stylesheet"</span>></span></span>
Muat semula dan peluncurkan aplikasinya dan anda sepatutnya dapat melihat skrin yang penuh dengan tweet.
Oleh kerana kami akan menjalankan aplikasi kami di Android, pastikan anda mempunyai Java JDK 7 atau lebih tinggi, Android SDK 4.4.2 atau lebih tinggi dan Apache Ant dipasang pada sistem anda.
Kami juga memerlukan alat baris perintah CCA. Anda boleh memasangnya menggunakan
<span>{
</span> <span>"manifest_version": 2,
</span> <span>"name": "Tweet Chrome App",
</span> <span>"version": "1.0",
</span> <span>"app": {
</span> <span>"background": {
</span> <span>"scripts": ["scripts/main.js"]
</span> <span>}
</span> <span>},
</span> <span>"permissions": [
</span> <span>"http://twittersearchapi.herokuapp.com/search"
</span> <span>]
</span><span>}</span>Maklumat terperinci mengenai penyediaan persekitaran anda untuk memindahkan aplikasi Chrome ke Android dan iOS boleh didapati dalam dokumen rasmi.
Setelah menubuhkan persekitaran kami selesai, kami akan membuat projek baru dari Twitterchromeapp sedia ada kami ke pelabuhan ke Android. Jalankan arahan berikut untuk membuat projek:
chrome<span>.app.runtime.onLaunched.addListener(function() {
</span> <span>// creating window for app code will be here
</span><span>});</span>
chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
<span>var screenWidth = screen.availWidth;
</span> <span>var screenHeight = screen.availHeight;
</span> <span>var width = 500;
</span> <span>var height = 300;
</span>
chrome<span>.app.window.create('index.html', {
</span> <span>id: "tweetAppID",
</span> <span>outerBounds: {
</span> <span>width: width,
</span> <span>height: height,
</span> <span>left: Math.round((screenWidth - width) / 2),
</span> <span>top: Math.round((screenHeight - height) / 2)
</span> <span>}
</span> <span>});
</span><span>});</span>Kesimpulan
Apa pendapat anda mengenai pilihan aplikasi Chrome ini untuk membuat aplikasi mudah alih? Adakah ia menawarkan sebarang kelebihan hanya menggunakan aplikasi web HTML, CSS dan JavaScript standard di dalam Cordova?
Soalan Lazim (Soalan Lazim) Mengenai Running Chrome Apps pada Peranti Mudah Alih Menggunakan Cordova
Apakah prasyarat untuk menjalankan aplikasi Chrome pada peranti mudah alih menggunakan Cordova? Peranti Menggunakan Cordova, anda perlu memasang yang berikut pada sistem anda: Node.js, Cordova, Apps Chrome untuk Toolchain Mudah Alih, dan Android SDK atau iOS SDK Bergantung pada platform yang anda target Dengan arahan CREATE dan nama projek anda. Sebagai contoh, CCA membuat myProject. Ini akan mewujudkan projek Cordova baru dalam direktori yang dinamakan myProject.
Tambah arahan diikuti dengan nama platform. Sebagai contoh, platform Cordova menambah Android akan menambah platform Android ke projek anda. diikuti dengan nama platform. Sebagai contoh, Cordova membina Android akan membina projek anda untuk platform Android.
Bagaimana saya boleh debug projek Cordova saya? Untuk melakukan ini, anda perlu menavigasi ke Chrome: // Periksa dalam pelayar Chrome anda dan klik pada pautan semak di bawah peranti anda. 🎜>
Walaupun Cordova membolehkan anda menjalankan aplikasi Chrome pada peranti mudah alih, terdapat beberapa batasan. Sebagai contoh, tidak semua API Chrome disokong, dan mungkin terdapat perbezaan tingkah laku antara aplikasi Chrome dan aplikasi Cordova kerana perbezaan dalam platform yang mendasari. 🎜>Atas ialah kandungan terperinci Menjalankan aplikasi krom pada peranti mudah alih menggunakan cordova. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
tetapan pembolehubah persekitaran java
Bagaimana untuk memadam halaman kosong dalam word
Bagaimana untuk membuka fail html WeChat
Cara menggunakan spyder
Apakah yang dimaksudkan dengan menulis dalam python?
Penyelesaian tamat masa permintaan pelayan
Bolehkah saya mendapatkan semula video pendek Douyin yang dipadamkan?
Apakah perisian yang terbuka?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
