微信小程序基础学习

一、宿主环境

1、宿主环境：宿主环境指的是程序运行时所必须的依赖环境。比如Android和iOS系统是两种不同的宿主环境。安卓版的微信APP是不能在iOS环境中运行的，因此微信小程序一直加载中?，Android是安卓版软件的宿主环境。

2、小程序宿主环境：手机微信是小程序的宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，比如：微信扫码、微信登录、地理位置、微信支付等等。

3、小程序宿主环境包含的内容：（1）通信模型；（2）运行机制；（3）组件；（4）API

二、通信模型

1、通信主体：小程序中的通信主体是渲染层和逻辑层。（1）WXML模板和WXSS样式工作在渲染层；（2）JS脚本工作在逻辑层。

2、小程序通信模型：（1）渲染层和逻辑层之间的通信，由微信客户端进行转发；（2）逻辑层和第三方服务器之间的通信，由微信客户端进行转发。

三、运行机制

1、小程序启动过程：（1）把小程序的代码包下载到本地；（2）解析app.json全局配置文件；（3）执行app.js小程序入口文件，调用App()创建小程序实例；（4）渲染小程序首页；（5）小程序启动完成。

2、小程序页面渲染过程：（1）加载解析页面的.json配置文件；（2）加载页面的.wxml模板和.wxss样式；（3）执行页面的.js文件，调用Page()创建页面实例；（4）页面渲染完成。

四、组件

1、常用组件：view、scroll-view、swiper、swiper-item、image、button、navigator等等。

view：普通视图区域，类似 于HTML中div，是一个块级元素。

sroll-view：可滚动的视图区域，常用来实现滚动列表效果。

swiper和swiper-item：轮廓图容器组件和轮廓图item组件。

button：按钮组件微信小程序一直加载中?，功能比HTML中的button按钮丰富，通过open-type属性可以调用微信提供的各种功能，比如客服、转发、获取用户授权、获取用户信息等等。

image：图片组件，image组件默认宽度300px，高度约240px。

navigator：页面导航组件，类似于HTML的a链接。

swiper组件代码

swiper组件效果样例

image组件代码

image效果图

button组件及效果图