小程序开发--编程入门

我在接触微信小程序开发前，主要做的事后端开发。所以我在学之前是一定有编程基础。写一些博客是想记录下自己前端的学习路程。在下面的代码会写下详尽的注释信息。

前端开发就类似建房子，首先搭框架、建成毛坯房，然后再进行装修。我们的 wxml 代码搭建的就是房子的毛坯房， 我们还需要使用xss来对骨架进行装修。比如说窗户要怎么设计，要安装什么风格的门，地砖颜色... 装修就是可以按功能来进行分类，然后便是深入到每一处细节。对于之前没有接触过编程的同学来说，我们可以将前端开发学习类比于学习office，ppt编辑。

WXML

<view class="title"> hello world! </view>
<image src="path_to_image" mode="widthFix"> </image> 
<!-- 注解  
	<view> </view> 用来输入文字，<image> </image> 用来插入图片；
	view中的 class 就是给我们的view分类，相同的class的“装饰”是一样的，“装饰”写在wxss文件中；
	mode="widthFix" 可以调整展示图片的宽度 
-->

使用index.wxml 和 index.wxss文件可以开发一个简单的名片小程序 

 <!-- index.wxml -->

<view class="card"> 
  <image src="../../images/bg.jpg" class="bg" mode="widthFix"> </image>
  <image src="../../images/person.jpg" class="person" mode="widthFix"> </image>
  <view class="info"> 
    <view> name: yin </view>
    <view class="tel"> TEL: 12345667 </view>
    <view> WeChat: 6342373 </view>
  </view>
</view>

WXSS

/** index.wxss **/
.card {
  margin: 10px; /** 相对屏幕的边距 **/
  position: relative; /** 相对定位 **/
}
/** 字体粗细 font-weight 字体大小：font-size **/
.title {
  font-family: PingFang SC; /** 字体 **/
  font-weight: 100;  /**字体粗细 **/
  color:red;  
  font-size: 20rpx; /** 字体大小 **/
  margin-bottom: 40rpx; /**下边距 **/
}
​
.bg
{
  width: 100%; /** 宽度 **/
  border-radius: 10px; /** 边角半径**/
  box-shadow: 0px -5px 5px black; /** 边阴影部分； 前两个px分别表示x,y轴的偏移；最后一个 5px表示阴影的大小 **/
}
.person 
{
  width: 60px;
  position:absolute; /** 绝对定位, 是和相对定位一起使用。 **/
  top:20px; /** 绝对定位中对于顶部的距离 **/
  right: 20px;  /** 绝对定位中对于右边的距离 **/
}
​
.info
{
  
  position: absolute;
  left: 30px;
  bottom: 40px;
  line-height: 20px; /** 行高 **/
}
​
.tel
{
    margin-top:10px; /** 上边距 **/
}