頁面配置
每個(gè)小程序頁面都有一個(gè).json文件，該文件用來對(duì)小程序的頁面進(jìn)行配置。
頁面配置文件的作用
小程序中，每個(gè)頁面都有自己的.json配置文件，用來對(duì)當(dāng)前頁面的窗口外觀、頁面效果等進(jìn)行配置。
頁面配置和全局配置的關(guān)系
小程序中，app.json中的window節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁面的窗口表現(xiàn)。
如：當(dāng)在app.json中全局配置導(dǎo)航欄的文字為
蘇涼時(shí)，此時(shí)每個(gè)頁面的導(dǎo)航欄標(biāo)題都為蘇涼。
如果某些小程序頁面想要擁有特殊的窗口表現(xiàn)，此時(shí)，“頁面級(jí)別的 .json配置文件”就可以實(shí)現(xiàn)這種需求。
注意：當(dāng)全局配置和頁面配置沖突時(shí)，根據(jù)就近原則，最終的頁面以頁面配置的效果為準(zhǔn)。
頁面配置
在頁面配置文件（.json）中我們可以通過修改以下屬性來配置頁面文件。
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
navigationBarTitleText |
String | 字符串 | 導(dǎo)航欄標(biāo)題文字內(nèi)容 |
navigationBarBackgroundColor |
Hexcolor | #000000 | 導(dǎo)航欄背景顏色，如#000000 |
navigationBarTextStyle |
String | white | 導(dǎo)航欄標(biāo)題顏色，僅支持black / white |
backgroundColor |
Hexcolor | #ffffff | 窗口的背景色 |
backgroundTextStyle |
string | dark | 下拉 loading的樣式，僅支持dark / light |
enablePullDownRefresh |
Boolean | false | 是否全局開啟下拉刷新 |
onReachBottomDistance |
Number | 50 | 頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離，單位為px |
如：
網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制
出于安全性方面的考慮，小程序官方對(duì)數(shù)據(jù)接口的請(qǐng)求做出了如下兩個(gè)限制;
- 只能請(qǐng)求HTTPS類型的接口
- 必須將接口的域名添加到信任列表中，如下圖所示：
下面我們一起來看看如何進(jìn)行域名配置。
配置request合法域名
步驟：
-
登錄小程序管理后臺(tái)：微信小程序管理后臺(tái)
-
下拉點(diǎn)擊開發(fā)下的開發(fā)設(shè)置
-
下拉找到服務(wù)器域名，點(diǎn)擊開始配置
-
微信掃碼進(jìn)行身份驗(yàn)證，手機(jī)上點(diǎn)擊開啟
5.輸入你需要配置的域名，保存并提交。
此時(shí)在服務(wù)器域名中存在了剛剛所提交的域名。即設(shè)置成功。
回到微信小程序開發(fā)者工具；詳情-項(xiàng)目配置-request合法域名中就保存了剛才我們?cè)谛〕绦蚬芾砗笈_(tái)中配置的域名了。此時(shí)我們就可以在小程序中合法使用這兩個(gè)域名。
配置服務(wù)器域名注意事項(xiàng):
- 域名只支持https協(xié)議
- 域名不能使用IP地址或localhost
- 域名必須經(jīng)過ICP備案
- 服務(wù)器域名一個(gè)月內(nèi)最多可申請(qǐng)5次修改(小程序管理后臺(tái)顯示還可修改49次，為顯示bug，實(shí)際上就只有5次，請(qǐng)謹(jǐn)慎使用。)
發(fā)起get/post請(qǐng)求
調(diào)用微信小程序提供的wx.request()方法，可以發(fā)起GET數(shù)據(jù)請(qǐng)求：
在wxml中給按鈕綁定一個(gè)單擊事件：
<button type="primary" bindtap="Get_request">發(fā)起GET請(qǐng)求</button>
通過wx.request方法請(qǐng)求數(shù)據(jù)。
Get_request(){
wx.request({
url: 'https://suliang.blog.csdn.net', //請(qǐng)求地址
method:"GET", //請(qǐng)求方式
data:{ //發(fā)送到服務(wù)器的數(shù)據(jù)
name:'suliang',
age:21
},
success:(result)=>{ //請(qǐng)求成功后的回調(diào)函數(shù)
console.log(result);
}
})
}
點(diǎn)擊按鈕，get請(qǐng)求成功。
同理：發(fā)起POST請(qǐng)求也是如此，只需將method的值修改為PSOT即可。
在頁面剛加載時(shí)請(qǐng)求數(shù)據(jù)
在很多情況下，我們需要在頁面剛加載的時(shí)候，自動(dòng)請(qǐng)求一些初始化的數(shù)據(jù)。此時(shí)需要在頁面的onLoad事件中調(diào)用獲取數(shù)據(jù)的函數(shù)。
在頁面的.js文件中的監(jiān)聽頁面加載設(shè)置即可。
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
this.Get_request();
},
跳過request合法域名校驗(yàn)
如果后端程序員僅僅提供了http 協(xié)議的接口、暫時(shí)沒有提供https協(xié)議的接口。
此時(shí)為了不耽誤開發(fā)的進(jìn)度，我們可以在微信開發(fā)者工具中，臨時(shí)開啟 「開發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名、TLS版本及HTTPS證書」 選項(xiàng),跳過request合法域名的校驗(yàn)。
注意：跳過request合法域名校驗(yàn)。僅限在開發(fā)和調(diào)試階段使用，正式上線和發(fā)布時(shí)，仍然需要配置合法的request域名。
關(guān)于跨域和ajax請(qǐng)求
跨域：指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本
-
跨域問題只存在于基于瀏覽器的Web開發(fā)中。由于小程序的宿主環(huán)境不是瀏覽器而是微信客戶端，所以小程序中不存在跨域的問題。文章來源：http://www.zghlxwxcb.cn/news/detail-784893.html
-
Ajax技術(shù)的核心是依賴于瀏覽器中的XMLHttpRequest這個(gè)對(duì)象，由于小程序的宿主環(huán)境是微信客戶端，所以小程序中不能叫做“發(fā)起Ajax請(qǐng)求”，而是叫做“發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求”。文章來源地址http://www.zghlxwxcb.cn/news/detail-784893.html
到了這里，關(guān)于【微信小程序】一文帶你搞懂小程序的頁面配置和網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
