微信小程序主页面排版
开发小程序的话 首先要了解里面的每个文件的作用
- 小程序没有DOM对象,一切基于组件化
- 小程序的四个重要的文件
- *.js
- *.wxml ---> view结构 ----> html
- *.wxss ---> view样式 -----> css
- *. json ----> view 数据 -----> json文件
- 储备知识
- 理解事件机制
- 理解组件化
- 理解数据绑定
- Flex布局
- 移动端适配方案
- 贴心小建议
学习vue后开发小程序的感觉会爽到飞起
1 什么是flex布局?
1) Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
2) 任何一个容器都可以指定为Flex布局。
3) display: ‘flex’
2 flex属性
1) flex-direction:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
3 小程序适配方案
Iphon6: 1rpx = 1物理像素 = 0.5px
微信官方提供的换算方式:
- 以iPhone6的物理像素个数为标准: 750;
- 1rpx = 目标设备宽度 / 750 * px;
- 注意此时底层已经做了viewport适配的处理,即实现了理想视口
前面是简单介绍 然后就可创建一个小程序
进去之后是一个白板 需要自己创建 里面的文件
大概需要的文件只有这么多 如果需要新建页面就可在pages下建文件夹
首先需要画一个简单的页面就要一步一步来
app.js里面写一个
App({//注册小程序
});
表示是一个小程序
然后在app.json里设置需要配置的页面以及相关样式
{
"pages":[
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor": "#8ED145",
"navigationBarTitleText": "阿圆网络",
"navigationBarTextStyle": "black"
}
}
里面引用了一个页面index 我们就建立一个index文件夹 点击pages右键一个 创建的时候自动建了下面的小文件
然后我们就来画一个界面
首先是她的index.wxml里画一个基本模板 所有需要调整的组件都给一个class 然后在wxcc里需要引用
<!--pages/index/index.wxml-->
<!--wxml里面放文本内容 app.json配置全局文件 index或其他页面配置自己的页面-->
<!--view容器-->
<view class='indexContext'>
<image class='avatar' src='/images/7.jpg'></image>
<text class='userName'>hello 安好</text>
<view class='text'>
<text>开启小程序之旅</text>
</view>
</view>
index.wxcc页面 对前面这个页面里的组件进行样式的调试
/* pages/index/index.wxss */
/*里面设置class那边的样式 */
page{
/*最外面有一层page设置整个高度 和背景 */
height: 100%;
background: #8ED145;
}
.indexContext{
/*flex布局 */
display: flex;
/*纵向布局 */
flex-direction: column;
/*布局居中 */
align-items: center;
}
.avatar{
width: 200rpx;
height: 200rpx;
/*圆角图形取一半 */
border-radius: 100rpx;
margin: 100rpx;
}
.userName{
margin: 100rpx;
font-size: 40rpx;
/*字体变粗 */
font-weight: bold;
color: bisque;
}
.text{
/*设置这个class边框等 里面内容另外设置 */
width: 250rpx;
height: 80rpx;
/*设置里面的字体 */
font-size: 30rpx;
/*实现边框长度颜色 */
border: 1rpx solid brown;
border-radius: 10rpx;
/*字体居中 */
text-align: center;
line-height: 80rpx;
}
最后的效果如图 一个简单的页面就这样调整完成。