路由跳轉(zhuǎn)

1. wx.switchTab

跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。

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

2. wx.reLaunch

關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面。

wx.reLaunch({
	url: '/pages/index/index'
})

3. wx.redirectTo

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳轉(zhuǎn)到 tabbar 頁面。

wx.redirectTo({
	url: '/pages/index/index'
})

4. wx.navigateTo

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到 tabbar 頁面。小程序的頁面棧最多只能存儲10個(gè)頁面。

wx.navigateTo({
	url: '/pages/index/index'
})

5. wx.navigateBack

關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。使用delta參數(shù)確定返回的頁數(shù)，默認(rèn)為1，若delta大于現(xiàn)有頁面數(shù)，則返回至首頁。

// 此處是A界面，前往B界面
wx.navigateTo({
	url: '/pages/B/B'
}

// 此處是B界面，前往C界面
wx.navigateTo({
	url: '/pages/C/C'
})

// 此處是C界面，返回到A界面
wx.navigateBack({
	delta: 2
})

API調(diào)用

微信小程序默認(rèn)已經(jīng)封裝了相關(guān)的請求方法，在使用微信開發(fā)工具時(shí)，在微信開發(fā)工具右上角的詳情，本地設(shè)置中設(shè)置不檢驗(yàn)合法域名…即可使用開發(fā)工具進(jìn)行調(diào)試調(diào)用。
** 注：在提交代碼至微信小程序平臺后，若要調(diào)用服務(wù)器接口，則需配置https，微信小程序不支持http請求**

微信小程序通過 wx.request() 方法調(diào)用服務(wù)器接口，通過指定 url 指定接口，通過 method 指定調(diào)用方法。

GET請求

GET請求一般使用頭參法傳遞數(shù)據(jù)，GET請求相對POST請求速度較快，但是安全性不高，凡是設(shè)計(jì)用戶隱私的數(shù)據(jù)，都不能使用GET請求。

bindTestGet() {
	// 為確保this指向不發(fā)生改變，可以固定下this指向
	// 使用this的時(shí)候用that代替即可
	var that = this;
	wx.request({
		// 注意，如果小程序開啟校驗(yàn)合法域名時(shí)必須使用https協(xié)議
		// 在測試的情況下可以不開啟域名校驗(yàn)
		url: 'http://127.0.0.1:4523/mock/370607/testGet?id=1',

		// 請求的方法
		// 常用方法'GET','POST','PUT','DELETE'
		method: 'GET', 
		// 設(shè)置請求頭，不能設(shè)置 Referer
		header: {
			// 默認(rèn)值
			'content-type': 'application/json' 
		},
		// 請求成功時(shí)的處理
		success: function (res) {
		// 一般在這一打印下看看是否拿到數(shù)據(jù)
			console.log("testGet");
			console.log(res.data);
			if (res.statusCode == 200) {
				var array = res.data;
				that.setData({
				// 將res.data保存在listDate方便我們?nèi)パh(huán)遍歷
					listDate: res.data
				// 統(tǒng)計(jì)所有數(shù)據(jù)
				});
			};
		},
		// 請求失敗時(shí)的一些處理
		fail: function () {
			wx.showToast({
				icon: "none",
				mask: true,
				title: "接口調(diào)用失敗，請稍后再試。",
			});
		}
	});
}

POST請求

POST請求一般使用Body傳參法，Body請求速度相對GET請求相對較慢，但是POST請求勝在隱私性高，可傳遞數(shù)據(jù)量大。

bindTestPost() {
	var that = this;
	wx.request({
      		url: 'http://127.0.0.1:4523/mock/370607/testPost',
      		data: {
        		param: '1',
      		},
	      	method: 'POST', 
      		header: {
    			'content-type': 'application/json'
		},
      		success: function (res) {
        		console.log("testPost");
		        console.log(res.data);
        		if (res.statusCode == 200) {
				var array = res.data;
          			that.setData({
            				listDate: res.data
	          		});
        		}
	      	},
      		fail: function () {
      			wx.showToast({
            			icon: "none",
	            		mask: true,
        	  		title: "接口調(diào)用失敗，請稍后再試。",
         		});
      		}
   	});
  }

其他場景API調(diào)用方法如’PUT’,'DELETE’本質(zhì)是’POST’請求的延伸，‘PUT’請求和’DELETE’請求使用方法同’POST’，只需修改method中的方法即可。

頁面?zhèn)鲄?/h3>

1. 通過微信小程序組件的公有屬性data-[key]="value"的形式，可以從wxml文件中向js文件中傳值；
2. 在同一個(gè)標(biāo)簽中，需要向js文件中傳遞多個(gè)值的時(shí)候，可以使用多個(gè)data-[key]="value"的形式傳值；
3. 在js文件中，通過[res].currentTarget.dataset.key或[res].currentTarget.dataset[key]的形式，獲取從wxml中傳遞到j(luò)s文件的值；
4. 在頁面跳轉(zhuǎn)時(shí)，使用頭參法向要跳轉(zhuǎn)的頁面進(jìn)行傳值；
5. 在js的文件的onLoad生命周期函數(shù)中，通過[res].[key]的形式獲取從父頁面?zhèn)鬟f的參數(shù)。
6. 在使用**data-[key]="value"**的形式傳參時(shí)，[key]中不能出現(xiàn)大寫字母，不然js文件中識別不到相關(guān)的key，這里建議使用下劃線命名法進(jìn)行key的命名

示例：
wxml文件中：

<view bindtap="goChild" data-id="{{item.id}}" data-key="1">

父js文件中獲取wxml文件傳遞的值：文章來源地址http://www.zghlxwxcb.cn/news/detail-525919.html

到了這里，關(guān)于微信小程序路由跳轉(zhuǎn)，API調(diào)用，頁面?zhèn)髦档奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！