[微信小程式]開發中遇到的一些“坑”

NEPTUNE.發表於2018-04-13
微信小程式

最近公司開始做一些小程式專案，總結了小程式開發中遇到的一些坑，小程式新手，歡迎指點。

  1. css裡不可是使用background做背景圖，在手機上不顯示；

  2. 如果頁面有超過四次的跳轉，不可以使用 wx.navigateTo（）方法，可以使用wx.redirectTo（），在需要跳轉的標籤寫上open-type=“redirect”。

  3. 如果有頁面底部有小程式自帶的tab切換，頁面上也有點選事件可以與之跳到同一個頁面，不可以使用 wx.navigateTo（）,需要用wx.switchTab跳轉。

  4. 下拉重新整理：在需要的頁面的 json 中新增{"enablePullDownRefresh":true}該行程式碼，同時在頁面重新整理完成後新增:

wx.hideNavigationBarLoading() //完成停止載入
wx.stopPullDownRefresh() //停止下拉重新整理，防止在安卓手機下拉後不回到頂端
複製程式碼
  1. 儘量不要傳" "和"0"等值到後臺，小程式會預設為 null 或 undefined ;
  2. 彈出層，如果超過六個字，不可以用微信自帶的方法，要用：
//在頁面任意地方新增
<view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> 
複製程式碼
//在app.css中新增
.ad_popError{ 
background: #000; 
color: #fff; 
height: 58rpx; 
line-height: 58rpx; 
font-size: 24rpx; 
text-align: center; 
position: absolute; 
left: 10%; 
top: 50%; 
width: 80%; 
border-radius:5px;
z-index:3; 
margin-top:-29rpx;
opacity: 0.6;
}

複製程式碼
//在js中新增方法：
ohShitfadeOut() {
var fadeOutTimeout = setTimeout(() => {
this.setData({ popErrorMsg: '' });
clearTimeout(fadeOutTimeout);
}, 2000);
},

複製程式碼
//在需要彈出的地方新增：
that.setData(
{ popErrorMsg: "提示語" }
);
that.ohShitfadeOut();
return;

複製程式碼
  1. 如果有需要進入頁面就重新整理的地方，介面路徑要寫在 onshow 裡，不需要重新整理的頁面寫在 onload 裡，否則每次都重新載入會又慢又卡, 但是也不要把所有的介面都寫在 onshow 裡會浪費流量。
  2. 跳轉頁面在 url 上帶引數大小寫問題：例如：標籤上的 data-headerImg=‘{{item.header}}’,在 js 中，headerImg 被預設為 headerimg，不識別大寫字母。
  3. 如果用微信自帶的掃一掃功能跳轉到小程式的指定頁面，小程式規定只能新增50個路徑。
  4. 擷取後臺返回資料等，只能在 js 中進行操作，不能在 html 中擷取。
  5. 後臺返回list資料往頁面中賦值是，不可以用for迴圈進行賦值，需要用小程式的方法在html中寫wx:for="{{items}}",如果在for迴圈中用setData進行賦值，頁面上顯示的是都是最後一條資料的值。
  6. 圖片路徑的反斜槓自動轉成正斜槓。
  7. css中font-weight:lighter,在 ios 中識別，（更細） 在 android 上不識別（正常）
  8. 動態倒數計時要寫在onload裡。
  9. 微信本身的 Bug 引發的相容性問題有個現成的例子，就是 wx.request() 返回的狀態碼 res.statusCode 的值在 iOS 下是 int 型資料，而在 Android 6.0.1 上卻是 String 型資料。更規範的方法是使用parseInt(res.statusCode) === 200 來實現。
  10. 微信暱稱是中文時，有時需要轉碼，encodeURIComponent（）。
  11. 如果小程式只有開調式可以調取資料，這時要考慮程式碼裡的域名和設定域名是否一樣。

相關文章