WeChat ミニプログラムの開発方法

今回は、WeChat ミニ プログラムの開発方法と、WeChat ミニ プログラムを開発する際の 注意事項 について説明します。実際の事例を見てみましょう。

no.1 背景画像が表示されません

WeChat アプレットでは、ユーザーが背景画像をカスタマイズできますが、背景画像のパスとアドレスは制限されており、以前は相対パスを使用して書き込みが行われていました。開発者ツールでも背景画像は表示されるので問題ないと思っていましたが、プレビューしてみると背景画像が表示されないことがわかりました。これが今回紹介する最初の落とし穴です。ローカルなイメージになります。

解決策:

まず、オンライン画像をbase64コードに変換する方法を使用します。この方法の利点は、画像がローカルまたはサーバーにほとんど保存されず、簡単であることです。欠点は、画像の処理効果が小さいことです。さらに良いことに、大きな画像のコードは非常に長いので、見たくありません...

次に、画像

をサーバーにアップロードします。画像アドレスを引用するだけで便利で早いですが、変更するのが面倒でサーバースペースを消費します。

no.2プルダウンがonPullDownRefreshをトリガーしない

//下拉事件
onPullDownRefresh: function() {
 console.log("好用不?")
 wx.showToast({
  title: '没事儿别乱拉',
  icon: 'success',
  duration: 2000
 })
},
//上拉事件
onReachBottom: function() {
 wx.showToast({
  title: '没事儿别乱拽',
  icon: 'success',
  duration: 2000
 })
}

上記のコードは全く問題ありませんが、プレビューしてみると、使いやすいのはプルアップのみで、プルダウン時にはまったく反応しないことがわかりました. これは公式の方法ですか？

実際、いいえ、その理由は、公式のデフォルトではドロップダウン イベントがオフになっているためです。コードは次のとおりです。app.json ファイルに移動して、パラメーターを変更します。 no.3 重力感知APIの監視をキャンセルする方法

WeChatアプレットはシェイクAPIインターフェースを提供していませんが、重力感知API「wx.onAccelerometerChange(CALLBACK)」を提供しており、このメソッドを使用してシェイクAPIをシミュレートできます。 WeChat のシェイク関数のコードは次のとおりです:

"window": {
 "enablePullDownRefresh":true //开启下拉功能
}

しかし、ミニ プログラムでタブバーを有効にする必要がある場合、重力感知 API を有効にすると、タブバーの下にあるすべてのページが重力感知データを監視し、シミュレートされたシェイクによってシェイクが生成されます。すべてのページで結果が得られますが、これは私たちが望んでいることではありません。タブバーの下のページの 1 つで重力感知データを取得できるようにしたいだけです。その後、それが現在のページにあるかどうかの判断を追加する必要があります。判定結果に基づいて重力検知 API の監視を有効にする コードの変更は次のとおりです。

Page({
 onShow: function () {
  wx.onAccelerometerChange(function (e) {
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  
 }
})

変更 プレビューを再コンパイルすると、目的の効果が得られます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Vue キー修飾子のイベント処理手順の詳細な説明

JS を使用してハッシュ テーブルを実装する方法

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