目次
序文
現在のフォームでは、WeChat のミニ プログラムがホット スポットになっているため、実際のプロジェクトを実行する前に、どのように学習してマスターする必要がありますか?
このため、このコラムを特別に設定しました。学習しながら共有します。
この記事では、最初に wxss での rpx の適用と、アプレットのグローバル スタイルとローカル スタイルの構成を紹介し、次にウィンドウ ナビゲーション バーの構成方法を詳しく紹介します。
-
rpxについて
1. px(解像度)という単位は前回のHTMLの学習で習いましたが、コンポーネントを設定する際によく使う単位ですが、WeChatアプレットで使っている解像度の単位は何ですか? あれはrpx、それで、具体的に設定する価値があるほど彼の何が特別なのですか？
2. rpx は WeChat アプレット独自の画面自己適応のサイズ単位を解決します. 画面幅に合わせて自己適応できます. 画面のサイズに関係なく, 指定画面幅は 750rpx. サイズを設定します. rpx を介して要素とフォントを取得し、アプレットをさまざまなサイズで使用できます 画面の下で、rpx と px の間の変換を自動的に適応させることができます
特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px -
グローバル構成とローカル構成について
グローバル構成とローカル構成については、以前にも紹介しましたが、興味のある友人はそれらの前で考古学的調査を行うことができます! 次に、グローバル構成でよく使用される構成アイテムについて説明します!
如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！
1. グローバル構成で一般的に使用される構成アイテム
老规矩先用表格展示一下。
| 構成アイテム名 | 効果 |
|---|---|
| ページ | 現在のアプレットのすべてのページのストレージ パスを保存します |
| 窓 | アプレット ウィンドウの外観を設定する |
| タブバー | アプレットの下部に tabBar 効果を設定します |
| スタイル | 新しいバージョンのコンポーネントのオプションを有効にするかどうか |
-
リストページを表示するために、ページの最初のパスをリストのパスに変更し、WeChat アプレットのページにリストのコンテンツを表示するように変更しました。
-
window と tabBar 次に、構成で使用される領域を紹介する図を見てみましょう
-
style 先ほどボタンを紹介した時にもお見せしましたが、スタイルを削除すると、コンポーネントのスタイルが古いバージョンになります
-
機能図
话不多说，下面我们就来进入我们的导航栏目的讲解！
2、ウィンドウ ナビゲーション バー
ウィンドウ ナビゲーション バーの設定には、前の図に示されている最初の 2 つの領域が含まれます。次に、ウィンドウ ノードの一般的な構成項目を紹介します。
| 属性名 | タイプ | デフォルト | 効果 |
|---|---|---|---|
| ナビゲーションバーのタイトルテキスト | 弦 | 文字列 | ナビゲーション バーのタイトル コンテンツ |
| ナビゲーションバー背景色 | ヘックスカラー | #000000 | ナビゲーションバーの背景色を設定する（蛍光イエロー #ffa など） |
| ナビゲーションバーテキストスタイル | 弦 | 白 | ナビゲーションバーのタイトルの色を設定します（白黒のみ） |
| 背景色 | ヘックスカラー | #ffffff | ウィンドウの背景色 |
| backgroundTextStyle | 弦 | 暗い | ドロップダウン読み込みのスタイルを設定して、ダーク/ライトのみをサポートします |
| enablePullDownRefresh | ブール値 | 間違い | プルダウン リフレッシュをグローバルに有効にするかどうか |
| onReachBottomDistance | 番号 | 50 | ページ プル ボトム イベントのトリガーしきい値 (ページの下部からの距離は px です) |
我们所有的上述设置都是在 app.json 内的 window 里面进行设置！！！接下来我演示一下 navigationBarTitleText 和 下拉相关属性 ，剩下的配置项大家可以自行尝试！
2.1 navigationBarTitleText 構成アイテム
话不多说开始操作！
-
app.json を開き、ウィンドウを見つけます
-
ウィンドウには、次のデフォルト構成項目が表示されます
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, -
3 行目の navigationBarTitleText は、ナビゲーション バーのタイトル コンテンツの構成であることがわかります. デフォルトは Weixin です. たとえば、「ピッピの小屋」に変更しました.
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle":"black" }, -
結果を示す：
2.2 プルダウンリフレッシュの構成
プルダウン リフレッシュについては、誰もが頻繁に使用する必要があると思います.たとえば、携帯電話を使用してフリーズするときに、画面をプルダウンしてページをリロードする習慣があります。機能を実現しますか？
-
最初に app.json を開いてウィンドウ構成に入り、ドロップダウン関数を開きます
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#ffa", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle":"black", "enablePullDownRefresh": true }, -
最後の行で enablePullDownRefresh を true に設定します
-
結果を示す：
至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置
要約する
誰もが毎日幸せであるべきです、一緒に楽しく勉強しましょう！
