小程序编程基础（一）

小程序编程基础（一）

1.字体样式设置

1.1知识点

（1）各种字体样式属性名称及其含义。

（2）利用style和class设置字体样式的方法。

（3）在index.wxss和app.wxss中定义样式类的方法。

属性	含义	属性值列举
font-family	字体类型	serif,sans-serif,monospace,cursive,fantasy,…
font-size	字体大小	5px/rpx/cm,large,small,medium,larger,smaller,…
font-style	字体倾斜	italic,normal,oblique,…
font-weight	字体粗细	bold,bolder,lighter,…

1.2案例描述

​ 设计一个小程序，分别利用style和class属性设置字体样式，在index.wxss中定义样式类。所有的文字都包含在一个边框内，边框内上方有标题文字，边框和标题样式利用class属性来设置，在app.wxss中定义样式类。

1.3实现效果

​ 边框样式和标题样式是在app.wxss文件中定义的样式类，在index.wxml文件中利用class引用。标题下面的、双虚线上面的文字样式是在index.wxml中直接利用style来设置的，设置的字体的样式为：sans-serif、30像素。虚线下面的样式是通过index.wxss文件中定义，在index.wxml文件中利用class来引用的，设置的字体的样式为：Cursive、25像素、倾斜、加粗。

1.4案例实现

1.4.1编写index.wxml文件代码

​ style是直接在标签内部进行设置，而class要现在wxss文件中定义样式类，再在wxml文件中通过class属性引用。

<!--index.wxml-->

<view class='box'>
 <view class="title">字体样式设置</view>
 <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>
</view>

1.4.2编写app.wxss文件代码

​ .box和.title两种全局样式类，以后案例都将使用这两种样式。

/** app.wxss **/

.box{ <!--定义用于设置边框样式-->
 margin: 20rpx;                             //外边距
 padding: 20rpx;                            //内边距
 border: 1px solid silver;                  //边框1px，实线，银灰色
}

.title{<!--定义用于设置标题样式--> 
 font-size: 25px;                           //字体大小为25px
 text-align: center;                        //文本水平对齐方式为居中
 margin-bottom: 15px;                       //外边距为15px
 color: brown;                              //设置颜色
}

1.4.3编写index.wxss文件代码

​ 代码中定义.fontStyle样式类，该样式将在index.wxml文件中被使用。

/** index.wxss **/

.fontStyle {<!--定义样式类-->
 font-size: 25px;                          //设置字体大小
 font-family: cursive;                     //设置字体类型
 font-style: italic;                       //设置字体倾斜
 font-weight: bold;                        //设置字体加粗
}

2.文本样式设置

2.1知识点

​ 文本属性可定义文本的外观。通过文本属性可以设置文本颜色，字符间距，文本对齐，文本装饰，文本缩进，等等。

属性	含义	属性值举例
color	文本颜色	red,#0000ff,#0f0,rgb(red,green,blue),reba(red,green,blue,alpha)
text-align	文本对齐	left/right/center/justify
text-indent	文本缩进	left：固定尺寸的缩进，默认值为0，可以是负数和正数；%：定义基于父元素宽度的百分比的缩进；inherit：继承父元素text-indent属性的值
letter-spacing	字符间距	normal/<长度值>
word-spacing	单词间距	normal/<长度值>
word-space	文档中的空白处	normal、nowrap、pre、pre-line、pre-warp
text-decoration	文本装饰	none、overline、line-through、underline
text-decoration-color	文本装饰颜色	red,#0000ff,#0f0,rgb(red,green,blue),reba(red,green,blue,alpha)

2.2案例描述

​ 设计一个小程序，利用class属性设置文本样式，包括：设置文本颜色，字符间距，文本对齐，文本装饰，文本缩进，等等。

2.3实现效果

2.4案例实现

2.4.1编写index.wxml文件代码

<view class="box">
  <view class="title">文本样式设置</view>
  <view class="textStyle01">
    文本属性可定义文本的外观。通过设置文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
  </view>
  ============================
  <view class="textStyle02"> 
    North China University of Technology(NCUT) is located in the western part of Beijing, whitch is a municipal university founded in 1946.
  </view>
</view>

2.4.2编写index.wxss文件代码

.textStyle01{
  color: red;
  letter-spacing: 10px;
  text-align: left;
  text-indent: 50px;                  /*首行缩进*/
  text-decoration: underline;         /*文本修饰样式：下划线*/
  text-decoration-color: #00f;        /*修饰样式颜色：下划线颜色*/
  line-height: 30px;                  /*行间距*/
  white-space: normal;
}
.textStyle02{
  text-align: justify;               /*文本对齐：两端对齐*/
  word-spacing: 20px;                /*字间距：20px*/
  text-transform: uppercase;         /*文本中的字母转换为其他形式：大写*/
  white-space: pre-wrap;             /*文档中的空白处保留空白、缩进和正常换行*/
}

3.图片与声音

3.1知识点

​ 本案例主要涉及image图片组建的使用方法，音频的创建和使用方法，以及数据和事件绑定的实现方法。

3.1.1image组件

​ 支持JPG，PNG，SVG格式，用src属性指定图片的路径。

3.1.2使用音频

​ 首先要利用API函数wx.createInnerAudioContext()创建音频上下文，然后设置该上下文的源文件src，并利用play()函数播放音频。

3.1.3数据绑定

​ WXML文件中动态函数通过与JS文件中的数据进行绑定，这样JS中的数据就可以传给WXML文件。这种传递是单向的。

3.1.4事件绑定

​ 在WXML文件组件标签内利用“bind…=函数名”绑定组件事件与函数，并在JS文件中定义该事件函数。

3.2案例描述

​ 设计一个小程序，小程序运行后显示一张猫图，点击图片后会发出猫叫的声音。

3.3实现效果

3.4案例实现

3.4.1准备图片和音频文件

​ 在项目根目录中创建images和audios文件夹，并把kitty.ipg图片文件和meow.mp3音频文件分别复制到images和audios文件夹中(注：audios文件夹必须在根目录下)。

3.4.2编写index.wxml文件代码。

​ 代码中主要使用了image组件，并在组件中进行了数据绑定和事件绑定。image组件用来设置图片，其中src属性用来指定图片的路径，本案例绑定了属性值imgSrc，该值在index.js文件中的data中进行了初始化；bindtap属性绑定了点击图片函数tapCat，该函数在index.js文件中进行了定义。

<view class="box">
  <view class="title">图片和声音</view>
  <view style="text-align:center;">
    <image src='{{imgSrc}}' bindtap='tapCat'></image>
  </view>
</view>

3.4.3编写index.js文件代码。

​ 代码在data中给出了图片路径，并定义了点击图片事件处理函数tapCat。

// index.js
Page({
  data:{
    imgSrc:'/images/kitty.jpg'                //图片源文件
  },
  tapCat:function(){
    let audio=wx.createInnerAudioContext()    //创建音频上下文
    audio.src='/audios/meow.mp3'              //设置音频源文件，需要放在根目录下
    audio.play()                              //播放音频
  }
})