shift Alt F格式化代码,随便启用一个就行
wxml
注意这些东西,后问都称之为组件
右击我的乱涂抹的地方,创建一个文件夹
建立一个文件夹,把照片拖动进去.以前不可以直接拖动
改个名字,不要问为什么
手机端,看起来还不错吧....
但图片显示的高宽并不是图片本身的高宽。它被MINA框架设置成了宽度300px、高度225px，这也是小程序默认的图片高宽。如果我们不显示地指定图片高宽，所有图片都将保持这个默认值。
相对路径与绝对路径
在小程序中同样有相对路径和绝对路径的区别。上面我们在设置image组件的src属性时，使用的是绝对路径，它以“/”开头，“/”代表根目录。我们也可以使用相对路径来为image指定图片路径，比如，将代码中image组件的src属性改写为相对路径：
<image src="../../images/avatar/avatar-1.png"></image>
路径中的“..”表示向上一级。这里由于使用绝对路径更加简洁，所以我们使用绝对路径。
写一段代码
ctrl S我就不真机运行了,就是这么个感觉
美化一下,也不是太懂前端,恶补一下
撸了一段,看看效果
.container是所有组件元素的容器样式,就像app开发里面的布局一样.这里用Flax,来控制下面子组件的排列情况
.avatar设置头像
.motto文本样式
.journey-container外边框,参数里面加个圆角矩形
真实项目中，图片资源尽量不要存储在小程序的目录中，因为小程序的大小不能超过1MB，超过则无法真机运行和发布项目。应该将图片都存放在服务器上，让小程序通过网络来加载图片资源。直至2019.09.28小程序分包大小的限制：
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M
Flex布局是W3C组织在2009年提出的一个新的布局方案，其宗旨是让页面的样式布局更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对Flex布局的支持并不完善，造成了很多开发者不知道有这种布局的存在或者使用非常少，我们还是习惯使用传统的position和float属性来布局。但传统的布局方式有它的缺陷，比如像垂直居中就不是那么容易实现，Flex可以很好地解决这些问题。
小程序能够非常好地支持Flex布局，并且这也是官方推荐的布局方式.
我们使用display:flex将这个view变成了一个弹性盒子。设置display:flex是应用一切弹性布局属性的先决条件，如果不设置display：flex，那么后续的其他相关弹性布局属性都将无效。
接着我们使用flex-direction这个属性指定view内元素的排列方向。这个属性可能的值有4个：
• row
• column
• row-reverse
• column-reverse
要理解这4个属性，首先要了解一个Flex布局非常重要的概念：轴。
我们知道，在一个平面直角坐标系里，轴有两个方向（就是X、Y），分别是水平方向和垂直方向。一个弹性盒子，需要确定一个主轴。这个主轴到底是水平方向还是垂直方向，就由flex-direction这个属性的值来确定。如果flex-direction值为row或者row-reverse，那么主轴的方向为水平方向，相反，如果值为column或者column-reverse，那么主轴为垂直方向。选定主轴的方向后，另外一个方向的轴我们成为“交叉轴”。也就是说，主轴并不一定就是水平方向，交叉轴也并不一定就是垂直方向，主轴的方向由flex-direction的取值来决定。理解这一点尤其重要。
在welcome.wxss样式表中，我们绝大多数的长度单位都设置的是rpx这个全新的单位，比如margin-top:100rpx。在小程序里，长度单位既可以使用rpx，也可以使用px。使用rpx可以使组件自适应屏幕的高度和宽度，但使用px不会。
建议以iPhone 6的宽度750个物理像素作为标准，来做设计图。在此宽度下，这张设计图里每个元素的尺寸转换到小程序样式时，转换比例为1物理像素=1rpx=0.5px。rpx和px就是小程序样式里可以使用的两种长度单位。
举个例子，我们的welcome页面设计图的宽度总长是750像素，它是以iPhone 6的尺寸来设计的，而其中的头像图片高宽为200像素×200像素。如果想在iPhone 6里正确地显示这张200像素×200像素的图片，那么相应地image组件的高宽应该设置为多少呢？
答案是要不就设置为高200rpx，宽200rpx，要不就设置为高100px，宽100px。这两个单位，在iPhone 6下显示效果一样，但如果我们将模拟器切换到其他机型，这两种不同的单位就会出现差异。rpx将随着屏幕尺寸的变化而变化，但px不会。那么到底选择rpx还是选择px呢？这取决于你需要元素随着移动设备尺寸的变化而变化，还是让元素始终保持不变，需要具体问题具体分析。
对于margin-top或者是image组件的高宽，很多时候，需要他们随着设备的尺寸不同动态地变化，以保持页面元素之间的分布可以保持“一定的比例关系”，这种情况下应该使用rpx。来看下面这个例子。
将image组件的长度单位由rpx更改为px后，整个页面元素不再“协调”，image变得很“大”。这是因为px不会根据屏幕尺寸做自适应。
journey-container设置了“开启小程序之旅”这段文本的外边框。
为什么其他的元素我们都使用rpx为单位而唯独border这个属性使用的是1px呢？。
因为讲过，rpx是自适应单位，它通常非常适合用来控制图片的高宽和元素之间的间距（通常这些元素需要随着屏幕尺寸的不同而动态变化）。但我们考虑一下，border这个属性需要动态变化吗？不需要。如果border动态变化，那么它会在屏幕尺寸较大的手机上变得很粗，这并不是我们想要的效果。所以这里应当将border的单位设置为px。同理，使用px作为border-radius的单位。
最后，我们为什么要强调最好是在iPhone 6的尺寸下做设计图呢？因为只有在iPhone 6的尺寸下，设计图里的1个像素才满足下面的转换关系：
1物理像素=1rpx=0.5px
如果不以iPhone 6的标准来做设计图，也是可以的。但非iPhone 6的尺寸下，设计图与rpx、px的转换关系就不是整数倍的，计算起来比较麻烦，所以建议设计图最好以iPhone 6的尺寸标准来设计，这样换算起来很方便。这也是官方建议的一个设计标准。
如果我们足够细心，可以看到小程序的模拟器选择项下，给出了每种机型的分辨率。要强调的是，这里的分辨率指的是逻辑分辨率pt，而非物理分辨率。以iPhone 6为例，模拟器里给出的分辨率是：375×667；Dpr：2
它的意思是：iPhone 6的水平方向有375个逻辑像素点，而竖直方向有667个逻辑像素点，每个逻辑像素点包含2个物理像素点。开发者一定要注意逻辑像素和物理像素的区别。我们通常在PS里做的设计图，它的像素可以简单理解为物理像素。
再次提醒开发者，1物理像素不等于1px。假设有一张图片在操作系统下显示宽度为750个像素，我们现在想让这个图片水平方向充满整个页面。如果你直接在页面里（iPhone 6模拟机型下）将图片宽度设置为750px，这是不对的。正确的设置方法为750rpx或者375px，才能让图片水平填满小程序。因为，iPhone 6下：
1物理像素=1rpx=0.5px。
玩不来....
