O miniaplicativo WeChat obtém a largura da tela e a largura e altura dos elementos

1. O miniaplicativo WeChat obtém informações do sistema

A função do WeChat para obter informações do sistema é wx.getSystemInfo(OBJECT)

1. descrição do parâmetro do objeto

parâmetro	tipo	Obrigatório
sucesso	Função	sim
falhar	Função	não
completo	Função	não

2. Descrição do parâmetro de retorno de chamada de sucesso

Atributos	ilustrar
modelo	Modelo de telefone
pixelRatio	Proporção de pixels do dispositivo
largura da janela	largura da janela
altura da janela	altura da janela
linguagem	A linguagem definida pelo WeChat
versão	Número da versão do WeChat
sistema	Versão do sistema operacional
plataforma	Plataforma do cliente

2. CSS3 apresenta ‘vm’ e “vh”

vm=largura da visualização ; vh=altura da visualização
O que chamamos de unidade da janela de visualização acima nos permite definir o tamanho mais próximo da janela do navegador.
Por exemplo:

view{
  width: 100vw;
  font-size: 80vw; /* 宽度为窗口100%， 字体大小为窗口宽度的10% */
}
view{
  height: 100vh;
  font-size: 80vh; /* 高度为窗口100%， 字体大小为窗口高度的10% */
}

3. Obtenha a altura do elemento wx.createSelectorQuery() // Obtenha a API de informações do nó wxml

Retorna uma instância do objeto SelectorQuery. Você pode usar select e outros métodos para selecionar nós nesta instância e usarboundingClientRect e outros métodos para selecionar as informações que precisam ser consultadas.

Código de amostra

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
    })
  }
})

Lista de métodos para o objeto selectorQuery

método	parâmetro	parâmetro
em	componente de objeto	Altere o intervalo de seleção do seletor para dentro do componente do componente personalizado. (Inicialmente, o seletor seleciona apenas nós no intervalo de páginas e não seleciona nós em nenhum componente personalizado.)
selecione	seletor	seletor é semelhante ao seletor CSS
selecionar tudo	seletor	Selecione o nó que corresponde ao seletor na página atual e retorne uma instância do objeto NodesRef. Ao contrário de selectorQuery.select(selector), ele seleciona todos os nós que correspondem ao seletor.
selecioneViewport		Selecione a área de exibição, que pode ser usada para obter o tamanho, posição de rolagem e outras informações da área de exibição, e retorne uma instância do objeto NodesRef.
executivo	[ligar de volta]	Execute todas as solicitações e os resultados da solicitação serão formados em um array na ordem das solicitações e retornados no primeiro parâmetro do retorno de chamada.