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. 很多時候小程序生成海報下載圖片 在編輯器上下載的是好的但是在真機上不顯示圖片 ，原因大部分是因為 下載域名的白名單那里沒有配置，配置一下就好了。

 

 

 

 

 

 

 

11  小程序繪制海報時候 繪制圖片 網絡圖片一定要先把圖片下載后 再去繪制.

 

 

12. cover-view需要使用position:fixed  才能實現效果

13 在做輪播圖圖層換裝的時候，每個輪播的圖片是可以切換 ，那么就需要管理三個數據源， 數據源狀態管理的時候，多次切換的時候 出現了數據狀態異常的bug 在排查了各種問題后 原來發現 操作修改數據狀態的時候沒有使用深拷貝，

用的淺拷貝 ，最后使得數據源 狀態被更新了，最后使用深拷貝后就好了

 

 14 小程序九月份登錄新規定 ，對用戶信息的獲取有了更加嚴格的要求 ，雖然吐槽聲一篇，還是需要按照指導規范 讓用戶能夠初步了解小程序功能后再去讓用戶登錄注冊

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