在uniApp的開(kāi)發(fā)過(guò)程中，我們常常需要通過(guò)按鈕，方便用戶(hù)跳轉(zhuǎn)到我們需要的頁(yè)面。
跳轉(zhuǎn)到自定義頁(yè)面
第一步：打開(kāi)Hbuilder，新建項(xiàng)目
我們選擇uni-app，模板選擇默認(rèn)模板，VUE版本選擇3
第二步：創(chuàng)建自定義頁(yè)面
我們?cè)陧?xiàng)目的pages目錄下，新建ad目錄，再在ad目錄下新建ad.vue文件，輸入以下代碼
<template>
<view>
<page-head :title="title"></page-head>
<h2>簡(jiǎn)簡(jiǎn)單單的晚飯</h2>
</view>
</template>
<script>
export default {
data() {
return {
title:'自定義頁(yè)面'
}
}
}
</script>
<style>
</style>第三步：注冊(cè)
我們?cè)陧?xiàng)目的根目錄下找到pages.json，在里面添加以下代碼，注冊(cè)我們的頁(yè)面
{
"path": "pages/ad/ad",
"style": {
"navigationBarTitleText": "好好吃飯"
}
}pages.json的完整代碼如下：
{
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/ad/ad",
"style": {
"navigationBarTitleText": "好好吃飯"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
第四步：調(diào)用
我們找到根目錄下，pages目錄下的，index目錄下的index.vue文件，添加以下代碼，跳轉(zhuǎn)到我們的自定義頁(yè)面
<navigator url="pages/single/post?id=142477&__id__=1">
<button>跳不顧一切的文章吧</button>
</navigator>完整代碼如下：
<template>
<view class="container">
<view class="intro">本項(xiàng)目已包含uni ui組件，無(wú)需import和注冊(cè)，可直接使用。在代碼區(qū)鍵入字母u，即可通過(guò)代碼助手列出所有可用組件。光標(biāo)置于組件名稱(chēng)處按F1，即可查看組件文檔。</view>
<text class="intro">詳見(jiàn)：</text>
<uni-link :href="href" :text="href"></uni-link>
</view>
<navigator url="/pages/ad/ad?title=ad">
<button type="default">跳轉(zhuǎn)到新頁(yè)面</button>
</navigator>
</template>
<script>
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui'
}
},
methods: {
}
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
跳轉(zhuǎn)到自定義連接
承接上面的教程，跳轉(zhuǎn)到您指定的自定義頁(yè)面中，
在您自定義的pages - ad - ad.vue 頁(yè)面中添加以下代碼：
<template>
<view>
<web-view :webview-styles="webviewStyles" src="我的request的合法授權(quán)域名"></web-view>
</view>
</template>
<script>
</script>
<style>
</style>
您的域名，可能需要在對(duì)象的小程序管理后臺(tái)經(jīng)過(guò)授權(quán)才可使用。（web-view 加載的 url 需要在后臺(tái)配置域名白名單，包括內(nèi)部再次 iframe 內(nèi)嵌的其他 url?）
web-view 是一個(gè) web 瀏覽器組件，可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿(mǎn)整個(gè)頁(yè)面（nvue 使用需要手動(dòng)指定寬高）。
各小程序平臺(tái)，web-view 加載的 url 需要在后臺(tái)配置域名白名單，包括內(nèi)部再次 iframe 內(nèi)嵌的其他 url 。
注意：使用這種方法在瀏覽器預(yù)覽會(huì)出錯(cuò)，需要直接運(yùn)行到手機(jī)端，就會(huì)正常顯示。
跳轉(zhuǎn)到小程序內(nèi)的文章頁(yè)
打開(kāi)項(xiàng)目，找到pages - index - index.vue
在你想插入的地方插入以下連接：
<view @click="go('/pages/single/page?id=144090')" class="about-link flex-center">
點(diǎn)我跳到指定ID的文章
</view>代碼中的/pages/single/page?id=144090，可通過(guò)菜單 - 運(yùn)行 - 運(yùn)行到瀏覽器 - ~~獲取
找到你需要跳轉(zhuǎn)的文章，查看器在瀏覽器中的URL連接，例如下面這樣
https://localhost:444/#/pages/single/post?id=122934截取其中的一段即可。例如這樣
/pages/single/post?id=122934