微信小程序?qū)W習(xí)筆記之頁面配置與路由方式
最近在學(xué)習(xí)回顧小程序的開發(fā),將一些學(xué)習(xí)結(jié)果做個筆記。參考微信小程序官方文檔:developers.weixin.qq.com/miniprogram…
一、小程序配置
1、全局配置
小程序根目錄下的 app.json 文件用來對微信小程序進(jìn)行全局配置,決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。
// 示例 { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/index", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }
2、頁面配置
每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現(xiàn)進(jìn)行配置,頁面中配置項(xiàng)會覆蓋 app.json 的 window 中相同的配置項(xiàng)。
// 示例 { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }
3、sitemap配置
注:sitemap 的索引提示是默認(rèn)開啟的,如需要關(guān)閉 sitemap 的索引提示,可在小程序項(xiàng)目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 為 false。
小程序根目錄下的 sitemap.json 文件用來配置小程序及其頁面是否允許被微信索引。
關(guān)于是否被微信索引有兩種配置方式:
1、頁面收錄設(shè)置:可對整個小程序的索引進(jìn)行關(guān)閉,小程序管理后臺-功能-頁面內(nèi)容接入-頁面收錄開關(guān);
2、sitemap 配置:可對特定頁面的索引進(jìn)行關(guān)閉。
// 所有頁面都會被微信索引(默認(rèn)) { "rules":[{ "action":"allow", "page":"*" }] } // path/to/page 頁面不被索引,其余的會被索引 { "rules":[{ "action":"disallow", "page":"path/to/page" }] }
二、小程序的五個路由
1、wx.navigateTo()
保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。不能跳轉(zhuǎn)到tabbar頁面。小程序中頁面棧最多十層,超過的可以使用wx.redirectTo來跳轉(zhuǎn)。
wx.navigateTo({ url:"list?id=2", events:{ // 頁面間通信接口,用于監(jiān)聽被打開頁面發(fā)送到當(dāng)前頁面的數(shù)據(jù)。 someEvent:function(data){ console.log(data) } }, success:function(res){ // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù) res.evnetChannel.emit('someEvent',{dta:'list'}) } })
2、wx.redirectTo()
關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到tabbar頁面。
// 示例 wx.redirectTo({ url:'list?id=2', success:function(){}, fail:function(){} })
3、wx.switchTab()
跳轉(zhuǎn)到tabBar頁面,并關(guān)閉其他所有非tabBar頁面。
wx.switchTab({ url:'/index' })
4、wx.navigateBack()
關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面。可以通過getCurrentPages獲取當(dāng)前的頁面棧,決定需要返回幾層。
// 此處是A頁面 wx.navigateTo({ url: 'B?id=1' }) // 此處是B頁面 wx.navigateTo({ url: 'C?id=1' }) // 在C頁面內(nèi) navigateBack,將返回A頁面 wx.navigateBack({ delta: 2 })
5、wx.reLaunch()
關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面。
//示例 wx.reLaunch({ url:'list?id=2' })
注:另外和跳轉(zhuǎn)相關(guān)的webview中的頁面怎么跳轉(zhuǎn)回小程序?
wx.miniPrograme.navigateTo({ url:'pages/login/login'+'params' }) // 跳轉(zhuǎn)到小程序的導(dǎo)航頁面 wx.miniPrograme.switchTab({ url:"/pages/index/index" })
總結(jié)
到此這篇關(guān)于微信小程序?qū)W習(xí)筆記之頁面配置與路由方式的文章就介紹到這了,更多相關(guān)小程序頁面配置與路由方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
為什么JS中eval處理JSON數(shù)據(jù)要加括號
這篇文章主要介紹了為什么JS中eval處理JSON數(shù)據(jù)要加括號的相關(guān)資料,需要的朋友可以參考下2015-04-04JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時回調(diào)地獄的問題,大家應(yīng)該也不陌生了,今天來學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過程吧2023-04-04js彈出框、對話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄猨s彈出框、對話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05js?字符串反轉(zhuǎn)(倒序)的幾種方式總結(jié)
這篇文章主要介紹了js?字符串反轉(zhuǎn)(倒序)的幾種方式總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10如何利用JavaScript?實(shí)現(xiàn)繼承
這篇文章主要介紹了如何利用JavaScript?實(shí)現(xiàn)繼承,JavaScript?在編程語言界是個特殊種類,它和其他編程語言很不一樣,JavaScript可以在運(yùn)行的時候動態(tài)地改變某個變量的類型,下面小編將繼續(xù)介紹JavaScript如何實(shí)現(xiàn)繼承,需要的朋友可以參考下2022-02-02js es6系列教程 - 基于new.target屬性與es5改造es6的類語法
下面小編就為大家?guī)硪黄猨s es6系列教程 - 基于new.target屬性與es5改造es6的類語法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09