微信小程序开发笔记

Tags:

目录

说明

使用微信风格的组件 weui

由微信官方设计团队和小程序团队为微信小程序量身设计了一套组件库:wechat-miniprogram/weui

在小程序的 app.json 中添加下面的配置即可使用,并且这种方式不占用小程序的包体积:

{
  "useExtendedLib": {
    "weui": true
  }
}

使用 less

用 less 写样式要比直接写 css 方便太多了,less 支持的特性:less

如果项目创建的时候没有选择 less,可以修改项目的 project.config.json,在 setting 中添加下面的配置。参考 原生支持 TypeScript和Less

    "useCompilerPlugins": [
      "less"
    ]

wx.getWindowInfo() 返回数值说明

[wx.getWindowInfo()][10] 文档对返回数值的说明太简陋了,经过试验得知具体参数含义如下。

微信小程序的页面上的导航栏可以自定义,在页面的.json文件中添加 “navigationStyle”: “custom” 即可。

{
  "navigationStyle": "custom"
}

是否使用自定义导航栏,会影响 wx.getWindowInfo() 返回的部分数值。

不受导航栏类型影响的返回值,其中 safeArea 只有物理屏幕时异形屏幕时才有数值:

safeArea.top:从物理屏幕上边缘到物理屏幕非异形部分之前的高度。

screenTop:物理屏幕上边沿到导航栏底部的高度(包括小程序的默认导航栏)。(文档里说这个数值是窗口上边缘的y值,介绍的真够含糊…)

safeArea.bottom:从物理屏幕上边缘到物理屏幕底部异形部分之前的高度。

screenHeight:物理屏幕最上边沿到物理屏幕最下边缘的高度。

下面的页面代码


<view style="height:px;background-color:green">
  <view style="height:px;background-color: blue;">
    <view style="height:px;background-color:yellow">
      <view style="height:px;background-color: red;">
      </view>
    </view>
  </view>
</view>

页面效果

受导航栏类型影响的返回值:

windowHeight:如果使用小程序默认的导航栏,数值等于 screenHeight-screenTop,即从导航栏下边沿到物理屏幕下边沿的区域。如果使用自定义导航栏,等于 screenHeight,即整个物理屏幕的高度。

参考

  1. 李佶澳的博客
  2. wechat-miniprogram/weui
  3. less

推荐阅读

Copyright @2011-2019 All rights reserved. 转载请添加原文连接,合作请加微信lijiaocn或者发送邮件: [email protected],备注网站合作

友情链接:  系统软件  程序语言  运营经验  水库文集  网络课程  微信网文  发现知识星球