2. 程式人生 > >微信小程式編寫tabBar模板，map元件markers屬性動態初始化

微信小程式編寫tabBar模板，map元件markers屬性動態初始化

阿新 • • 發佈：2019-01-22
一：編寫tabBar模板

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

一個應用同時只能開啟5個頁面，當已經打開了5個頁面之後，wx.navigateTo不能正常開啟新頁面。請避免多層級的互動方式，或者使用wx.redirectTo

因此這幾天想著根據微信tabBar陣列來自定義模板供頁面呼叫。不過我在list裡面每個物件都增加了一個selectedColor和active屬性，方便對每個tabBar當前頁做樣式，如果不傳直接使用設定的selectedColor。因此這串資料只能設定在各個頁面下，不能設定在公用的app.js配置檔案下，稍微有點程式碼冗餘，下次研究下怎麼直接配置到app.js完善下。

只要新建一個tarBar.wxml模板頁，然後引用模板的頁面傳入資料即可，程式碼如下：
  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>  
複製程式碼 接下來進行測試，首先是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.     }
複製程式碼 index.wxml引入模板：
  1. <import src="../../template/tabBar.wxml" />  
  2. <template is="tabBar" data="{{tabBar: tabBar}}" />  
複製程式碼 接下來是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.     }  
複製程式碼 mine.wxml引入模板：
  1. <import src="../../template/tabBar.wxml" />  
  2. <template is="tabBar" data="{{tabBar: tabBar}}" />  
複製程式碼 最後演示如下：
1.gif 
方案二

我把配置資料統一放在app.js檔案，通過點選跳轉頁面後在把資料新增到當前頁面例項上，具體做法如下：

    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, sans-serif;">//相當於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;//根據頁面地址設定當前頁面狀態  
  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. })  
複製程式碼 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資料  
  8.     var that=this;  
  9.   }  
  10. })  
複製程式碼 最終演示和上圖一致！


二：map元件markers屬性動態初始化

今天在寫小程式詳情頁時候遇到一個問題，map元件的markers屬性是通過非同步請求到資料後設置的，結果就導致了微信底層渲染出錯。但是如果我先在data初始化markers變數，每次小程式都不能正常渲染都是初始化的北京的資料。然後寫了如下測試：

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', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標  
  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: {}, // 設定請求的 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. });  
複製程式碼 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>  
複製程式碼 測試一：data裡面沒有初始化map變數
2.jpg
測試二：初始化map變數，並在wxml把map資料都打印出來
3.jpg 
為什麼會這樣呢？？各種測試，最後發現只要不是經過遠端請求在來設定map值就不會出問題。

後來經大神網友提點，由於非同步設定值的過程，元件已經渲染。但是map變數沒有預定義是undefined狀態，map初始化拿不到資料直接報錯了，而非同步過來又變成動態更新導致了wxml需要重新渲染map元件的情況導致的。因為官方文件有提到：

地圖元件的經緯度必填, 如果不填經緯度則預設值是北京的經緯度。 標記點markers只能在初始化的時候設定，不支援動態更新。

只能初始化一次，因此導致每次都是顯示的初始化資訊。

然後，網友給出的解決方案完美解決了這個問題：

wx:if會渲染一下元件，那我們按照這個思路給他加個if就行了
  1. <map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>
複製程式碼

預設map是false,就是載入時不渲染map元件，等ajax回來後把map設定為true，這樣就動態渲染成你要的地址了

原文連結：http://bbs.jointforce.com/topic/25439

相關推薦

微信小程式編寫tabBar模板，map元件markers屬性動態初始化

一：編寫tabBar模板 眾所周知，微信小程式的tabBar都是新開頁面的，而微信文件上又表明了最多隻能開啟5層頁面。這樣就很容易導致出問題啦，假如我的tabBar有5個呢？下面是微信原話： 一個應用同時只能開啟5個頁面，當已經打開了5個頁面之後，wx.navigateTo不能正常開啟新頁面。請避免多層級的

微信小程式滑動刪除功能，沒有元件自己擼了個Demo

http://bbs.larkapp.com/thread-13805-1-1.html 沒有高度封裝，有人願意封裝優化下的可以弄下 效果圖   1、wxml  touch-item元素綁定了bindtouchstart、bindtouchmove事件 [HTML] 純文字檢視 

微信小程式分包傳送資料，給微信硬體完成升級

微信小程式分包傳送資料，給微信硬體完成韌體升級 微信硬體升級流程： 1.準備升級韌體包，我們使用的是zip包，實際使用的時候可以放在伺服器下載。 2.掃描ble裝置並連線，向裝置寫入10，進入dfu模式。 3.進入dfu之後藍芽會斷開，需要重新連結，另外，duf模式下，藍芽的

微信小程式程式碼上傳，稽核釋出小程式

1.開啟微信開發者工具 管理員掃碼 -> 填寫好小程式的專案目錄、AppID（必須是客戶已註冊好的AppID）、專案名稱 2.在app.js中修改id（客戶登入後臺管理系統的id），app.json中修改頁面導航欄標題navigationBarTitleText

