小程序学习day03-小程序的.js文件、小程序的宿主环境、常用的组件-视图类、常用基础内容组件、其他常用组件

11、小程序的.js文件

（1）作用：处理用户的操作，比如：响应用户的点击、获取用户位置

（2）分类：

        1）app.js

整个小程序项目的入口文件，通过调用APP函数启动整个小程序

        2）页面的.js文件

页面的入口文件，通过调用Pages函数创建并运行页面

        3）普通的.js文件

普通的功能模块文件，用来封装公共的函数或属性供页面使用

12、小程序的宿主环境

（1）概念

        1）宿主环境：

程序运行所必需的依赖环境，比如安卓系统和ios系统（脱离宿主环境的软件是没有意义的）

        2）小程序的宿主环境：手机微信

（手机微信可以提供微信扫码、微信知否、微信登录等功能）

（2）小程序的宿主环境的内容

        1）通信模型

                ①前介（小程序的互通是渲染层和逻辑层）：

                        渲染层：WXML模版和WXSS样式在这里工作

                        逻辑层：js脚本在这里工作

                ②分类：

                        逻辑层和渲染层的通信（由微信客户端进行转发）

                        逻辑层和第三方服务器之间的通信（由微信客户端进行转发）

        2）运行机制

                ①小程序的启动过程

        把小程序的代码包下载到本地——>解析app.json全局配置文件——>执行app.js小程序入口文件，调用APP函数，创建小程序实例——>渲染小程序首页——>启动完成

                ②小程序的页面渲染过程

        加载解析页面的.json配置文件——>加载页面的.wxml模版和.wxss样式——>执行页面的.js文件，调用Pages函数，创建页面示例——>渲染完成

        3）组件（由宿主环境提供）

分类：

        视图容器、基础内容、表单组件、导航组件、媒体组件、

        Map地图组件、canvas画布组件、开放能力、无障碍访问

        4）API

13、常用的组件-视图类

（1）view（普通视图区域，类似于HTML的div，是一个块级元素）

        1）作用：常用来实现工业免得布局效果

        2）语法：和HTML的div相似

        3）示例：

将三个盒子通过弹性布局放置在一行

①在页面的.wxml文件中准备类似于html的代码

        ②准备样式，类似于css的代码

        ③效果

（2）scroll-view（可滚动的视图区域）

1）作用：常用来实现滚动列表效果

2）语法：

①更换标签为scroll-view

②增加scroll-y（如果是竖着滑动）

③给盒子增加一个高度（如果是竖着滑动）

④效果（可以自由上下滑动，出现滚动条）

（3）swiper和swiper-item（轮播图容器组件及其item组件）

1）语法：

①在.wxml文件准备swiper以及其子项swiper-item

②在.wxss样式文件准备相应的样式

③效果：

2）属性

①indicator-dots（是否显示面板指示点）：Boolean布尔类型，默认值为false

②indicator-color（指示点颜色）：color，默认值为rgba(0,0,0.3)

③indicator-active-color（当前选中的指示点颜色）：color（默认值#000000）

④autoplay（是否自动切换）：布尔型，默认值为false

加了之后5秒后自动滑动

⑤interval（自动切换时间）：number，默认值为5000

⑥circular（是否采用衔接滑动）：布尔型，默认值false

如果是true，滑动到最后一张，继续滑动可以滑动到第一张

14、常用基础内容组件

（1）text（文本组件）

        1）作用：类似于HTML的span标签，是一个行内元素

        2）语法：

添加selectable后可以实现长按复制的效果（仅能在手机上实现）

（2）rich-text（富文本组件）

        1）作用：支持把HTML字符串渲染为WXML结构

        2）语法示例：

15、其他常用组件

（1）button（按钮组件）

        1）作用：类似于HTML中的button按钮，通过open-type属性可以调用微信提供的各种功能（客服、转发等）

        2）属性：

                ①type（控制按钮的颜色类型）

                ②size（小尺寸按钮）

                ③plain（镂空按钮）

（2）image（图片组件）（具有默认的宽高，宽约300px，高约240px）

在仅加边框的情况下，可看出image具有默认的宽高（宽322px，高242px）

        1）语法：

        2）mode属性（用来指定图片的裁剪和缩放模式）：

        ①scaleToFill（默认缩放模式）：不保持纵横比例缩放图片，是图片的宽高完全拉伸至填满image元素

        ②aspectFit：保持纵横比，使图片的长边能完全显示出来。（可以完整显示图片）

        ③aspectFill：保持纵横比，是图片的短边能完全显示处理。（图片不完整显示）

        ④widthFix：宽度不变，高度自动变化，保持原图宽高比不变

        ⑤heightFix：高度不变，宽度自动变化，保持原图宽高比不变