{"id":10784,"date":"2024-03-14T12:47:59","date_gmt":"2024-03-14T12:47:59","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/"},"modified":"2025-08-04T03:54:33","modified_gmt":"2025-08-04T03:54:33","slug":"how-to-invoke-native-pages-through-uniapp","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/","title":{"rendered":"Uniapp Native Page Guide"},"content":{"rendered":"<p>In Uniapp, you can use the uni.navigateToNative method to open a native page. The specific steps are as follows:<\/p>\n<ol>\n<li>Configure the paths and parameters of native pages in the pages.json file of a Uniapp project.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-punctuation\">{<\/span>\r\n  <span class=\"hljs-attr\">\"pages\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">[<\/span>\r\n    <span class=\"hljs-comment\">\/\/ \u5176\u4ed6\u9875\u9762\u914d\u7f6e<\/span>\r\n    <span class=\"hljs-punctuation\">{<\/span>\r\n      <span class=\"hljs-attr\">\"path\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"pages\/nativePage\"<\/span><span class=\"hljs-punctuation\">,<\/span>\r\n      <span class=\"hljs-attr\">\"style\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\r\n        <span class=\"hljs-attr\">\"app-plus\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\r\n          <span class=\"hljs-attr\">\"titleNView\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\r\n            <span class=\"hljs-attr\">\"titleText\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"\u539f\u751f\u9875\u9762\"<\/span>\r\n          <span class=\"hljs-punctuation\">}<\/span>\r\n        <span class=\"hljs-punctuation\">}<\/span>\r\n      <span class=\"hljs-punctuation\">}<\/span>\r\n    <span class=\"hljs-punctuation\">}<\/span>\r\n  <span class=\"hljs-punctuation\">]<\/span>\r\n<span class=\"hljs-punctuation\">}<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>Call the uni.navigateToNative method where you need to invoke the native page.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code>uni.<span class=\"hljs-title function_\">navigateToNative<\/span>({\r\n  <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'pages\/nativePage'<\/span>,\r\n  <span class=\"hljs-attr\">params<\/span>: {\r\n    <span class=\"hljs-comment\">\/\/ \u4f20\u9012\u7ed9\u539f\u751f\u9875\u9762\u7684\u53c2\u6570<\/span>\r\n  },\r\n  <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">res<\/span>) =&gt;<\/span> {\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(res)\r\n  },\r\n  <span class=\"hljs-attr\">fail<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">err<\/span>) =&gt;<\/span> {\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">error<\/span>(err)\r\n  }\r\n})\r\n<\/code><\/pre>\n<ol>\n<li>Receive and handle parameters on the native page.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-type\">Intent<\/span> <span class=\"hljs-variable\">intent<\/span> <span class=\"hljs-operator\">=<\/span> getActivity().getIntent();\r\n<span class=\"hljs-type\">String<\/span> <span class=\"hljs-variable\">param1<\/span> <span class=\"hljs-operator\">=<\/span> intent.getStringExtra(<span class=\"hljs-string\">\"param1\"<\/span>);\r\n<span class=\"hljs-type\">String<\/span> <span class=\"hljs-variable\">param2<\/span> <span class=\"hljs-operator\">=<\/span> intent.getStringExtra(<span class=\"hljs-string\">\"param2\"<\/span>);\r\n<span class=\"hljs-comment\">\/\/ \u5904\u7406\u53c2\u6570<\/span>\r\n<\/code><\/pre>\n<p>By following the steps above, you can successfully invoke a native page in Uniapp and pass parameters. It is important to note that the functionality of invoking native pages can only be used on the app side, not on the H5 side.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Uniapp, you can use the uni.navigateToNative method to open a native page. The specific steps are as follows: Configure the paths and parameters of native pages in the pages.json file of a Uniapp project. { &#8220;pages&#8221;: [ \/\/ \u5176\u4ed6\u9875\u9762\u914d\u7f6e { &#8220;path&#8221;: &#8220;pages\/nativePage&#8221;, &#8220;style&#8221;: { &#8220;app-plus&#8221;: { &#8220;titleNView&#8221;: { &#8220;titleText&#8221;: &#8220;\u539f\u751f\u9875\u9762&#8221; } } } } [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[13630,2268,269,13629,1873],"class_list":["post-10784","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-app-integration","tag-cross-platform","tag-mobile-development","tag-native-page","tag-uniapp"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Uniapp Native Page Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to invoke native pages in Uniapp using uni.navigateToNative with step-by-step configuration.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uniapp Native Page Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to invoke native pages in Uniapp using uni.navigateToNative with step-by-step configuration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T12:47:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T03:54:33+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"Uniapp Native Page Guide\",\"datePublished\":\"2024-03-14T12:47:59+00:00\",\"dateModified\":\"2025-08-04T03:54:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\"},\"wordCount\":104,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"App Integration\",\"Cross-platform\",\"Mobile development\",\"Native Page\",\"Uniapp\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\",\"name\":\"Uniapp Native Page Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T12:47:59+00:00\",\"dateModified\":\"2025-08-04T03:54:33+00:00\",\"description\":\"Learn how to invoke native pages in Uniapp using uni.navigateToNative with step-by-step configuration.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uniapp Native Page Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Uniapp Native Page Guide - Blog - Silicon Cloud","description":"Learn how to invoke native pages in Uniapp using uni.navigateToNative with step-by-step configuration.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/","og_locale":"en_US","og_type":"article","og_title":"Uniapp Native Page Guide","og_description":"Learn how to invoke native pages in Uniapp using uni.navigateToNative with step-by-step configuration.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T12:47:59+00:00","article_modified_time":"2025-08-04T03:54:33+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"Uniapp Native Page Guide","datePublished":"2024-03-14T12:47:59+00:00","dateModified":"2025-08-04T03:54:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/"},"wordCount":104,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["App Integration","Cross-platform","Mobile development","Native Page","Uniapp"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/","name":"Uniapp Native Page Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T12:47:59+00:00","dateModified":"2025-08-04T03:54:33+00:00","description":"Learn how to invoke native pages in Uniapp using uni.navigateToNative with step-by-step configuration.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-invoke-native-pages-through-uniapp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uniapp Native Page Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=10784"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10784\/revisions"}],"predecessor-version":[{"id":154554,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10784\/revisions\/154554"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=10784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=10784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=10784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}