頂部導航開始 -->

微信小程序的各種踩坑集合

一、開發微信小程序遇到的坑

1、 {{}} 不能執行方法,只能處理簡單的運算如 “+ - * /”,比如遇到遍歷list,每個item的金額需要格式化,只能在js里預先格式化好再setData一遍( ╯□╰ )

2、只能通過,只能通過,只能通過setData()更新視圖,坑..........

3、我們規定頁面路徑只能是五層,請盡量避免多層級的交互方式。

4、A頁面-->B頁面,B頁面返回A,如何觸發A的刷新,不增加頁面層級。 暫時想到的方案:在A頁面的onshow事件里寫A的初始化數據邏輯。

5、undefined 當作字符串處理 if(xxx == "undefined") 【后期版本迭代優化了】

6、遇到奇怪的問題(如樣式等)先重啟工具,百試不爽

7、不支持本地web字體(需要使用線上字體),經測試發現一些安卓就是不能正常顯示。幾經折騰才發現原來還要存放字體的服務器要支持跨域。尼瑪,手機上調試也不報錯,差點放棄web字體了。卡了好久,坑.............

8、本地資源無法通過 css 獲取 可以使用網絡圖片,或者 base64,或者使用 <image/> 標簽

9、不能直接操作 Page.data 【避免在直接對 Page.data 進行賦值修改,請使用 Page.setData 進行操作才能將數據同步到頁面中進行渲染】

10、數字鍵盤用 type="digit"

11、已用 https,但報無法建立與該服務器的安全連接是什么情況【需要 nginx 配置一下 https 的加密標準為tls1.2及以上】

12、wx.setStorage(OBJECT) 【目前每個小程序限制5M】

13、數據監控【微信后臺:事實訪問次數/昨日概況/累計訪問用戶數/TOP受訪頁】

14、微信調試神器,ngrok,見 ngrok

15、view 添加點擊效果[需要開啟hover效果]:<view hover hover-class="item-hover">

16、用戶授權調試方法【開發工具-》清除手機授權數據 (緩存-清除手機授權數據) 】

17、安卓手機上小程序第一次加載時候首頁時候, onshow方法會莫名其妙加載兩遍,而同樣在iphone下卻不會,由于需要在onshow里面觸發獲取用戶信息,所以系統加載兩次onshow會導致后臺報錯。。。

18、禁止頁面下拉: 設置 "disableScroll": true 。

19、安卓下會出現getAppConfig:fail,無法獲取userInfo。微信問題,下載最新的微信安裝包

20、后臺不能接受POST數據,但是可以接收GET請求參數

    url: url,

    data: data,

    method: "POST",

    dataType: "json",

    header: {

      'content-type': 'application/x-www-form-urlencoded' //==> 此處若為application/json則服務端無法獲取POST的參數

    }

21、小程序第一次啟動用戶拒絕授權后,下一次無法喚起授權彈框,默認記住上一次用戶的選擇。暫時沒有找到解決方法,微信也沒有相關解析。【2017-01-10】

22、跳轉到有tabbar的頁面一定要用 wx.switchTab().這個在各個群里幾乎每天都有人問到!!!

22、綁定開發者/體驗者時記得去手機上確認邀請。(超多人問)

23、 微信后臺更新了request合法域名,可以直接去微信開發工具-->項目-->配置信息-->刷新,立馬生效。

24、 使用wx:for遍歷的時候最好加上wx:key="{{item.id}}",如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略,但是如果遍歷的數組會發生改變,則有可能導致數據順序會改變。

25、小程序開發頁面便利之處在于rpx, 所以設計稿建議用iphone6尺寸。flex布局可以參考

二、小程序開發前相關配置

1、登錄--->管理員掃二維碼-->設置-->開發設置-->生成AppSecrect

2、服務器配置 登錄--->管理員掃二維碼-->設置-->開發設置-->服務器域名-->掃二維碼

3、綁定開發者 用戶身份-->開發者-->二維碼 開發者最多10人

三、小程序發布

發布只能用管理員賬號。步驟如下:開發工具中退出開發者賬號  管理員掃碼登錄開發者工具,上傳-->微信后臺設為體驗版本-->審核-->發布

注意: 審核時間不定,2-6天

四、審核不通過原因收集

1、小程序簡介沒有介紹小程序功能

2、類目與頁面提供的內容不一致

3、小程序提供的服務和內容必須是正式的,不能以測試內容提交,多次以測試內容提交

4、含有聲音視頻內容,請補充相關對應類目

5、首頁圖片與文字有互相重疊,建議優化

6、搜索框及少數下才能選中,頁面評論點擊無響應,頁面圖片分辨率尺寸失真

7、部分圖片顯示被壓縮體檢不好

8、有賬號體系的小程序,除自有登錄方式,必須支持微信授權登錄

9、必須登錄才能使用的服務,請提供測試賬號

10、存在虛擬物品在線交易, ios系統需要走IAP,小程序暫不支付,請留意后續

