위 코드에서는 화면 객체를 사용하여 사용 가능한 화면 너비와 높이를 얻었습니다. 화면의 실제 너비를 기준으로 새 크롬 창의 외부 경계를 올바르게 표시하도록 설정합니다.
<app> chrome.app.window.create는 파일 index.html 내부의 HTML을 사용하여 새 창을 만듭니다.
<fol> 프로젝트 폴더 내부 TwitterChromeApp 아래와 같이 index.html이라는 새 파일을 만듭니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<install> 이제 Chrome 브라우저에 Chrome 앱을 설치하십시오. <tools> 도구 -> 확장자 (아마도 <p>)로 열립니다. 오른쪽 상단의 확인란에서 개발자 모드를 활성화 한 다음 </p>를 포장되지 않은 확장자로드하고 프로젝트 폴더를 선택하십시오. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">chrome<span>.app.runtime.onLaunched.addListener(function() {
</span> <span>// creating window for app code will be here
</span><span>});</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<ension>는 또는 확장을 통해 확장을 실행하면 다음을 볼 수 있습니다.
<p>
<ll> 다음, 우리는 서비스 URL에서 트윗을 검색하는 창을 시작할 때 트리거되는 Ajax 호출을 만들 것입니다. 우리는 Heroku에서 호스팅 된 서비스를 사용할 것입니다. 서비스에는 몇 가지 제한 사항이 있습니다. 해시 태그 </ll></p> perkytweets 로만 트윗 만 가져옵니다. 이것은 우리의 예에 충분합니다. .
<j> 우리는 jQuery를 사용하여 ajax를 호출 할 것이므로 스크립트 폴더로 다운로드하여 index.html에 포함하십시오.
<p>
<new> 이제 Scripts 폴더에서 script.js라는 새 파일을 만들고 그림과 같이 Ajax 호출을 만듭니다.
</new></p>
<.> index.html에 script.js를 포함시킵니다
<p>
</p> 이제 도구 -> 확장 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> (또는 더 많은 도구 )를 열고 reload 를 클릭하여 변경 사항을 반영하십시오. 다음으로 앱을 클릭하여 다시 시작하십시오. Chrome 콘솔 (Chrome에서 액세스하는 일반 콘솔 만)을 확인하면 서비스 URL의 응답이 표시됩니다.
<ll ll> 다음으로, 우리는 index.html에 응답을 표시합니다. 페이지 스타일링에 부트 스트랩을 사용합니다. <p>
<y> 프로젝트 폴더 내부에서 스타일 폴더를 만들고 부트 스트랩 CSS 파일을 폴더로 다운로드하십시오. bootstrap css 파일을 index.html에 포함시킵니다
<em>
<element> index.html에 ul 요소를 포함하여 트윗을 표시합니다. 다음은 index.html이 지금 보는 방법입니다
</element></em>
<j> 내부 Ajax 성공에 대한 Call Back in Scripts.js는 서비스 호출에서 UL에서 가져온 항목을 index.html.
<em>
<rel rel> 앱을 다시로드하고 다시 시작하면 트윗으로 가득 찬 화면을 볼 수 있어야합니다. </rel></em><ome> 안드로이드 용 크롬 앱 생성
<be> 우리는 Android에서 앱을 실행하기 때문에 Java JDK 7 이상, Android SDK 4.4.2 이상 및 Apache Ant가 시스템에 설치되어 있는지 확인하십시오.
<need> CCA 명령 줄 도구도 필요합니다. <it it>를 사용하여 설치할 수 있습니다
<p> 크롬 앱을 Android 및 iOS로 포팅하기위한 환경 설정에 대한 자세한 정보는 공식 문서에서 찾을 수 있습니다.
<our> 환경을 설정하면 기존 Twitterchromeapp에서 Port to Android까지 새로운 프로젝트를 만들 것입니다.
프로젝트를 만들려면 다음 명령을 실행하십시오
</our></p>
<twitter twitter> TwitterapPforandroid로 이동하여 다음 명령을 실행하여 Android 에뮬레이터에서 프로젝트를 실행하십시오.
<p>
<ulator> 에뮬레이터가 성공적으로 시작되면 에뮬레이터 내부에서 앱이 실행되는 것을 볼 수 있습니다.
</ulator></p> 결론
이 튜토리얼에서는 간단한 Chrome 앱을 만들고 Android 플랫폼에 포트하는 방법을 보았습니다. Apache Cordova를 사용하여 모바일 장치에서 Chrome 앱 실행에 대한 자세한 내용은 공무원 문서에서 찾을 수 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<think> 모바일 앱을 만들기위한이 Chrome 앱 옵션에 대해 어떻게 생각하십니까? Cordova 내부의 표준 HTML, CSS 및 JavaScript 웹 앱을 사용하는 것보다 이점을 제공합니까? <p>
<questions> cordova 를 사용하여 모바일 장치에서 크롬 앱 실행에 대한 자주 묻는 질문 (FAQ)
<install> 내 시스템에 cordova를 설치하려면 어떻게해야합니까? </install></questions></p> Cordova를 설치하려면 시스템에 Node.js가 설치되어 있어야합니다. Node.js가 설치되면 터미널 또는 명령 프롬프트에서 NPM Install -G Cordova 명령을 실행하여 NPM (Node Package Manager)을 사용하여 Cordova를 설치할 수 있습니다. -g 플래그는 시스템에 Cordova를 전 세계적으로 설치하는 데 사용됩니다. <p> Cordova를 사용하여 모바일 장치에서 Chrome 앱을 실행하기위한 전제 조건은 무엇입니까? </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">chrome<span>.app.runtime.onLaunched.addListener(function() {
</span> <span>// creating window for app code will be here
</span><span>});</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 모바일에서 Chrome Apps를 실행하기 전에 Cordova를 사용하는 장치에는 Node.js, Cordova, Mobile Toolchain 용 Chrome 앱 및 Android SDK 또는 iOS SDK에 다음과 같은 설치가 필요합니다. 타겟팅하는 플랫폼에 따라 Chrome 앱을 Cordova 프로젝트로 변환하려면 어떻게해야합니까? <p> </p> Chrome 앱을 Cordova 프로젝트로 변환하려면 CCA 명령을 사용하여 CCA 명령을 사용해야합니다. Create 명령과 프로젝트 이름에 따라 예를 들어, CCA는 myProject를 만듭니다. MyProject라는 디렉토리에 새로운 Cordova 프로젝트가 생성됩니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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></pre><div class="contentsignin">로그인 후 복사</div></div> Cordova 프로젝트에 플랫폼을 추가하려면 어떻게해야합니까? <p> Cordova 프로젝트에 플랫폼을 추가하려면 Cordova 플랫폼을 사용해야합니다. 명령을 추가 한 다음 플랫폼 이름을 추가하십시오. 예를 들어, Cordova 플랫폼 추가 Android 추가 프로젝트에 Android 플랫폼을 추가합니다. </p> Cordova 프로젝트를 어떻게 구축 할 수 있습니까? <h2> Cordova 프로젝트를 구축하려면 Cordova 빌드 명령을 사용해야합니다. 플랫폼 이름이 뒤 따릅니다. 예를 들어, Cordova Build Android는 Android 플랫폼을위한 프로젝트를 구축합니다.<run> 장치에서 Cordova 프로젝트를 실행할 수있는 방법은 무엇입니까? <h3> 장치에서 Cordova 프로젝트를 실행하려면 Cordova Run 명령을 사용하고 플랫폼 이름을 사용해야합니다. 예를 들어, Cordova Run Android는 Android 기기에서 프로젝트를 실행합니다. </h3> Cordova 프로젝트를 디버그하는 방법 <p> Cordova 프로젝트를 디버깅하려면 Chrome DevTools를 사용할 수 있습니다. 이렇게하려면 Chrome : // Chrome 브라우저에서 검사를하고 장치 아래의 검사 링크를 클릭해야합니다. </p> <h3> Cordova를 사용하여 모바일 장치에서 Chrome 앱을 실행하는 제한 사항은 무엇입니까? </h3> Chrome 앱에서 Cordova 플러그인을 사용할 수 있습니까? 🎜> <p> 예, Chrome 앱에서 Cordova 플러그인을 사용할 수 있습니다. 이렇게하려면 Cordova 플러그인 추가 명령과 플러그인 이름을 사용하여 프로젝트에 플러그인을 추가해야합니다. </p> Cordova Project를 업데이트하려면 어떻게해야합니까? <h3> </h3> 업데이트하려면 어떻게해야합니까? Cordova Project, Cordova 플랫폼 업데이트 명령과 플랫폼 이름을 사용할 수 있습니다. 예를 들어, Cordova 플랫폼 업데이트 Android는 프로젝트의 Android 플랫폼을 업데이트합니다.</run>
</h2></think></twitter></it></need></be></ome></j></y></p></ll></.></j></ension></tools></install></fol></app>위 내용은 Cordova를 사용하여 모바일 장치에서 크롬 앱을 실행합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
