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;
}
显示效果: