WeChat ミニプログラムの開発方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-24 09:46:06

オリジナル

1386 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。