WeChat ミニプログラムで底部の吸引ボタンを iPhone X に適合させる方法 (詳細なチュートリアル)-jsチュートリアル-php.cn

WeChat ミニプログラムで底部の吸引ボタンを iPhone X に適合させる方法 (詳細なチュートリアル)

亚连

リリース： 2018-06-23 15:35:21

オリジナル

2049 人が閲覧しました

この記事では、主に下部ボタンをiPhoneに適応させる解決策を紹介します。なぜなら、iPhoneの貧弱なエクスペリエンスの主な欠点は、商品詳細ページとショッピングの下部にあるボタンバーです。カートはホームインジケーターバーと重なるため、以下に示すように、下のボタンをクリックすると、誤ってジェスチャー操作がトリガーされやすくなります。

スクリーンショットはインターネットからのものです。削除がバグである場合は、削除する必要があります。それがエクスペリエンスの問題である場合は、最適化する必要があるため、すぐに iPhone X を入手して調査を開始しました。

Web ページでの適応は良好で、ビューポートメタタグと次の処理ソリューションが使用されています。詳しくはこちらをご覧ください

{
 position: fixed;
 bottom: 0;
 width: 100%;
 height: constant(safe-area-inset-bottom);
 background-color: #fff;
}

ログイン後にコピー

しかし、四隅が切れている様子から、ミニプログラムのビューポートフィットがデフォルトでカバーされていることが推測できますが（性能から推測）、これを変更するインターフェースがないため、Web ページ側は、constant(safe-area-inset-bottom) と組み合わせた viewport-fix=cover の適応ソリューションは、小規模なプログラムには適していません。現時点では、iPhone X やその他の特殊な形状の画面用の特別なインターフェイスやフィールドを備えたミニプログラムは確認されていません。ミニプログラムの下部タブバーを iPhone X に適応させると、単純に白い下部バーが追加され、元のタブバーの位置が改善されます。なぜそう言えるのでしょうか。これはショッピングカートページから確認できるため、ショッピングカートページの下部の吸引操作はposition:fixed;bottom:0; によって実装されていませんが、上部の値は windowHeight 自体の高さに基づいて計算され、それによってシミュレートされます。新しいバージョンのプログラムが iPhone X に適用された後、ショッピングカートの下部にあるボタンが半分覆われ、上記の結論に至りました。

本題に戻りますが、この値を取得するための特別な解決策はないため、wx.getSystemInfo インターフェースを介してのみデバイス情報を取得できます。このインターフェースの使用方法は次のとおりです。

wx.getSystemInfo({
 success: function(res) {
  console.log(res.model)
  console.log(res.pixelRatio)
  console.log(res.windowWidth)
  console.log(res.windowHeight)
  console.log(res.language)
  console.log(res.version)
  console.log(res.platform)
 }
})

ログイン後にコピー

モデルはモデルであり、デバイスのその他の情報。モデルに iPhone X が含まれている場合、デバイスは iPhone X と見なされます。これをエントリファイル app.js で検出し、isIpx フィールドをグローバルに追加し、結果を isIpx に割り当てます。

値は、たとえば製品詳細ページのサブページで読み取ることができます:

<!-- goods.wxml -->
<view class="button-group {{isIpx?&#39;fix-iphonex-button&#39;:&#39;&#39;}}">这是一个吸底按钮区域</view>
// goods.js
let app = getApp();
Page({
  data: {
    isIpx: app.globalData.isIpx?true:false
  }
})
/* app.wxss */
.fix-iphonex-button {
  bottom:68rpx!important;
}
.fix-iphonex-button::after {
  content: &#39; &#39;;
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

ログイン後にコピー

これで、iPhone X の下部の丸い角に適応する簡単な解決策が完成しました。

なぜ68rpxが使われるかというと、iPhoneの画面幅だからです

スクリーンショットはインターネットからのもので、侵害と削除です

上記は私がまとめたものです。未来。