微信小程序进阶问答

01 wxml和html的区别：

①使用标签不同。

②wxml提供了和vue.js中模版语法类似的模版语法，而html没有。

③html在浏览器浏览，而wxml在微信或开发工具中。

④wxml标签必须有结束符</>。

02 wxss和css的区别：

①单位不同：css：px，wxss：rpx。

②wxss不能使用本地图片。

③wxss又去据央视文件爱你，而css没有。

03 组件

组件相当于html的标签。

3.1 view

view组件表示视图容器，常用于实现页面的布局效果。

①hover-class：点击时直接出现样式。

②hover-stay-time：点击态持续多少秒，单位是毫秒。

③hover-start-time：隔多少秒再出现点击态。

3.2 image

image组件默认宽度300px，高度225px。

rpx（Responsive Pixel，自适应像素）单位是微信小程序独有的，用来解决屏幕适配问题的尺寸单位，将手机屏幕分成750份。

1 px=750/物理宽度 rpx

1 rpx=物理宽度/750 px

例如：关于rpx和px的换算，当屏幕宽度为320px时，1rpx ≈ 0.427px。

3.3 swiper

swiper组件表示滑块视图容器，用于创建一块可以滑动的区域，即轮播图。

swiper-item组件表示组件的内容。

3.4 text

在微信小程序中，可以通过text组件定义行内文本。

text组件默认不换行，而设置选中要添加user-select=“true”，即长按是否允许被选中。

04 flex布局

要实现弹性盒布局，需要将父元素的displsy属性设置为flex。

05 其他

5.1 导入外部样式

@import “需要导入的外部样式表的相对路径”，中间要空格

5.2 切换编译模式

添加编译模式——“启动页面”选中要切换的路径——点击“确定”——配置.wxml的导航栏和.json文件的usingComponents。

5.3 新建页面

修改app.json里的pages属性，生成的文件夹中有4个文件：.js、.wxml、.wxss、.json

3 页面设计2

01 标签栏配置

标签栏个数在2-5之间。

02 vw、vh单位

两个都是视口（表示可视区域的大小）单位，而vw（View Width）、vh（View Height）分别表示可视区域的宽/高度。

1vh=视口宽度/100，1vh=视口高度/100

03 video组件

video组件用来播放视频，默认款300px，高225px。

描述	属性
地址	src
视频时长	controls(boolean类型)
弹幕列表	danmu-list
是否显示弹幕按钮	danmu-btn

04 表单组件

input 输入框

radio-group 单选按钮容器

radio 单选按钮的内容

checkbox-group 复选框容器

checkbox 复选框的内容

button 按钮