{"id":598,"date":"2016-09-02T13:41:48","date_gmt":"2016-09-02T05:41:48","guid":{"rendered":"http:\/\/blog.nami.idv.tw\/?p=598"},"modified":"2019-07-11T18:39:35","modified_gmt":"2019-07-11T10:39:35","slug":"%e6%8a%8a-cordova-webview-%e5%b5%8c%e5%85%a5-android-native-app","status":"publish","type":"post","link":"https:\/\/blog.nami.idv.tw\/?p=598","title":{"rendered":"\u628a Cordova Webview \u5d4c\u5165 Android Native App"},"content":{"rendered":"<h1>Steps:<\/h1>\n<h2>1. \u628a Requirements \u90fd\u4e0b\u8f09\u5b89\u88dd\u597d<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.android.com\/studio\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Android Studio<\/a><\/li>\n<li><a href=\"http:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">node.js<\/a><\/li>\n<li><a href=\"http:\/\/cordova.apache.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apache Cordova<\/a><\/li>\n<li><a href=\"http:\/\/ant.apache.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apache Ant<\/a><\/li>\n<\/ul>\n<h2>2. \u5efa\u7acb Cordova Android Project<\/h2>\n<p>\u5982\u679c Cordova projects \u653e\u7f6e\u7684\u4f4d\u7f6e\u8207 Android App projects \u662f\u4e0d\u540c\u7684\u76ee\u9304\u7684\u8a71\uff0ctest_cordova \u53ef\u4ee5\u6539\u6210\u8207 android app project \u76f8\u540c\u540d\u7a31\uff0c\u9019\u6a23\u6703\u6bd4\u8f03\u597d\u77e5\u9053 cordova project \u662f\u5c0d\u61c9\u5230\u54ea\u500b android project\uff0c\u6b64\u5916 com.example.hello \u4e5f\u53ef\u4ee5\u6539\u6210\u8ddf android app \u4e00\u6a23\u3002<\/p>\n<pre class=\"brush: plain; ruler: true;\">cordova create test_cordova com.example.hello HelloWorld\ncordova platform add android\ncordova build<\/pre>\n<p>\u5728 build \u4e4b\u524d\u53ef\u4ee5\u8996\u60c5\u6cc1\u52a0\u5165\u9700\u8981\u7684 plugins\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre class=\"brush: plain; ruler: true;\">cordova plugin add cordova-plugin-device\ncordova plugin add cordova-plugin-x-toast<\/pre>\n<h2>3. \u5efa\u7acb Android App Project<\/h2>\n<p>\u7528\u9810\u8a2d\u7684\u5373\u53ef\uff0c\u6709\u4e00\u500b Empty Activity (MainActivity)\u3002<\/p>\n<h2>4. \u5b89\u88dd Cordova Project \u74b0\u5883\u5230 Android Project<\/h2>\n<h3>Compile Cordova Lib<\/h3>\n<p>\u53c3\u8003 <a href=\"https:\/\/cordova.apache.org\/docs\/en\/latest\/guide\/platforms\/android\/webview.html\" target=\"_blank\" rel=\"noopener noreferrer\">Android WebViews - Apache Cordova<\/a> \u6b65\u9a5f 1~3\uff0c\u628a cordova-x.x.x.jar \u8907\u88fd\u5230 \/libs \u4e4b\u5f8c\uff0c\u7de8\u8f2f app\/build.gradle\uff0c\u52a0\u4e0a:<\/p>\n<pre class=\"brush: plain; ruler: true;\">compile files('libs\/cordova-x.x.x.jar')<\/pre>\n<p>Example:<\/p>\n<pre class=\"brush: plain; ruler: true;\">dependencies {\n\tcompile fileTree(include: ['*.jar'], dir: 'libs')\n\ttestCompile 'junit:junit:4.12'\n\tcompile 'com.android.support:appcompat-v7:23.4.0'\n\tcompile files('libs\/cordova-5.2.2.jar')\n}<\/pre>\n<h3>\u8907\u88fd\u4f9d\u5b58\u6a94\u6848 (\u5de6\u908a\u662f Cordova project \u7684 path\uff0c\u53f3\u908a\u662f Android project \u7684 path)<\/h3>\n<h4>www folder<\/h4>\n<pre class=\"brush: plain; ruler: true;\">platforms\/android\/assets\/www -&gt; src\/main\/assets\/www<\/pre>\n<h4>plugins (com\/example\/hello \u4ee5\u5916\u7684\u76ee\u9304\uff0c\u5b89\u88dd plugins \u591a\u51fa\u4f86\u7684\u90a3\u4e9b)<\/h4>\n<pre class=\"brush: plain; ruler: true;\">platforms\/android\/src\/plugin_folder -&gt; src\/main\/java\/<\/pre>\n<h4>config.xml<\/h4>\n<pre class=\"brush: plain; ruler: true;\">platforms\/android\/res\/xml\/config.xml -&gt; src\/main\/res\/xml\/<\/pre>\n<p>\u7136\u5f8c sync \u4e00\u4e0b Gradle \u60c5\u5831\u3002<\/p>\n<h2>5. \u5efa\u7acb\u57fa\u672c\u904b\u4f5c Activity<\/h2>\n<p>\u628a Cordova Webview \u5d4c\u5165 Android Native App \u7684\u57fa\u672c\u4f5c\u696d\u5230\u7b2c\u56db\u6b65\u9a5f\u5c31\u5b8c\u6210\u4e86\uff0c\u63a5\u4e0b\u4f86\u53ef\u4ee5\u5efa\u7acb\u57fa\u672c\u904b\u4f5c\u7684 Activity\uff0c\u4f86\u6e2c\u8a66\u770b\u770b\u662f\u4e0d\u662f\u6b63\u5e38\u904b\u4f5c\u3002<\/p>\n<p>\u5efa\u7acb\u4ee5\u4e0b\u5169\u500b Empty Activity: TestCordovaActivity, TestCordovaWithLayoutActivity\uff0c\u7136\u5f8c\u7de8\u8f2f java \u53ca layout \u5982\u4e0b\uff1a<\/p>\n<h3>TestCordovaActivity<\/h3>\n<pre class=\"brush: java; ruler: true;\">public class TestCordovaActivity extends CordovaActivity {\n\t@Override\n\tpublic void onCreate(Bundle savedInstanceState) {\n\t\tsuper.onCreate(savedInstanceState);\n\t\tsuper.init();\n\t\t\/\/ Load your application\n\t\tlaunchUrl = \"file:\/\/\/android_asset\/www\/index.html\";\n\t\tloadUrl(launchUrl);\n\t}\n}\n\n@Override\npublic void onDestroy() {\n\tViewGroup viewGroup = (ViewGroup)this.findViewById(android.R.id.content);\n\tSystemWebView webView = (SystemWebView) viewGroup.getChildAt(0);\n\tviewGroup.removeView(webView);\n\twebView.removeAllViews();\n\tsuper.onDestroy();\n}<\/pre>\n<h3>TestCordovaWithLayoutActivity<\/h3>\n<pre class=\"brush: java; ruler: true;\">public class TestCordovaWithLayoutActivity extends CordovaActivity {\n\n\t\/** Called when the activity is first created. *\/\n\t@Override\n\tpublic void onCreate(Bundle savedInstanceState) {\n\n\t\tsuper.onCreate(savedInstanceState);\n\t\tsetContentView(R.layout.activity_test_cordova_with_layout);\n\t\tsuper.init();\n\n\t\t\/\/ Load your application\n\t\tlaunchUrl = \"file:\/\/\/android_asset\/www\/index2.html\";\n\t\tloadUrl(launchUrl);\n\n\t}\n\n\t@Override\n\tprotected CordovaWebView makeWebView() {\n\t\tSystemWebView webView = (SystemWebView)findViewById(R.id.cordovaWebView);\n\t\treturn new CordovaWebViewImpl(new SystemWebViewEngine(webView));\n\t}\n\n\t@Override\n\tprotected void createViews() {\n\t\t\/\/ Why are we setting a constant as the ID? This should be investigated\n\t\t\/*\n\t\tappView.getView().setId(100);\n\t\tappView.getView().setLayoutParams(new FrameLayout.LayoutParams(\n\t\t\tViewGroup.LayoutParams.MATCH_PARENT,\n\t\t\tViewGroup.LayoutParams.MATCH_PARENT));\n\t\tsetContentView(appView.getView());\n\t\t*\/\n\n\t\tif (preferences.contains(\"BackgroundColor\")) {\n\t\t\tint backgroundColor = preferences.getInteger(\"BackgroundColor\", Color.BLACK);\n\t\t\t\/\/ Background of activity:\n\t\t\tappView.getView().setBackgroundColor(backgroundColor);\n\t\t}\n\n\t\tappView.getView().requestFocusFromTouch();\n\t}\n\n\t@Override\n\tpublic void onDestroy() {\n\t\tSystemWebView webView = (SystemWebView)findViewById(R.id.cordovaWebView);\n\t\t((ViewGroup)webView.getParent()).removeView(webView);\n\t\twebView.removeAllViews();\n\t\t\/\/ If we called webView.destory(), we will get 'mWebViewCore is null' error.\n\t\t\/\/webView.destroy();\n\t\tsuper.onDestroy();\n\t}\n\n}<\/pre>\n<h3>activity_test_cordova_with_layout.xml<\/h3>\n<pre class=\"brush: xml; ruler: true;\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;RelativeLayout\n\txmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n\txmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n\tandroid:layout_width=\"match_parent\"\n\tandroid:layout_height=\"match_parent\"\n\tandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\n\tandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n\tandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\n\tandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\n\ttools:context=\"com.fandratec.fssfordksh.TestCordovaWithLayoutActivity\"&gt;\n\n\t&lt;TextView\n\t\tandroid:layout_width=\"match_parent\"\n\t\tandroid:layout_height=\"100dp\"\n\t\tandroid:background=\"#FF0000\"\n\t\tandroid:textColor=\"#FFFFFF\"\n\t\tandroid:gravity=\"center\"\n\t\tandroid:text=\"This is native text view\"\n\t\t\/&gt;\n\n\t&lt;org.apache.cordova.engine.SystemWebView\n\t\tandroid:id=\"@+id\/cordovaWebView\"\n\t\tandroid:layout_width=\"match_parent\"\n\t\tandroid:layout_height=\"match_parent\"\n\t\t\/&gt;\n\n&lt;\/RelativeLayout&gt;<\/pre>\n<h3>MainActivity<\/h3>\n<pre class=\"brush: java; ruler: true;\">public class MainActivity extends AppCompatActivity {\n\n\t@Override\n\tprotected void onCreate(Bundle savedInstanceState) {\n\t\tsuper.onCreate(savedInstanceState);\n\t\tsetContentView(R.layout.activity_main);\n\t}\n\n\tpublic void startCordovaActivity(View view) {\n\t\tIntent intent = new Intent(this, TestCordovaActivity.class);\n\t\tstartActivity(intent);\n\t}\n\n\tpublic void startCordovaActivityWithLayout(View view) {\n\t\tIntent intent = new Intent(this, TestCordovaWithLayoutActivity.class);\n\t\tstartActivity(intent);\n\t}\n\n}<\/pre>\n<h3>activity_main.xml<\/h3>\n<pre class=\"brush: xml; ruler: true;\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;RelativeLayout\n\txmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n\txmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n\tandroid:layout_width=\"match_parent\"\n\tandroid:layout_height=\"match_parent\"\n\tandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\n\tandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n\tandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\n\tandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\n\ttools:context=\"com.fandratec.fssfordksh.MainActivity\"&gt;\n\n\t&lt;TextView\n\t\tandroid:layout_width=\"wrap_content\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\tandroid:text=\"Hello World!\"\n\t\tandroid:id=\"@+id\/textView\"\/&gt;\n\n\t&lt;Button\n\t\tandroid:text=\"Start Cordova Activity Without Layout\"\n\t\tandroid:onClick=\"startCordovaActivity\"\n\t\tandroid:layout_width=\"200dp\"\n\t\tandroid:layout_height=\"100dp\"\n\t\tandroid:id=\"@+id\/button\"\n\t\tandroid:layout_below=\"@+id\/textView\"\n\t\tandroid:layout_alignParentStart=\"true\"\/&gt;\n\n\t&lt;Button\n\t\tandroid:text=\"Start Cordova Activity With Layout\"\n\t\tandroid:onClick=\"startCordovaActivityWithLayout\"\n\t\tandroid:layout_width=\"200dp\"\n\t\tandroid:layout_height=\"100dp\"\n\t\tandroid:layout_below=\"@+id\/button\"\n\t\tandroid:layout_alignParentStart=\"true\"\/&gt;\n\n&lt;\/RelativeLayout&gt;<\/pre>\n<p>\u4ee5\u4e0a\u90fd\u5f04\u597d\u5f8c\uff0c\u5c31\u53ef\u4ee5 run \u4e86\u3002<\/p>\n<h2>6. \u5ef6\u4f38<\/h2>\n<p>\u5982\u679c\u9019\u500b Android App \u8981\u9023\u7dda\u5230 Internet \u6216\u662f\u53d6\u5f97 GPS \u5ea7\u6a19\uff0c\u8a18\u5f97\u5728 AndroidManifest.xml \u52a0\u5165\u6b0a\u9650\u9700\u6c42\u5ba3\u544a\uff0c\u5982\u679c\u6c92\u52a0\u4e0a\u7684\u8a71\u6703\u51fa\u73fe\u932f\u8aa4\u3002\uff08\u4f8b\u5982 loadUrl(REMOTE_URL) \u5c31\u6703\u76f4\u63a5\u7372\u5f97 \"Application \u932f\u8aa4\"\uff09<\/p>\n<pre class=\"brush: xml; ruler: true;\">&lt;manifest&gt;\n\t&lt;uses-permission android:name=\"android.permission.INTERNET\" \/&gt;\n\t&lt;uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" \/&gt;\n\t&lt;uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" \/&gt;\n&lt;\/manifest&gt;<\/pre>\n<p>\u53e6\u5916\uff0c\u73fe\u5728\u7248\u672c\u7684 Cordova project \u9810\u8a2d\u555f\u7528 <a href=\"https:\/\/github.com\/apache\/cordova-plugin-whitelist\/blob\/master\/README.md#content-security-policy\" target=\"_blank\" rel=\"noopener noreferrer\">whitelist<\/a> \u6a5f\u5236\uff0c\u60f3\u5f9e CordovaWebView \u9023\u5230local (\/assets\/www) \u5916\u7684\u5167\u5bb9\u4e26\u5728\u5176\u4e2d\u5448\u73fe\uff0c\u5f97\u5728 config.xml \u52a0\u4e0a\u8a2d\u5b9a\uff0c\u8981\u4e0d\u7136\u6703\u53e6\u5916\u547c\u53eb\u9810\u8a2d\u700f\u89bd\u5668\uff1a<\/p>\n<pre class=\"brush: xml; ruler: true;\">&lt;widget&gt;\n\t&lt;allow-navigation href=\"https:\/\/YOUR.SITE\/*\" \/&gt;\n&lt;\/widget&gt;\n<\/pre>\n<h1>References:<\/h1>\n<ul>\n<li><a href=\"http:\/\/www.catharinegeek.com\/embed-cordova-webview-in-android-native-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.catharinegeek.com\/embed-cordova-webview-in-android-native-app\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Steps: 1. \u628a Requirements \u90fd\u4e0b\u8f09\u5b89\u88dd\u597d Android  &hellip; <a href=\"https:\/\/blog.nami.idv.tw\/?p=598\">\u95b1\u8b80\u5168\u6587 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[33],"tags":[4],"class_list":["post-598","post","type-post","status-publish","format-standard","hentry","category-develop","tag-android"],"_links":{"self":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=598"}],"version-history":[{"count":24,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/598\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/598\/revisions\/706"}],"wp:attachment":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}