首頁  >  文章  >  微信小程式  >  小程式開發之新頁面連結開啟的方法(程式碼範例)

小程式開發之新頁面連結開啟的方法(程式碼範例)

不言
不言轉載
2019-01-23 11:04:555585瀏覽

這篇文章帶給大家的內容是關於小程式開發之新頁面連結開啟的方法(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

開發的小程式中有個使用者中心,需求是使用者可以點擊按鈕從而跳到新連結。實際上在做這個需求的時候,並沒有很好的方法,以往的一些經驗,也不適用於小程序,查了一些資料,也沒有頭緒。最終的實作方法就是使用navigator元件,如果哪位有更好的方法,或者我的實作方法有缺陷,請在下方指出。

外鏈展示頁面

先建立一個目錄,這個目錄用來展示外鏈中的內容。因為是外鏈,所以要用到web-view(注意這個元件有一些特性,從下方連結檢視)。

看目錄結構,其中navigator就是展示外鏈的頁面

小程式開發之新頁面連結開啟的方法(程式碼範例)
在navigator.wxml中,只需要一行程式碼即可

<web-view></web-view>

navigator.js中,修改url中的值

onLoad: function (options) {
    if (options.url) {
      this.setData({
        // 设置当前链接
        url: options.url
      })
    } 
  },

使用者中心

##在使用者中心,只需要將連結跳到/navigator/navigator中,並且帶上參數即可,看下實例

<!-- {{url}}中是外链地址 -->
<navigator></navigator>
上面的方法可以實現,當然實際項目要複雜些的,根據實際需求進行修改。

以上是小程式開發之新頁面連結開啟的方法(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除