微信小程式頁面跳轉、邏輯層模組化
阿新 • • 發佈:2019-01-08
一、頁面的跳轉
微信小程式的頁面跳轉函式方法有兩個,另外還有兩種模組跳轉方式。
函式跳轉:
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')) }, })