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

WeChatミニプログラムの開発で遭遇した問題のまとめ

1.ミニプログラムのwx.request()メソッドは非同期であるため、app.jsがajaxを実行した後、各ページがアプリのグローバルデータをロードします。 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() で始まる必要があります。 use 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 サイトに注目してください。