小程序模板網(wǎng)

微信小程序編寫tabBar模板，map組件markers屬性動態(tài)初始化

發(fā)布時間：2017-11-28 17:15 所屬欄目：小程序開發(fā)教程

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

 
 
一：編寫tabBar模板

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

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

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

只要新建一個tarBar.wxml模板頁，然后引用模板的頁面?zhèn)魅霐?shù)據(jù)即可，代碼如下：
  1. <template name="tabBar">  
  2.   <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">  
  3.   <block wx:for="{{tabBar.list}}" wx:key="pagePath">  
  4.     <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">  
  5.       <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
  6.       <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>  
  7.       <text>{{item.text}}</text>  
  8.     </navigator>  
  9.     </block>  
  10.   </view>  
  11. </template>  
復(fù)制代碼
接下來進(jìn)行測試，首先是index.js的配置對象：
  1. //配置tabBar  
  2.     tabBar: {  
  3.       "color": "#9E9E9E",  
  4.       "selectedColor": "#f00",  
  5.       "backgroundColor": "#fff",  
  6.       "borderStyle": "#ccc",  
  7.       "list": [  
  8.         {  
  9.           "pagePath": "/pages/index/index",  
  10.           "text": "主頁",  
  11.           "iconPath": "../../img/tabBar_home.png",  
  12.           "selectedIconPath": "../../img/tabBar_home_cur.png",  
  13.           //"selectedColor": "#4EDF80",  
  14.           active: true  
  15.         },  
  16.         {  
  17.           "pagePath": "/pages/village/city/city",  
  18.           "text": "目的地",  
  19.           "iconPath": "../../img/tabBar_village.png",  
  20.           "selectedIconPath": "../../img/tabBar_village_cur.png",  
  21.           "selectedColor": "#4EDF80",  
  22.           active: false  
  23.         },  
  24.         {  
  25.           "pagePath": "/pages/mine/mine",  
  26.           "text": "我的",  
  27.           "iconPath": "../../img/tabBar_mine.png",  
  28.           "selectedIconPath": "../../img/tabBar_mine_cur.png",  
  29.           "selectedColor": "#4EDF80",  
  30.           active: false  
  31.         }  
  32.       ],  
  33.       "position": "bottom"  
  34.     }
復(fù)制代碼
index.wxml引入模板：
  1. <import src="../../template/tabBar.wxml" />  
  2. <template is="tabBar" data="{{tabBar: tabBar}}" />  
復(fù)制代碼
接下來是mine.js文件引入配置對象：
  1. //配置tabBar  
  2.     tabBar: {  
  3.       "color": "#9E9E9E",  
  4.       "selectedColor": "#f00",  
  5.       "backgroundColor": "#fff",  
  6.       "borderStyle": "#ccc",  
  7.       "list": [  
  8.         {  
  9.           "pagePath": "/pages/index/index",  
  10.           "text": "主頁",  
  11.           "iconPath": "../../img/tabBar_home.png",  
  12.           "selectedIconPath": "../../img/tabBar_home_cur.png",  
  13.           //"selectedColor": "#4EDF80",  
  14.           active: false  
  15.         },  
  16.         {  
  17.           "pagePath": "/pages/village/city/city",  
  18.           "text": "目的地",  
  19.           "iconPath": "../../../img/tabBar_village.png",  
  20.           "selectedIconPath": "../../../img/tabBar_village_cur.png",  
  21.           "selectedColor": "#4EDF80",  
  22.           active: false  
  23.         },  
  24.         {  
  25.           "pagePath": "/pages/mine/mine",  
  26.           "text": "我的",  
  27.           "iconPath": "../../img/tabBar_mine.png",  
  28.           "selectedIconPath": "../../img/tabBar_mine_cur.png",  
  29.           "selectedColor": "#4EDF80",  
  30.           active: true  
  31.         }  
  32.       ],  
  33.       "position": "bottom"  
  34.     }  
復(fù)制代碼
mine.wxml引入模板：
  1. <import src="../../template/tabBar.wxml" />  
  2. <template is="tabBar" data="{{tabBar: tabBar}}" />  
