WeChat ミニプログラムの開発中に発生する問題の概要

この記事は、WeChat ミニ プログラムの開発で発生した問題の概要に関する関連情報を主に紹介します。必要な友人は参照してください

WeChat ミニ プログラムの開発で発生した問題の概要

1。 mini プログラムの wx.request( ) メソッドは非同期であるため、app.js が ajax を実行した後、各ページが app.js のグローバル データを読み込むときに、順番に読み込むことができません。例:

//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 非同期関数を使用します:

//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 画像は元の幅と高さのみを取得できますが、既存の幅と高さを取得することはできません。ただし、イメージ タグはモード属性をカプセル化しており、必要に応じて設定できます。

3. 各画像タグの下部には、パディングやマージンではなく、透明なスペースがあります。画像の前にマスクレイヤーを作成するときに行き詰まってしまうことがあります。

4. ネットワークリクエストはhttps

をデプロイする必要があります。tabBarを構成する場合、listパラメータのpagePathパラメータには少なくともapp.jsonのpages配列の最初のパスが含まれている必要があります。そうでない場合、tabBarは表示されません。

6. TabBar はジャンプ時にパラメーターを受け取ることができません。解決策:

//search.js
var app = getApp();
Page({
  confirm: function(e){
    //获取数据，添加到全局
    let val = e.detail.value;
    app.searchWord = val;
    this.jump();
  },
  jump: function(){
    //跳转tabBar
    wx.switchTab({
      url: '../index/index',
    });
  },
});
 
//index.js
var app = getApp();
Page({
  onShow: function(e){
    //获取全局数据
    let val = app.searchWord;
  }
});
//需要传递参数的页面在跳转前将数据添加到app.js里。需要接受参数的页面在onShow方法接受之前添加到app.js的数据。
　　

7. ミニ プログラムの wx.request() メソッドによって要求される URL は https

8.wx.request() で始まる必要があります。 post メソッド リクエストする場合、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 タグをロードできず、データレンダリングでは wxml タグ (89c662c6f8b87e82add978948dc499d2de5f4c1163741e920c998275338d29b2 など) をレンダリングできません。wxParse.js を使用して関連データを処理できます。

10. Android は、wx.request() によって要求されたデータをレンダリングできません。

返されたデータに BOM ヘッダー (3 文字の空白) があるかどうかを検出します。 Android の wx.request 解析では BOM ヘッダーがスキップされないため、データはオブジェクトまたは配列ではなく文字列として返されます。

例:

返されるデータは次のとおりです: (3 文字の空白){a:1, b:2}

解析されたデータは次のとおりです: '{a:1, b:2}' (文字列) {a:1, b:2} (オブジェクト)

オブジェクトではないため、テンプレートのレンダリングなどが正常に動作しません。解決策は、バックグラウンドでデータを返す前に BOM ヘッダーを削除することです。 BOM ヘッダーがバックグラウンドで削除されない場合は、フロントエンドで削除できますが、wx.request の dataType がデフォルトの場合、デフォルトで json になり、自動的に解析されるため、BOM ヘッダーを削除できません。 。

解決策:

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

dataTypeをjson以外の形式に変更して、アプレットが自動的にjson文字列を解析しないようにし、次にtrim()メソッドを使用して返されたデータから空白を削除し、最後にjson文字列を解析します。

11. 複数行の省略 (-webkit-line-clamp) はデバッグ中は正常ですが、公開時には無効です。

解決策: 再レビューしたくない場合は、背景を切り詰めてください

読んでいただきありがとうございます。皆様のお役に立てれば幸いです。このサイトのご支援に感謝いたします!

以上がWeChat ミニプログラムの開発中に発生する問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。