mpvue 小程序開發爬坑彙總

<!-- 小程序的爬坑記錄 -->

1 微信小程序之動態獲取元素寬高 var obj=wx.createSelectorQuery();

2 微信小程序圖片自適應 <image class="themeImg" :src="themeImg" mode="widthFix" /> mode設置爲widthFix 寬度100%

3.小程序上拉加載 下拉刷新

4.經過 this.$root.$mp.query 進行獲取小程序在 page onLoad 時候傳遞的 options。經過 this.$root.$mp.appOptions 進行獲取小程序在 app onLaunch/onShow 時候傳遞的 options。

5 style 支持的語法:

動態給生成節點賦樣式

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>

<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

6 微信小程序地圖markers 動態數據渲染的坑

因爲異步設置值的過程，組件已經渲染。可是map變量沒有預約義是undefined狀態，map初始化拿不到數據直接報錯了，而異步過來又變成動態更新致使了wxml須要從新渲染map組件的狀況致使的。由於官方文檔有提到：

地圖組件的經緯度必填, 若是不填經緯度則默認值是北京的經緯度。 標記點markers只能在初始化的時候設置，不支持動態更新。

只能初始化一次，所以致使每次都是顯示的初始化信息。

 

wx:if會渲染一下組件，那咱們按照這個思路給他加個if就好了

<map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>

默認map是false,就是加載時不渲染map組件，等ajax回來後把map設置爲true，這樣就動態渲染成你要的地址了

7.小程序顯示彈窗時禁止下層的內容滾動

 用 catchtouchmove="return"

//此處爲彈窗內容
<view  catchtouchmove="return"> //外層加 catchtouchmove="return"僅觸摸背景區域時不穿透底部.
    <view  catchtouchmove="return"></view> //在每一個小的區域內加 catchtouchmove="return"
    <view> // 有須要滾動的列表區域位置不要加 catchtouchmove="return", 不然列表沒法滾動
        <view>滾動列表1</view>
        <view>滾動列表2</view>
        <view>滾動列表3</view>
        <view>滾動列表4</view>
    </view>
</view>

8.小程序使用地圖導航功能進行地圖導航

wx.getLocation({//獲取當前經緯度
      type: 'wgs84', //返回能夠用於wx.openLocation的經緯度，官方提示bug: iOS 6.3.30 type 參數不生效，只會返回 wgs84 類型的座標信息  
      success: function (res) {
        wx.openLocation({//​使用微信內置地圖查看位置。
          latitude: 22.5542080000,//要去的緯度-地址
          longitude: 113.8878770000,//要去的經度-地址
          name: "寶安中心A地鐵口",
          address:'寶安中心A地鐵口'
        })
      }
    })

 

 

wx.getLocation({//獲取當前經緯度
      type: 'wgs84', //返回能夠用於wx.openLocation的經緯度，官方提示bug: iOS 6.3.30 type 參數不生效，只會返回 wgs84 類型的座標信息  
      success: function (res) {
        wx.openLocation({//​使用微信內置地圖查看位置。
          latitude: 22.5542080000,//要去的緯度-地址
          longitude: 113.8878770000,//要去的經度-地址
          name: "寶安中心A地鐵口",
          address:'寶安中心A地鐵口'
        })
      }
    })

 

 

 

9.隱藏canvas的狀況下不能導出圖片？

如今須要作一個圖片處理的功能 可是又不須要canvas顯示在頁面上，

我嘗試了不少隱藏的方法 結果都是兩種：

1. canvas始終顯示並且顯示在最上層 比debug的頁面都高
2. canvas display:none 可是沒法經過canvasToTemoFilePath導出圖片
3. 父級寬高0，overflow:hidden 無效 ，canvas很霸道...

解決方案： 把canvas定位到了屏幕外

 

10.小程序更新迭代很快 ，建議多去看看小程序官方api文檔