復(fù)制代碼
最后演示如下：
1.gif 
方案二

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

    1、app.js文件配置：
  1. //app.js  
  2. var net = require('common/net');  
  3. var a_l, a_d = {}, a_cbSucc, a_cbSuccFail, a_cbFail, a_cbCom, a_h, a_m;  
  4. App({  
  5.   onLaunch: function () {  
  6.     var that = this;  
  7.   },  
  8.   //修改tabBar的active值  
  9.   editTabBar: function () {  
  10.     var _curPageArr = getCurrentPages();  
  11.     var _curPage = _curPageArr[_curPageArr.length - 1];<span style="font-family: Arial, Helvetica;">//相當(dāng)于Page({})里面的this對象</span>  
  12.     var _pagePath=_curPage.__route__;  
  13.     if(_pagePath.indexOf('/') != 0){  
  14.       _pagePath='/'+_pagePath;  
  15.     }  
  16.     var tabBar=this.globalData.tabBar;  
  17.     for(var i=0; i<tabBar.list.length; i++){  
  18.       tabBar.list.active=false;  
  19.       if(tabBar.list.pagePath==_pagePath){  
  20.         tabBar.list.active=true;//根據(jù)頁面地址設(shè)置當(dāng)前頁面狀態(tài)  
  21.       }  
  22.     }  
  23.     _curPage.setData({  
  24.       tabBar: tabBar  
  25.     });  
  26.   },  
  27.   globalData: {  
  28.     userInfo: null,  
  29.     //配置tabBar  
  30.     tabBar: {  
  31.       "color": "#9E9E9E",  
  32.       "selectedColor": "#f00",  
  33.       "backgroundColor": "#fff",  
  34.       "borderStyle": "#ccc",  
  35.       "list": [  
  36.         {  
  37.           "pagePath": "/pages/index/index",  
  38.           "text": "主頁",  
  39.           "iconPath": "/pages/templateImg/tabBar_home.png",  
  40.           "selectedIconPath": "/pages/templateImg/tabBar_home_cur.png",  
  41.           "selectedColor": "#4EDF80",  
  42.           active: false  
  43.         },  
  44.         {  
  45.           "pagePath": "/pages/village/city/city",  
  46.           "text": "目的地",  
  47.           "iconPath": "/pages/templateImg/tabBar_village.png",  
  48.           "selectedIconPath": "/pages/templateImg/tabBar_village_cur.png",  
  49.           "selectedColor": "#4EDF80",  
  50.           active: false  
  51.         },  
  52.         {  
  53.           "pagePath": "/pages/mine/mine",  
  54.           "text": "我的",  
  55.           "iconPath": "/pages/templateImg/tabBar_mine.png",  
  56.           "selectedIconPath": "/pages/templateImg/tabBar_mine_cur.png",  
  57.           "selectedColor": "#4EDF80",  
  58.           active: false  
  59.         }  
  60.       ],  
  61.       "position": "bottom"  
  62.     }  
  63.   }  
  64. })  
復(fù)制代碼
2、index.js+mine.js+city.js頁面使用：
  1. var App=getApp();  
  2. Page({  
  3.   data:{  
  4.     detail: {},  
  5.   },  
  6.   onLoad:function(options){  
  7.     App.editTabBar();//添加tabBar數(shù)據(jù)  
  8.     var that=this;  
  9.   }  
  10. })  
復(fù)制代碼
最終演示和上圖一致！


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

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

test.js：
  1. Page({  
  2.   data:{  
  3.     map:{  
  4.       lat: 0,  
  5.       lng: 0,  
  6.       markers: [],  
  7.       hasMarkers: false//解決方案  
  8.     }  
  9.   },  
  10.   onLoad: function(options){  
  11.     var that=this;  
  12.     wx.getLocation({  
  13.       type: 'wgs84', // 默認(rèn)為 wgs84 返回 gps 坐標(biāo)，gcj02 返回可用于 wx.openLocation 的坐標(biāo)  
  14.       success: function (res) {  
  15.         // success  
  16.         wx.request({  
  17.           url: 'https://xxx.com/detail.htm?vid=3&latlng=' + res.latitude + ',' + res.longitude,  
  18.           data: {},  
  19.           method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
  20.           // header: {}, // 設(shè)置請求的 header  
  21.           success: function (res) {  
  22.             // success  
  23.             that.setData({  
  24.               'map.lat': res.data.data.lat,  
  25.               'map.lng': res.data.data.lng,  
  26.               'map.markers': [{  
  27.                 latitude: res.data.data.lat,  
  28.                 longitude: res.data.data.lng,  
  29.                 name: res.data.data.title,  
  30.                 desc: res.data.data.address  
  31.               }],  
  32.               'map.hasMarkers': true//解決方案  
  33.             });  
  34.             console.log(that.data.map.markers);  
  35.           }  
  36.         })  
  37.       }  
  38.     })  
  39.   }  
  40. });  
復(fù)制代碼
test.wxml：
  1. <view style="height: 100rpx;">  
  2. {{map.lat}}--{{map.lng}}--{{map.markers[0].name}}--{{map.markers[0].desc}}  
  3. </view>  
  4. <map latitude="{{map.lat}}" longitude="{{map.lng}}" markers="{{map.markers}}"></map>  
復(fù)制代碼
測試一：data里面沒有初始化map變量
2.jpg
測試二：初始化map變量，并在wxml把map數(shù)據(jù)都打印出來
3.jpg 
為什么會這樣呢？？各種測試，最后發(fā)現(xiàn)只要不是經(jīng)過遠(yuǎn)程請求在來設(shè)置map值就不會出問題。

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

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

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

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

wx:if會渲染一下組件，那我們按照這個思路給他加個if就行了
  1. <map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>
復(fù)制代碼

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



易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://u-renovate.com/wxmini/doc/course/17972.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