在小程序中用.生成带class 的view_微信小程序主页面排版

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

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

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