开发小程序入门：认识wxml和scss文件

认识wxml和scss文件

我们今天的任务做出一个汴绣文化的名片，利用图片和文字介绍介绍汴绣文化。
首先把图片放进一个对的路径，在miniprogram路径下创建Img文件，把图片放进Img文件夹中。如下图：

然后在wxml文件中加入下列内容：

<image mode="widthFix" 
src="../../Img/图片1.png"></image> 
<view class="comment"> 国风古典韵味</view>
<view class="body"> 
  <view> 作为中国传统刺绣工艺之一，素有“国宝”之称，它以绣工精致，针法细腻，图案严谨，格调高雅，色彩秀丽而著称，<view class="title">具有绒彩夺目、装饰性强、忠实原品、深厚持重、严整富丽</view>这五大特点。</view>     
  <view>汴绣在继承“宋绣”针法发展而来，在宋代东京，绣品非常盛行，不仅帝王妃嫔贵族官僚，爱在官服礼服装饰品上刺上锦绣，平民百姓也用它点缀婚丧嫁娶之衣。北宋时期已有“文绣院”，当时皇帝的龙袍、官员的朝服、乌纱帽、朝靴都为刺绣精品。</view>        
</view>

这个时候我们就完成了对字的插入，同时我们使用CLASS对文字进行命名后，然后在scss文件中进行控制文字的大小和色号。

/**index.scss**/


image{
  width: 100%;
}
.comment{
  text-align: center;
  font-size: 14px;
  color: #999;
}
.body{
  padding: 50px;
  line-height: 2;
}
.title{
  font-weight: bold;
}

完成后，我们看到模拟器上的界面如下图所示：

完成，在手机上预览观察效果。