關(guān)于頁(yè)面的跳轉(zhuǎn)，微信小程序提供了3種方法：

方法一：

使用API  wx.navigateTo()函數(shù)

示例：

首先先新建一個(gè)test頁(yè)面

如何新建頁(yè)面？

請(qǐng)到先閱讀下面教程

微信小程序的新建頁(yè)面 —— 微信小程序教程系列（4）

index.wxml:

在index.wxml新建一個(gè)button組件，并使用bindtap事件綁定一個(gè)函數(shù)

index.js:

在index.js中的Page函數(shù)內(nèi)部，添加changeToTest 函數(shù)，函數(shù)里面使用wx.navigateTo，寫上需要跳轉(zhuǎn)的頁(yè)面，里面?zhèn)魅氲氖且粋€(gè)對(duì)象，對(duì)象內(nèi)使用url屬性，對(duì)應(yīng)的就是需要跳轉(zhuǎn)的頁(yè)面的路徑（注意：這是接收的是一個(gè)相對(duì)路徑，并且頁(yè)面不需要使用.wxml后綴）

運(yùn)行：

方法二：

使用API  wx.redirectTo()函數(shù)

示例：

首先先新建一個(gè)test頁(yè)面

如何新建頁(yè)面？

請(qǐng)到先閱讀下面教程

微信小程序的新建頁(yè)面 —— 微信小程序教程系列（4）

index.wxml:

在index.wxml新建一個(gè)button組件，并使用bindtap事件綁定一個(gè)函數(shù)

index.js:

運(yùn)行：

備注：

wx.navigateTo()和wx.redirectTo()的區(qū)別：

wx.navigateTo()是保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到某個(gè)頁(yè)面，跳轉(zhuǎn)頁(yè)面后可以返回上一頁(yè)。

wx.redirectTo()是關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到某個(gè)頁(yè)面，跳轉(zhuǎn)頁(yè)面后不能返回上一頁(yè)。

方法三：

使用組件 <navigator>

示例：

首先先新建一個(gè)test頁(yè)面

如何新建頁(yè)面？

請(qǐng)到先閱讀下面教程

微信小程序的新建頁(yè)面 —— 微信小程序教程系列（4）

index.wxml:

在index.wxml頁(yè)面添加一個(gè)<navigator>元素，在元素里面使用屬性u(píng)rl就可以

運(yùn)行：

跳轉(zhuǎn)的數(shù)據(jù)傳遞

以wx.navigateTo為例：

上面講述,wx.navigateTo傳入的url是跳轉(zhuǎn)的頁(yè)面（使用相對(duì)路徑）

wx.navigateTo({
 url:"pages/home/home"
});

那么參數(shù)傳遞至下一頁(yè)面，則只需要在路徑后面，添加？問(wèn)號(hào)，？后面接的是參數(shù)，以key－value的方式。

這里傳了個(gè)value為2的參數(shù)

wx.navigateTo({
 url:"pages/home/home?type=2"
});

然后在home.js中的onLoad()函數(shù)中得到值：option.type就可以得到了，如下：

onLoad: function (option) {
 this.setData({
 type:option.type,
 });
 console.log(option.type);
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論