搞小程序遇到的問題及解決方案（持續更新）

 

1、關於頁面尺寸問題：設計稿使用設備寬度750px比較容易計算，750px的話1rpx=1px，這樣的話，設計圖上量出來的尺寸是多少px就是多少rpx，不用太費力換算，對開發比較友好。

2、在頁面初始化時，我們要調用接口獲取數據，這時我們要將獲取到的數據掛載在全局data下，光比如，光用 this.data  = res,這樣數據肯定是掛不上的，要調用小程序的特定方法才行，如下

this.setData({

　　data:res

})

 

 3、微信小程序 scroll-view在安卓手機上可能會出現滾動條的情況，可通過如下樣式解決：

::-webkit-scrollbar{
  width:0;
  height: 0;
  color:transparent;
}
或者
::-webkit-scrollbar{

　　display:none;

}

4、關於小程序兼容性問題，要多在開發者工具中切換不同機型進行查看頁面布局問題。

 

5、封裝promise請求

function getRequest(url, data) { var getRequest = wxPromisify(wx.request); return getRequest({ url: url, method: 'GET', data: data, header: { 'Content-Type': 'application/json' } }) }

function wxPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function (res) { if (isHttpSuccess(res.statusCode)) { //成功
 resolve(res) } else { reject(res) } } obj.fail = function (res) { //失敗
 reject(res) } fn(obj) }) } }

6、組件式寫法，之前項目的寫法是用include把其他模塊的 xml ，引到index.xml，css 也是import到 index.wxss，然后關於各個模塊的操作代碼就全部都堆積到了 index.js。其實可以在這基礎上優化，但是還是不夠優雅。

{這里順便說下 WXML提供兩種文件引用方式import和include。

import可以在該文件中使用目標文件定義的template。

import有作用域的概念，即只會import目標文件中定義的template，而不會import目標文件import的template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

而include，include可以將目標文件除了<template/>的整個代碼引入，相當於是拷貝到include位置。}

 

后來，決定改下，改成組件式寫法，就是頁面分成諸多帶有各自業務邏輯的子組件。

代碼結構就是 components 下 帶有多個子目錄，各個字目錄下新建Component，這是開發工具會自動創建子組件需要的文件，如

js里面就可以寫關於該組件的業務邏輯，wxss寫樣式即可，同時需要在父級的json文件中引用該子組件，如

 

然后在index.xml引用即可 ，如<a></a>,當父級需要給子傳數據時，可以<a data="{{父級中數據}}"></a>，子接收時可以其中properties下的data即父級傳過來的數據。

7、

App()必須在app.js中注冊，且不能注冊多個。

不要在定義於App()內的函數中調用getApp()，使用this就可以拿到app實例。

不要在onLaunch的時候調用getCurrentPage()，此時page還沒有生成。

通過getApp()獲取實例之后，不要私自調用生命周期函數。

 

8、在循環嵌套,如下：需要注意的是，每次for循環時，每個item應該是有各自的作用域一樣，並不會導致沖突。

<view wx:for="{{item.tm_hot_ad}}"  wx:for-item="item"  wx:key="index">
　　<view wx:for="{{item.tm_hot}}"  wx:for-item="item"  wx:key="index">

　　</view>
</view>