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. 组件
- 三方组件
- LinUI https://doc.mini.talelin.com/
- 有赞 https://youzan.github.io/vant-weapp/#/intro
- IView https://weapp.iviewui.com/
- 安装自定义组件
- 小程序根目录执行
npm init-> 会生成package.json - 安装npm依赖
npm i lin-ui@0.8.7-> 会生成node_modules文件夹和相应的依赖的npm包的文件夹和文件 - 小程序开发工具-工具-构建npm -> 会生成miniprogram_npm文件夹
- 使用自定义组件
- page.json中引入组件
"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"会被认为是真
