【小程序】初识微信小程序笔记

1. 字体样式设置

注意：如果是在app.wxss中设置的class可以在整个小程序中使用！

静态样式一般用class设置，动态样式一般用style设置，提高渲染速度。

1. 用style，font-family:字体;font-size:大小;

会发现有提供标准的比如large,small这类，也可以用

<view style="font-family:sans-serif;font-size:30px;">
  <view>
    利用style设置字体
  </view>
  <view>
    字体：sans-serif,大小30像素
  </view>

在本段的view上用则改变本段内字体效果，本段一共有两段。效果如图所示：

b. 用class，内容和上述差不多，还是font-family,font-size,font-style,font-weight这一套

其中font-style输入，系统会自动联想两种选择，normal是正常，另一种是倾斜。

font-weight:bold是加粗，还可以是bolder，light，lighter……。

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

<view class="my_style">
  <view>
    利用class设置字体
  </view>
  <view>
    字体:cursive,25像素，倾斜，加粗
  </view>
</view>

效果如图：

每个段落都可以加框框，没有限制

.box{
  border:1px solid red;
  margin:20rpx;
  padding:20rpx;
}

margin代表对外（对上一段下一段和左右屏幕），上下左右的距离；同理，margin-bottom就是定义对外的下边距

padding代表对内上下左右的距离

2. 文本样式设置

上案例：

.my_style{
  color:violet;
  letter-spacing: 10px;
  text-align:left;
  text-indent:40px;
  text-decoration: underline;
  text-decoration-color: turquoise;
  line-height:30px;
  white-space:normal;
}

color是字的颜色

letter-spacing是字符间距（其中由于英语之类的语言是由字母组成，一个字母是一个字符，所以要改为单词间距word-spacing）

text-align左对齐、右对齐、居中的设置（由于英语等语言单词长度不同，左右都要对齐，可选用justify）

text-indent段落缩进

text-decoration文本装饰设置、比如说下划线

text-decoration-color该装饰的颜色

line-height行高

white-space：空白区域怎么处理（正常处理，填满——>飞出屏幕外，prewrap该保留的空白保留该换行的换行——>对字母单词很有用，等等）

另外字母想要全部大写可以用text-transform，选择uppercase

3. 图片与声音

要求：点击一张图片，该图片会发出声音

首先将图片和音频文件放到该程序文件下（强制放在根目录，否则音频无法在手机上播放）。

图片插入方式为image，后面自动弹出的src中要填图片的地址。已知点击事件函数为bindtap。

对于声音，需要在bindtap中和图片绑定在一起。声音的引入方式（可以认为是定义该变量为音频）：wx.createInnerAudioContext()，接下来同样，我们需要给该音频变量提供src。现在变量已经定义完善，最后要表明点击后对该变量的操作。我们这里想要播放音频，可以使用play()。

代码如下：

<view class="box">
  <view class="title">
    一张图片
  </view>
  <view>
    <image src="{{imgSrc}}" bindtap="catcat"/>
  </view>
</view>

const app = getApp()
Page({
  data: {
    imgSrc:"/somephoto.jpg"
  },
  // 事件处理函数
  catcat:function(){
    let audio=wx.createInnerAudioContext();
    audio.src="/audiovoice.m4a";
    audio.play();
  }
})

4. 总结

数据绑定：wxml文件中的数据用{{}}和js文件中的数据进行绑定

函数绑定：bind...=""将...事件和js中的函数进行绑定