微信小程序开发学习——初识小程序

1.微信小程序页面由哪几个文件组成？

js文件为逻辑，ml文件为内容，json是界面，ss为内容格式设置。

index为索引，logs为日志，utils为功能显示界面。

第一个小程序——Hello Wechat Programe：

在显示页面index.wxml中输入<view>输入你想要显示的内容</view>

即可显示。

2.设置显示字体格式：

有两种方法：

1.直接在页面显示命令设置sytle

2.调用wxss的类进行格式设置

<view style='font-family: sans-serif;font-size: 30px;'>
  <view>利用Style设置字体样式</view>
  <view>字体：sans-serif，30像素</view>
</view>

<view class="fontStyle">
<view>利用class设置字体样式</view>
<view>字体：Cursive，25像素，倾斜，加粗</view>
</view>

在wxss中需要定义fontStyle类，注意定义类时，名字前要加一个. 

.fontStyle{
  font-family:cursive;
  font-size: 25px;
  font-style: italic;
  font-weight: bold;
}

显示效果如图：

定义标题，要求居中，下部留15px，颜色要求为红色

.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

最后呈现效果如图：

3.设置字符间距，对齐文本，装饰文本，对文本进行缩进

.textStyle01{
  color: red;
  letter-spacing: 2px;
  text-align: left;
  text-indent: 50px;
  text-decoration: underline;
  text-decoration-color: blue;
  line-height: 30px;
  white-space: normal;
}

.textStyle02{
  text-align: justify;
  word-spacing: 2px;
  text-transform:uppercase;
  white-space: pre-wrap;
}

 需要注意的几点：

1.中文的间隔用letter-spacing，英文的用word-spacing

2.white space的作用

white-space的值：
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap    文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。
inherit    规定应该从父元素继承 white-space 属性的值。

显示效果：

4.插入图片和播放声音

<view class="box">
  <view class="title">
    图片与声音
  </view>
  <view class = "card-image-container">
  <image src="{{imgsrc}}" bindtap="tapCat"></image>
  </view>
</view>

在index.js中写动作 

Page({
  data:{
    imgsrc :'/images/cat.jpg'
  },
  //事件处理函数：
  tapCat:function(){
    let audio=wx.createInnerAudioContext();
    audio.src = '/audios/meow.mp3'
    audio.play();
  }
})

设置图片样式居中 

.card-image-container {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

显示效果：