微信小程序中的页面文件和组件

页面文件

页面构造器 JS文件

页面的JS文件，用于书写当前页面所需要的脚本代码以及生命周期函数。

Page() : 注册了一个页面

接收一个对象，该对象用于配置当前页面所需内容。

该对象拥有的属性：

data： 当前页面初始化的时候所需要的数据

onLoad: 当前页面被加载的时候所执行的函数（生命周期函数）

onReady: 当页面渲染完毕时所执行的函数（生命周期函数）

onShow: 当页面从后台显示为前台时 或者第一次渲染出现（生命周期函数）

onHide: 当页面从前台进入后台时 (生命周期函数)

onUnload: 当页面被卸载的时候(生命周期函数)

onPullDownRefresh: 事件函数 当下拉刷新时 执行的函数

onReachBottom: 事件函数 当上拉触底时 执行的函数

onShareAppMessage: 事件函数 当用户点击右上角的分享按钮时 执行的函数

页面配置文件 JSON文件

该文件是针对单个页面的配置 与app.json类似。

页面结构文件 WXML文件

该文件是当前页面的骨架文件 等效于纯HTML文件

样式文件 WXSS文件

该文件只负责当前页面的样式 等效于CSS文件

组件

所谓的组件，其实就是HTML中的标签。微信将原本的HTML标签封装了一次，然后叫做组件。

因为封装了，所以原来的属性，方法，JS包都将无法在这里使用。

渲染页面

微信小程序是双线程的。一个线程负责渲染样式，另一个线程负责执行JS脚本。

将数据渲染到页面使用的是插值语法：<text>{{title}}</text>

{{}}并没有真的开启一个JS执行环境，而仅仅是能够执行运算。所以说是一个伪环境。

数据驱动

页面上的内容，以及事件的触发，通常是通过数据进行驱动的。

属性

组件拥有属性，就好像HTML标签拥有属性一样。

HTML标签属性分类：

通用属性： id、class、style、hidden、data-*

非通用属性：a标签的href 资源标签的src 图像标签的width、height

通用属性和非通用属性都叫做HTML标准属性。

组件的属性分类：

通用属性：

id: 组件id

style: 组件样式

class: 组件类名

hidden: 是否隐藏组件

data-*: 自定义属性

bind-* catch-*: 绑定事件

非通用属性：例如各个资源标签的src等属性

事件

在微信小程序中，事件也分两类。一类是通用事件 一类是非通用事件

通用事件：

touchstart: 触摸开始事件

touchmove: 触摸移动事件

touchend: 触摸结束事件

touchcancel: 触摸取消事件

tap: 轻触

longTap: 长按

longPress: 长按

animationstart: 动画开始

animationend: 动画结束

animationinteration: 动画执行多次，每执行一次就触发一次

transitionend: 过渡结束事件

非通用事件：

表单的submit事件

组件介绍

view组件

该组件等价于DIV。

该组件有四个特有属性：

hover-class: 点击一下之后短暂出现的类。

hover-start-time: 点击一下之后 hover-class多久会出现

hover-stay-time: 点击一下之后 hover-class停留多久

hover-stop-propagation: 是否阻止冒泡 只对hover-class属性有效 阻止的是父组件的hover-class

demo:

<!--pages/view/view.wxml-->
<view hover-class='blue'>
呵呵
<view hover-class='red' hover-start-time='1000' hover-stay-time="2000" hover-stop-propagation='true'>你好</view>
</view>

点击子组件

点击父组件

text组件

该组件等价于SPAN。

该组件的特殊属性：

space: 处理空白符的

默认： 空白折叠

nbsp:     根据字体设置

emsp:     一个中文空格

ensp:      半个中文空格

decode: 处理转移字符

默认：不处理

true: 将转义字符进行处理

selectable: 是否可选文本

默认：不可选

true: 可选

space:

<text>aa  你好  你好</text>
<view></view>
<text space="ensp">aa  你好  你好</text>
<view></view>
<text space="nbsp">aa    你好  你好</text>
<view></view>
<text space="emsp" selectable>aa你好你好你好你好</text>

decode:

<view></view>
<text decode='true'>></text>
<view></view>
<text>></text>

rich-text

富文本组件：允许我们渲染HTML代码。

属性： nodes 表示节点的意思

属性值可选项有2个：

HTML字符串： <rich-text nodes="<div>nihao</div>"></rich-text>

数组：

如果是一个数组，则表示一组子节点

数组中的每一个成员表示一个节点对象

节点对象的属性有：

name: "div",

attrs: 节点的属性 是一个对象

    属性名是HTML的标准属性名

    属性值是对应的值

    class: "active",

    style: "linheight:100px"

children: 节点的子节点 是一个数组

    数组中是一个一个的节点对象

        type: "text",

        text: "今天天气不错"

nodes值是数组：

<rich-text nodes="{{nodes}}"></rich-text>

icon组件

组件名称：icon

作用：提供小图标

在HTML中，我们可以任意使用图片，通过css控制样式来当做图标。可是在微信小程序中，因为小程序的体积原因，不可以这么做。于是微信将一些常用的小图标做成了组件。

属性：

type: 表示图标类型 可选值success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size: 表示尺寸 纯数字即可

color: 表示颜色 英文颜色即可

demo:

<!--pages/icon/icon.wxml-->
<icon type='download' size="200" color="blue" ></icon>
<icon type='success'></icon>

canvas组件

画布组件。

属性： canvas-id 标记canvas的id

demo:

// 获取画笔
var ctx = wx.createContext("myCanvas");
// 调用方法
ctx.fillRect(0, 0, 50, 50);
wx.drawCanvas({
canvasId: "myCanvas",
actions: ctx.actions
})

map组件

地图组件：用于显示一块地图

属性：

longitude 经度

latitude 纬度

scale  缩放大小 或者叫做精度 5 ~ 18

demo:

<map longitude="90.8541870117" latitude="29.1527609491" scale="10"></map>

image组件

图片组件：

属性： src 图片地址

mode 决定如何裁剪图片

可选值有：

缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变

裁剪 top 不缩放图片，只显示图片的顶部区域

裁剪 bottom 不缩放图片，只显示图片的底部区域

裁剪 center 不缩放图片，只显示图片的中间区域

裁剪 left 不缩放图片，只显示图片的左边区域

裁剪 right 不缩放图片，只显示图片的右边区域

裁剪 top left 不缩放图片，只显示图片的左上边区域

裁剪 top right 不缩放图片，只显示图片的右上边区域

裁剪 bottom left 不缩放图片，只显示图片的左下边区域

裁剪 bottom right 不缩放图片，只显示图片的右下边区域

demo:

<image src="https://www.baidu.com/img/bd_logo1.png" mode="scaleToFill"></image>
<image src="https://www.baidu.com/img/bd_logo1.png" mode="aspectFill"></image>
<image src="https://www.baidu.com/img/bd_logo1.png" mode="aspectFit"></image>

媒体组件

摄像机组件： camera

属性： device-position: 可选值 front back

demo:

<camera device-position='front'></camera>

音频组件: audio

属性： src

视频组件: video

属性: src

直播组件: live-player

录播组件: live-pusher