11、小程序服務類目所對應的頁面中的核心內容必須與該類目一致。

12、必須保證用戶在該頁面能使用該服務類目,不得隱藏,不得進行多次跳轉

13、不得展示和推薦第三方小程序。示例:不能做小程序導航,不能做小程序鏈接互推,小程序排行榜等

14、小程序的頁面內容中,存在誘導類行為,包括但不限于誘導分享、誘導添加、誘導關注公眾號、誘導下載等,要求用戶分享、添加、關注或下載后才可操作的程序,含有明示或暗示用戶分享的文案、圖片、按鈕、浮層、彈窗等的小程序,通過利益誘惑誘導用戶分享、傳播的小程序,用夸張言語來脅迫、引誘用戶分享的小程序,強制或誘導用戶添加小程序的,都將會被拒絕;

15、 禁止視頻、音樂、語音等多媒體的自動播放

16、 如果小程序有賬戶系統,必須提供能正常使用且易于發現的“退出”賬戶選項

17、小程序內容不能包含賭博、競猜和抽獎的。

18、小程序的頁面內容中,不能存在測試類內容;示例:算命,抽簽,星座運勢等。

五、code

1、封裝微信發起請求接口,登錄失效默認自動發起登錄請求


/**

 * 發起的是 HTTPS 請求

 * @pram url: 請求地址,協議必須為https

 * @pram data 請求參數請求參數

 * @param success 請求成功回調

 * @param fail 請求失敗回調

 * @param complete 請求完成(成功或者失敗)回調

 */

function request(url, data, success, fail, complete) {

  var _url = url,

      _data = data,

      _success = success,

      _fail = fail, 

      _complete = complete;


  wx.request({

    url: url,

    data: data,

    method: "POST",

    dataType: "json",

    header: {

      'content-type': 'application/x-www-form-urlencoded',

      'Client-Agent': getSystemInfo(),

      'WX-SESSION-ID': wx.getStorageSync(constant['WX-SESSION-ID']) //每次請求帶上登錄標志

    },

    success: function(res) {

      if(res.data.code == "-9999") { //會話失效重新登錄

        requestLogin(function(){

          constant['NUM_TRY_LOGIN'] ++;

          //設置請求上限,防止重復提交并死循環

          if(constant['NUM_TRY_LOGIN'] < constant['LIMIT_NUM_TRY_LOGIN']) {

            request(_url, _data, _success, _fail, _complete);

          }

        });

        return;

      }

      if(res.data.code == "0") {

         if(typeof _success == "function") {

           _success(res.data);

         }

      } else {

         wx.showToast({title: res.data.msg, icon: 'loading', duration: 2000});

         return;

      }

    },

    fail: function(res) {

      if(typeof _fail == "function") {

        _fail(res);

      }

      if(typeof _fail == "string") { //請求失敗的彈框提示

        wx.showToast({title: _fail, icon: 'loading', duration: 2000});

      }

    },

    complete: function(res) {

      if(typeof _complete == "function") {

        _complete(res);

      }

    }

  });

}

2、請求登錄接口

/**

 * 請求登錄,獲取用戶相關信息

 * @param callback

 */

function requestLogin(callback) {

  var _callback = callback;

  wx.login({

      success: function (event) {

        // 獲取到請求碼,繼續請求用戶的基本信息

        if(event.code) {

          var code = event.code;

          wx.getUserInfo({

              success: function (res) {

                var data = {

                  code: code,

                  encryptedData: res.encryptedData,

                  iv: res.iv,

                  signature: res.signature,

                  rawData: res.rawData

                }

                var url = domain + "/wx_xxx"; //請求登錄地址

                request(url, data, 

                  function(res){ //success

                    if(res.code == "0") {

                       //此處可以將服務端返回的登錄狀態保存起來

                       wx.setStorageSync(constant['WX-SESSION-ID'], res.object.sessionId);

                       if(typeof _callback == "function") {

                         _callback();

                       }

                    }

                  },

                  function(res){ //fail

                    wx.showToast({title: '請求登錄失敗',icon: 'loading', duration: 2000});

                  }

                );

              },

              fail: function(res) {

                //用戶拒絕授權

                if(res.errMsg == "getUserInfo:cancel" || res.errMsg == "getUserInfo:fail auth deny") { 

                  wx.redirectTo({ //跳轉至未授權頁面

                    url: '../xxx-page/xxx-page'

                  });

                }

              }

          })

        } else {

          wx.showToast({title: '微信登錄失敗',icon: 'loading', duration: 2000});

        }

      },

      fail: function(res) {

        wx.showToast({title: '微信登陸失敗!',icon: 'loading', duration: 2000});

      }

  });

}

自學php博客
請先登陸后發表評論
  • 最新評論
  • 總共0條評論
  • ? 2014-2016 zixuephp.cn 版權所有
  • ICP證:皖ICP備16012107號
  • 聯系郵箱:[email protected]
  • 交流請加微信:weibobf2899 或掃下方二維碼
双大床红利扑克1手APP