微信小程式上傳圖片，視訊及預覽

wxml <!-- 圖片預覽 --> <view class='preview-warp' wx:if="{{urls}}"> <image src='{{urls}}' /> </view> <view class="prew_video"

微信小程式開源專案庫集合，附demo下載

微信小程式開源專案庫集合，附demo下載 UI元件 weui-wxss ★852 - 同微信原生視覺體驗一致的基礎樣式庫 Wa-UI ★122 - 針對微信小程式整合的一套UI

微信小程式開發問題解決，常見BUG總結

小程式開發中的各種坑，進行簡要總結，歡迎填坑` 優化程式碼包 儘量減少程式碼包的大小，因為程式碼包大小直接影響到下載速度，從而影響使用者的首次開啟體驗。2M限制。小程式程式碼包經過編譯後，會放在微信的 CDN 上供使用者下載，CDN 開啟了 GZIP 壓縮，多數圖片格式大大降低程式碼包壓縮率。使用雲伺服器

微信小程式中換行，空格（多個空格）寫法

在小程式中HTML的網頁實體無法正常使用，小程式中的寫法為：  一、空格，換行 <text>你好！\t七月流火啊！\n我在下一行</text> ---------------------------------------------------------

微信小程式全域性狀態管理，並提供Vuex的開發體驗

1. 概要 微信小程式的開發體驗類似vue和react，但是卻沒有提供全域性狀態管理的機制，所以狀態的共享只能通過屬性傳遞的方式來實現。這種做法在小規模的應用中尚可以滿足開發效率，但是在複雜的應用中元件的巢狀層次很深，屬性傳遞的路徑過長。 於是我就想利用小程式Page中的data

微信小程式(3)函式呼叫，引數傳遞

<view class="m-view-cell" bindtap="bindStatus" data-type="全部">全部</view> <view class="m-view-cell" bindtap="bindStatus" data-type="待受理

微信小程式關於tabbar點選切換資料不重新整理問題

微信小程式中經常遇到的需求就是我提交了一個表單或者進行了一個操作，需要在我的個人中心頁面中實時顯示出來，但是小程式中的tabbar切換類似於tab切換 並不會進行頁面重新整理請求 所以總是會造成一些資料更新不及時問題 而閱讀小程式文件發現了小程式是給提供瞭解決辦法的 onShow /** * 生命週期

微信小程式評論/留言功能，附：前端+後端程式碼+視訊講解！

前端介面： 演示： <!-- 表單 --> <form bindsubmit="formSubmit"> <input type="text" name="liuyantext" placeholder='輸入留言內容' class

微信小程式暫停“虛擬支付”，知識付費小程式可以這麼玩！

5月8日起小程式關閉虛擬支付，對於此次小程式關閉虛擬支付影響最大的，應該是知識付費/線上教育類的小程式，這類小程式現有的變現模式將受到巨大的衝擊。   一、這次整改意味著什麼？有3個需要注意   1、虛擬支付 不是所有提供支付功能的小程式都要被整改，僅僅只有涉及“虛擬支付

微信小程式雲開發——模板講解之雲函式

在上一張我們已經配好了環境，這章我們按照模板的順序去執行提供的案例，對官方文件進行一個實踐操作。 首先我們點選”點選獲取 openid “文字，發現控制檯報錯： 雲函式 呼叫失敗 Error: errCode: -404011 cloud function executi

微信小程式簡訊驗證碼，小程式怎麼開通簡訊驗證碼

微信小程式可以通過 ， 獲取使用者繫結手機號時， 傳送一條簡訊驗證碼。 但是在實際業務中， 你的小程式會有更多地方使用到簡訊驗證碼功能… 一、 小程式簡訊驗證碼作用 下面的場景， 會經常用到手機

微信小程式關於tabBar的底部圖示不顯示問題

"list": [ { "pagePath": "pages/home/home", "iconPath": "pages/images/home.png", "selectedIconPath": "

海外小程式微信支付，微信小程式跨境支付，小程式境外支付

在上一篇文章《167個國家和地區可以開通微信海外小程式》 你已經瞭解境外公司可以申請微信小程式， 可以把你的商品和服務， 在小程式中展示。 想要在小程式裡完成交易， 必須涉及到線上支付的問題， 很多人

微信小程式檔案上傳，圖片上傳

1：xml <view style="margin-top: 20px" class="weui-flex">   <view style="width: 35%;font-size: 0.7em">證件照片</view>   <

微信小程式下拉選項，回撥輸入框

wxml: <view class='select_box'>     <view class='select' catchtap='selectTap'>         <text class='select_text'>{{sele

微信小程式卡片支援提醒，附近的小程序升級 | 一波新能力

微信小程式的新能力，有「一大波」要和大家見面。 小程式新增帶有狀態的群分享卡片、區域網通訊、頁面支援同步旋轉、圖片壓縮介面等功能。你的小程式可以更好地進行使用者留存、在特殊場景下使用者體驗更好。 門店漲人氣、提高營業額……「附近的小程式」升級，新增服務分