微信小程序主页面排版

开发小程序的话 首先要了解里面的每个文件的作用

1. 小程序没有DOM对象，一切基于组件化
2. 小程序的四个重要的文件
   1. *.js
   2. *.wxml ---> view结构 ----> html
   3. *.wxss ---> view样式 -----> css
   4. *. json ----> view 数据 -----> json文件
3. 储备知识
   1. 理解事件机制
   2. 理解组件化
   3. 理解数据绑定
   4. Flex布局
   5. 移动端适配方案
4. 贴心小建议

学习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

微信官方提供的换算方式：

1. 以iPhone6的物理像素个数为标准: 750;
2. 1rpx = 目标设备宽度 / 750 * px;
3. 注意此时底层已经做了viewport适配的处理，即实现了理想视口

 前面是简单介绍 然后就可创建一个小程序

进去之后是一个白板 需要自己创建 里面的文件

 大概需要的文件只有这么多 如果需要新建页面就可在pages下建文件夹

首先需要画一个简单的页面就要一步一步来

app.js里面写一个

App({//注册小程序

});

表示是一个小程序

然后在app.json里设置需要配置的页面以及相关样式

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#8ED145",
    "navigationBarTitleText": "阿圆网络",
    "navigationBarTextStyle": "black"
  }
}

里面引用了一个页面index 我们就建立一个index文件夹 点击pages右键一个 创建的时候自动建了下面的小文件

然后我们就来画一个界面

首先是她的index.wxml里画一个基本模板  所有需要调整的组件都给一个class 然后在wxcc里需要引用

hello 安好

开启小程序之旅

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

最后的效果如图 一个简单的页面就这样调整完成。