今回は、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 }) }
WeChatアプレットはシェイクAPIインターフェースを提供していませんが、重力感知API「wx.onAccelerometerChange(CALLBACK)」を提供しており、このメソッドを使用してシェイクAPIをシミュレートできます。 WeChat のシェイク関数のコードは次のとおりです: "window": {
"enablePullDownRefresh":true //开启下拉功能
}
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 キー修飾子のイベント処理手順の詳細な説明以上がWeChat ミニプログラムの開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。