首頁  >  文章  >  微信小程式  >  如何從小程式外部跳到指定的小程式頁面_小程式頁面取得鏈接

如何從小程式外部跳到指定的小程式頁面_小程式頁面取得鏈接

php是最好的语言
php是最好的语言原創
2018-07-28 14:17:2915516瀏覽

小程式裡面的連結使用navigator元件

在html中使用a標籤, a標籤可以連結到網路中的任何位址

而小程式中navigator只能應用於目前小程式內的連結跳轉

<navigator url="http://www.baidu.com">跳转A</navigator>

<navigator url=&#39;test/t&#39;>跳转B</navigator>

第一個是無效的

第二個能正確跳轉, 需要注意的是: url中的頁面不能是tabBar(底部選單)中的頁面

#但是可以透過open-type屬性設定

redirect屬性, 開啟新頁面時, 關閉原頁(在新頁, 不能再回到原頁)

<navigator redirect url=&#39;test/t&#39;>跳转</navigator>

跳轉時並傳遞參數(不用加上引號 , 自動會加上雙引號, 否則就多餘一個引號, 因此直接寫: id=111&name=張三):

<navigator  url=&#39;test/t?id=111&name=张三&#39;>跳转</navigator>

透過onLoad事件取得url參數, 在載入這個頁面時自動將參數放入

<navigator  url=&#39;test/t?id=111&name=张三&#39; hover-class=&#39;hoverClass&#39;>跳转</navigator>    <!--链接1-->
<navigator  url=&#39;test/t?id=123&name=小明&#39;>跳转</navigator>    <!--链接2-->
Page({
  data: {

  },
  onLoad : function(datas) {
    console.log(datas);
  }
})

如果點擊連結1, 則datas的值是{id: "111", name: "張三"}, 點選連結2, 則datas的值是{id: "123", name: "小明"}

hover-class是點上去後的樣式

# wx.navigateTo

此Api也可以完成頁面跳轉, 與navigator(無redirect屬性)相同

<button size=&#39;mini&#39; bindtap="navigator">跳转</button>
navigator : function() {
    wx.navigateTo({
      url: &#39;test/t?id=100&user=xiaoming&#39;,
      success : function(e) {
        console.log(e.errMsg);
      }
    })
  }

wx.redirectTo

#此Api也可以完成頁面跳轉, 與navigator(有redirect屬性)相同, 操作與上相同

wx.navigateBack

#此Api用於返回, 從目前頁面返回上級頁(根據如下參數)

Page({
  data: {

  },
  back : function() {
    wx.navigateBack({
      delta : 1            // 值为1, 则是返回上一级, 值为2就返回上两级...
    })
  }
})

如果dellta的值為1, 則可以不寫dellta屬性: wx.navigateBack({})

如果dellta的值超過了其能傳回的總級數, 則會傳回首頁

#相關文章:

##連結到本頁

微信小程式元件:navigator頁面連結解讀與分析

#相關影片:

##頁面連結與多媒體-微信小程式項目實戰影片教學

以上是如何從小程式外部跳到指定的小程式頁面_小程式頁面取得鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn