一：編寫tabBar模板

眾所周知，微信小程序的tabBar都是新開頁(yè)面的，而微信文檔上又表明了最多只能打開5層頁(yè)面。這樣就很容易導(dǎo)致出問題啦，假如我的tabBar有5個(gè)呢？下面是微信原話：

一個(gè)應(yīng)用同時(shí)只能打開5個(gè)頁(yè)面，當(dāng)已經(jīng)打開了5個(gè)頁(yè)面之后，wx.navigateTo不能正常打開新頁(yè)面。請(qǐng)避免多層級(jí)的交互方式，或者使用wx.redirectTo

因此這幾天想著根據(jù)微信tabBar數(shù)組來(lái)自定義模板供頁(yè)面調(diào)用。不過(guò)我在list里面每個(gè)對(duì)象都增加了一個(gè)selectedColor和active屬性，方便對(duì)每個(gè)tabBar當(dāng)前頁(yè)做樣式，如果不傳直接使用設(shè)置的selectedColor。因此這串?dāng)?shù)據(jù)只能設(shè)定在各個(gè)頁(yè)面下，不能設(shè)定在公用的app.js配置文件下，稍微有點(diǎn)代碼冗余，下次研究下怎么直接配置到app.js完善下。

只要新建一個(gè)tarBar.wxml模板頁(yè)，然后引用模板的頁(yè)面?zhèn)魅霐?shù)據(jù)即可，代碼如下：
接下來(lái)進(jìn)行測(cè)試，首先是index.js的配置對(duì)象： index.wxml引入模板： 接下來(lái)是mine.js文件引入配置對(duì)象： mine.wxml引入模板： 最后演示如下：
 
方案二

我把配置數(shù)據(jù)統(tǒng)一放在app.js文件，通過(guò)點(diǎn)擊跳轉(zhuǎn)頁(yè)面后在把數(shù)據(jù)添加到當(dāng)前頁(yè)面實(shí)例上，具體做法如下：

    1、app.js文件配置：
2、index.js+mine.js+city.js頁(yè)面使用：
最終演示和上圖一致！


二：map組件markers屬性動(dòng)態(tài)初始化

今天在寫小程序詳情頁(yè)時(shí)候遇到一個(gè)問題，map組件的markers屬性是通過(guò)異步請(qǐng)求到數(shù)據(jù)后設(shè)置的，結(jié)果就導(dǎo)致了微信底層渲染出錯(cuò)。但是如果我先在data初始化markers變量，每次小程序都不能正常渲染都是初始化的北京的數(shù)據(jù)。然后寫了如下測(cè)試：

test.js：
test.wxml： 測(cè)試一：data里面沒有初始化map變量

測(cè)試二：初始化map變量，并在wxml把map數(shù)據(jù)都打印出來(lái)
 
為什么會(huì)這樣呢？？各種測(cè)試，最后發(fā)現(xiàn)只要不是經(jīng)過(guò)遠(yuǎn)程請(qǐng)求在來(lái)設(shè)置map值就不會(huì)出問題。

后來(lái)經(jīng)大神網(wǎng)友提點(diǎn)，由于異步設(shè)置值的過(guò)程，組件已經(jīng)渲染。但是map變量沒有預(yù)定義是undefined狀態(tài)，map初始化拿不到數(shù)據(jù)直接報(bào)錯(cuò)了，而異步過(guò)來(lái)又變成動(dòng)態(tài)更新導(dǎo)致了wxml需要重新渲染map組件的情況導(dǎo)致的。因?yàn)楣俜轿臋n有提到：

地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認(rèn)值是北京的經(jīng)緯度。 標(biāo)記點(diǎn)markers只能在初始化的時(shí)候設(shè)置，不支持動(dòng)態(tài)更新。

只能初始化一次，因此導(dǎo)致每次都是顯示的初始化信息。

然后，網(wǎng)友給出的解決方案完美解決了這個(gè)問題：

wx:if會(huì)渲染一下組件，那我們按照這個(gè)思路給他加個(gè)if就行了

默認(rèn)map是false,就是加載時(shí)不渲染map組件，等ajax回來(lái)后把map設(shè)置為true，這樣就動(dòng)態(tài)渲染成你要的地址了