1. WeChat アプレットがシステム情報を取得する
WeChatのシステム情報を取得する関数はwx.getSystemInfo(OBJECT)です。
- オブジェクトパラメータの説明
| パラメータ | タイプ | 必須 |
|---|---|---|
| 成功 | 関数 | はい |
| 失敗 | 関数 | いいえ |
| 完了 | 関数 | いいえ |
- 成功コールバックパラメータの説明
| 属性 | 説明する |
|---|---|
| モデル | 電話機のモデル |
| ピクセル比 | デバイスのピクセル比 |
| 窓の幅 | ウィンドウの幅 |
| 窓の高さ | 窓の高さ |
| 言語 | WeChatで設定されている言語 |
| バージョン | WeChatのバージョン番号 |
| システム | オペレーティング システムのバージョン |
| プラットホーム | クライアントプラットフォーム |
2. CSS3 では「vm」と「vh」が導入されています
vm=view width ; vh=view height
上記でビューポート単位を呼び出すと、ブラウザ ウィンドウに近いサイズを定義できます
。次に例を示します。
view{
width: 100vw;
font-size: 80vw; /* 宽度为窗口100%， 字体大小为窗口宽度的10% */
}
view{
height: 100vh;
font-size: 80vh; /* 高度为窗口100%， 字体大小为窗口高度的10% */
}
3. 要素の高さを取得 wx.createSelectorQuery()//wxmlノード情報取得API
SelectorQuery オブジェクトのインスタンスを返します。select およびその他のメソッドを使用してこのインスタンス上のノードを選択し、boundingClientRect およびその他のメソッドを使用してクエリする必要がある情報を選択できます。
サンプルコード
Page({
queryMultipleNodes: function(){
var query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
res.dataset // 节点的dataset
res.width // 节点的宽度
res.height // 节点的高度
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
res.scrollX // 节点 scroll-x 属性的当前值
res.scrollY // 节点 scroll-y 属性的当前值
// 此处返回指定要返回的样式名
res.margin
res.backgroundColor
})
}
})
selectorQuery オブジェクトのメソッドのリスト
| 方法 | パラメータ | パラメータ |
|---|---|---|
| で | オブジェクトコンポーネント | セレクターの選択範囲をカスタムコンポーネントコンポーネント内に変更します。(最初は、セレクターはページ範囲内のノードのみを選択し、カスタム コンポーネント内のノードは選択しません。) |
| 選択する | セレクタ | セレクターは CSS セレクターに似ています |
| すべて選択 | セレクタ | 現在のページの下のセレクターに一致するノードを選択し、NodesRef オブジェクト インスタンスを返します。selectorQuery.select(selector) とは異なり、セレクターに一致するすべてのノードを選択します。 |
| ビューポートの選択 | 表示領域を選択すると、表示領域のサイズやスクロール位置などの情報を取得し、NodesRef オブジェクトのインスタンスを返します。 | |
| 実行する | [折り返し電話] | すべてのリクエストを実行すると、リクエストの結果がリクエストの順序で配列に形成され、コールバックの最初のパラメータで返されます。 |