快捷導(dǎo)航

微信小程序開發(fā)中遇到問題總結(jié)

更新時(shí)間：2017年02月14日 15:41:43 作者：_NKi

這篇文章主要介紹了微信小程序開發(fā)中遇到問題總結(jié)的相關(guān)資料,需要的朋友可以參考下

微信小程序開發(fā)中遇到問題總結(jié)

1.由于小程序wx.request()方法是異步的，在app.js執(zhí)行ajax后，各分頁加載app.js的全局?jǐn)?shù)據(jù)時(shí)，無法按順序加載。例：

//app.js
App({
  ajax:function(){
    let that = this;
    wx.request({
      url: 'https://a.com/url.php',
      method: 'GET',
      success: function(e){
        that.data = 123;
      }
    })
  };
})
//content.js
let app = getApp()
Page({
  getData: function(){;
    app.ajax();
    console.log(app.data); //undefined
  }
})

解決方法，使用Promise異步函數(shù)：

//app.js
App({
  ajax:function(){
    let that = this;
    let promise = new Promise(function(resolve, reject){
      wx.request({
        url: 'https://a.com/url.php',
        method: 'GET',
        success: function(e){
          that.data = 123;
          resolve();
        }
      })
    });
  };
})
//content.js
let app = getApp()
Page({
  getData: function(){;
    app.ajax().then(()=>{
      console.log(app.data); //123
    });
  }
})

2.圖片只能獲取原始寬高，無法獲取現(xiàn)有寬高。不過image標(biāo)簽封裝了mode屬性，可以根據(jù)需求自行設(shè)置。

3.每個(gè)image標(biāo)簽底部有一條透明間隔，非padding，非margin。在圖片前面做遮罩層時(shí)可能會(huì)被坑。

4.網(wǎng)絡(luò)請(qǐng)求必須部署https

5.配置tabBar時(shí)，list參數(shù)中的pagePath參數(shù)至少需要包含app.json里pages數(shù)組中的第一個(gè)路徑，否則會(huì)導(dǎo)致tabBar不顯示。

6.tabBar跳轉(zhuǎn)時(shí)無法帶參數(shù)，解決方法：

//search.js
var app = getApp();
Page({
  confirm: function(e){
    //獲取數(shù)據(jù)，添加到全局
    let val = e.detail.value;
    app.searchWord = val;
    this.jump();
  },
  jump: function(){
    //跳轉(zhuǎn)tabBar
    wx.switchTab({
      url: '../index/index',
    });
  },
});
 
//index.js
var app = getApp();
Page({
  onShow: function(e){
    //獲取全局?jǐn)?shù)據(jù)
    let val = app.searchWord;
  }
});
//需要傳遞參數(shù)的頁面在跳轉(zhuǎn)前將數(shù)據(jù)添加到app.js里。需要接受參數(shù)的頁面在onShow方法接受之前添加到app.js的數(shù)據(jù)。

7.小程序wx.request()方法請(qǐng)求的url必須是https開頭

8.wx.request()使用post方法請(qǐng)求時(shí)，還需要加上header，header[content-type]值為application/x-www-form-urlencoded。例：

wx.request({
  url: 'https://a.com/url.php',
  data: {message: 123},
  method: 'POST',
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  success: function(e){
    console.log(e)
  }
});

9.小程序無法加載html標(biāo)簽，同時(shí)數(shù)據(jù)渲染也無法渲染wxml標(biāo)簽（<view></view>等），可以使用wxParse.js來處理相關(guān)數(shù)據(jù)。

10.安卓無法渲染wx.request()請(qǐng)求的數(shù)據(jù)。

檢測返回的數(shù)據(jù)是否有BOM頭（3個(gè)字符的空白）。安卓的wx.request解析不會(huì)跳過BOM頭，導(dǎo)致數(shù)據(jù)返回的是字符串，而不是對(duì)象或者數(shù)組。

例：

返回的數(shù)據(jù)是：(3個(gè)字符的空白){a:1, b:2}

解析的數(shù)據(jù)是：'{a:1, b:2}'(字符串)，而不是{a:1, b:2}(對(duì)象)

由于不是對(duì)象，模板渲染之類會(huì)無法正常進(jìn)行。解決方法，后臺(tái)返回?cái)?shù)據(jù)前去掉BOM頭就行。如果后臺(tái)不會(huì)去BOM頭，可以在前端去除，但是wx.request如果dataType缺省，會(huì)默認(rèn)為json并自動(dòng)解析，導(dǎo)致無法去除BOM頭。

解決方案：

wx.request({
  url: url,
  method: 'GET',
  dataType: 'txt',
  success: function(e){
    let json = e.data.trim();
    let arr = JSON.parse(json);
  }
});

dataType改為json以外的格式，避免小程序自動(dòng)解析json字符串，然后對(duì)返回的數(shù)據(jù)用 trim() 方法去掉空白，最后解析json字符串就行。

11.調(diào)試時(shí)多行省略（-webkit-line-clamp）正常，發(fā)布時(shí)多行省略無效。

解決方案：如果不想重新審核，讓后臺(tái)截?cái)嗑秃?/p>

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: