1. 程式人生 > >微信小程式頁面跳轉、邏輯層模組化

微信小程式頁面跳轉、邏輯層模組化

一、頁面的跳轉

  微信小程式的頁面跳轉函式方法有兩個,另外還有兩種模組跳轉方式。

  函式跳轉:

  1.wx.navigateTo(OBJECT):

wx.navigateTo({
         url: 'test?id=1'
       })
//
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
//問號後面的引數為傳遞至指定頁面onload方法內的引數。id為自定義引數名,在跳轉頁面獲取引數值時,也是通過這個設定的引數來獲取的。

  2.wx.redirectTo(OBJECT):

       wx.redirectTo({
          url: 
'test?id=1' })
//銷燬
當前頁面,跳轉到應用內的某個頁面。
//問號後面的引數為傳遞至指定頁面onload方法內的引數。id為自定義引數名,在跳轉頁面獲取引數值時,也是通過這個設定的引數來獲取的。

  模組跳轉:

  1.標籤跳轉:

   在wxml中新增一個navigator元素,實現跳轉。

<navigator url='../list/list'>點選我</navigator>

  2.tabBar跳轉:

  在主頁中設定tabBar,在tabBar中設定跳轉頁面。通過點選其中的圖示,實現跳轉。

{
                  
"tabBar": { "list": [{ "pagePath": "index", "text": "首頁" },{ "pagePath": "other", "text": "其他" }] } }

  通過wx.switchTab(OBJECT)方法,可以從非tabBar跳轉至tabBar頁面,並關閉所有其他非tabBar頁面。

wx.switchTab({
               url: '/index'
            })

  

  頁面的返回:

             關閉當前頁面,返回上一頁面或多級頁面。可通過getCurrentPages()獲取當前的頁面棧,決定需要返回幾層。 

OBJECT 引數說明:

 

引數 型別 預設值 說明
delta Number 1 返回的頁面數,如果 delta 大於現有頁面數,則返回到首頁。

 

// 注意:呼叫 navigateTo 跳轉時,呼叫該方法的頁面會被加入堆疊,而 redirectTo 方法則不會。見下方示例程式碼

         // 此處是A頁面
          wx.navigateTo({
              url: 'B?id=1'
          })

         // 此處是B頁面
          wx.navigateTo({
            url: 'C?id=1'
          })

           // 在C頁面內 navigateBack,將返回A頁面
             wx.navigateBack({
           delta: 2
          })

二、邏輯層的模組化:

  呼叫全域性函式getApp()可以獲取小程式的全域性應用例項,如果需要全域性有效的資料我們可以再App()中定義。

//app.js
App({
  myNumber:1,
})
//logs.js
onLoad: function () {
var app = getApp()
app.myNumber++
}
//list.js
onLoad: function (options) {
    console.log("我的資料是:",getApp().myNumber);
  },

  為了提高程式碼的可讀性和效率,可以通過小程式的模組化特性,將公用的或者需要重複複用的程式碼從程式裡抽取出來,打包成單獨的.js檔案(微信小程式在建立之初就有一個utils/utils.js檔案作為js模組,裡面暴露了一個獲取當前時間的方法),提供某種特定的功能,這就是程式的模組。如果你想要在外部使用utils.js中封裝的方法,只能通過module.exports和exports方法對外暴露介面。

module.exports = {
  formatTime: formatTime,
  '對外方法名':'本地方法名'
}

  如何在需要使用這些模組的檔案中使用:使用 require(path) 將公共程式碼引入(require 暫時不支援絕對路徑)。

//util.js
function sayHello(name) {
    console.log(`Hello ${name} !`)
}
module.exports = {
    sayHello: sayHello
}
var util= require('../../utils/util.js')
Page({
     data:[],
      onLoad: function() {
        console.log(util.sayHello('Cc'))
    },
})