1. 自适应rpx

使用rpx代替px
iphone6中 2rpx=px

2. flex布局

  /* 使用flex布局 */
  display: flex;
  /* row行排列，column垂直排列 */
  flex-direction: column;
  /* 居中 */
  align-items: center;
  • 文本居中方案:
  height: 80rpx;
  /* 水平居中，可根据容器的高度设置line-height */
  text-align: center;
  /* 文本行高 */
  line-height: 80rpx;
  • 页面容器元素
    • 比如可以设置比如整个页面的背景
page{
  background-color: #b3d4db;
}

3. 组件

  "usingComponents": {
    "lin-avatar":"/miniprogram_npm/lin-ui/avatar/index"
  }
  • lin-avatar可以自定义，自己决定组件的名字

4. 设置小程序入口

  • 在app.json中设置 "entryPagePath": "pages/index/index"
    • 设置完成之后，小程序左上角会出先Home图标，而不是pages[0]
      • home跳转的页面为pages[]数组中的第一项pages[0]

5. 设置宽度100%，高度自适应

    <image class="post-image" mode="widthFix" src="{{item.postImage}}"></image>

.post-image {
  width: 100%;
  /* height: 100%; */
  margin-bottom: 10rpx;
}

6. 触底增量添加数据

  onReachBottom: function () {
    var that = this;
    // 获取到当前数组
    var curPosts = that.data.posts
    // 向数组中添加元素
    curPosts.push({
      'userAvatar': 'https://img1.doubanio.com/icon/u198088661-69.jpg',
      'userName': 'Ash',
      'postTitle': '有组鹅和我一样喜欢保存各种演出提词器的图片嘛？',
      'postImage': 'https://img2.doubanio.com/view/group_topic/l/public/p363717643.webp',
      'postContent': '最近好忙可能没时间回????????我手机里有超级超级多,我觉得很多做社交软件背景都特别好看????,想开一个楼存放好看的提词器图片,有没有人有好看的提词器图片可以豆油给我存放在这里呀',
      'postLike': '99+',
      'postView': '999+'
    })
    // 重新设置数组值
    that.setData({
      posts: curPosts
    })
  }

# 其他

  • 小程序组件属性设置false: property="{{false}}"， 如果是property="false"会被认为是真