小程序宿主环境

小程序宿主环境-宿主环境介绍

什么是宿主环境？

• 宿主环境指的是程序运行所必需的依赖环境。例如：
  Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能再IOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！
  

小程序的宿主环境

手机微信就是小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc...

小程序宿主环境包含哪些内容？(微信为小程序提供了哪些支持？)

• 通信模型
  小程序中的主体是渲染层和逻辑层(都是通过微信客户端进行转发的)，其中：
  1.WXML模板和WXSS样式工作在渲染层
  2.JS脚本工作在逻辑层
  总结：小程序中的通信模型分为两部分
  1.渲染层和逻辑层之间的通信（由微信客户端进行转发）
  2.逻辑层和第三方服务器之间的通信（由微信客户端进行转发）
  

• 运行机制
  分为两部分：

  • 小程序启动的过程
    1.把小程序的代码包下载到本地
    2.解析app.json全局配置文件（目的是将全局性配置加载）
    3.执行app.js小程序入口文件，第哦啊用App()创建小程序实例
    4.渲染小程序的首页
    5.小程序启动完成

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

• 组件
  小程序中的组件也是有宿主环境提供的，开发者可以基于组件快速搭建出偏凉的页面，官方把小程序组件分九大类：
  1.视图容器；2.基础内容；3.表单组件；4.导航组件；5.媒体组件；6.map地图组件；7.canvas画布组件；8.开放能力；9.无障碍访问

  • 常用视图容器类组件：
    1.view
    普通的视图区域
    类似于HTML中的div，是一个块级元素
    常用来实现页面的布局效果
    2.scroll-view
    可滚动的视图区域
    常用来实现滚动列表效果(页面动，这个列表可以滚动)
    3.swiper和swiper-item
    swiper轮播图容器组件、swiper-item7轮播图item组件(就是页面中某一个区域，图片自己或手划滚动的效果)

• API

组件的基本使用

view组件的基本使用(CSS中的div)
比如，需要在页面上实现如图的flex横向布局效果（wxml中写结构，wxss中写样式）

ui结构(wxml中)，外面一个大容器view，里面又包含了三个viewA、B、C，而后再书写样式，进而实现渲染效果(wxss中)

scroll-view组件的基本使用
实现纵向滚动效果。在一个容器中，通过鼠标的划动或者手指的划动，可以让内部的内容滚动展示

• 1.将最外层包裹性质的容器由view组件修改为scroll-view组件
• 2.添加属性scroll-y(意为：允许纵向滚动；同理，横向滚动是scroll-x)
• 3.为scroll-view添加固定高度
  

swiper和swiper-item组件的使用
通过这两个组件的配合实现轮播图的效果。结构是，在包裹性容器swiper中放入与图片相同数量的swiper-item容器；而后每个swiper-item中放入view组件

• 1.创建swiper和swiper-item组件，给外部swiper设置轮播图高度
• 2.内部view组件高度与父类一致，用100%填充即可
• 3.再为每个view组件单独设置背景颜色

swiper组建的常用属性

实现

常用的基础内容组件

text

• 文本组件
• 类似于HTML中的span标签，是一个行内元素

text组件的基本使用：
通过text组建的selectable属性(属性添加在标签当中)，实现长按选中文本内容的效果(只有text组件支持selectable属性，放到view中是无效果的)

rich-text

• 富文本组件
• 支持把HTML字符串渲染为WXML结构

rich-text组件的基本使用：
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构
应用场景：比如商品详情页，服务器返回的是一串HTML的标签，我们希望这样的标签能够渲染到我们的移动端

其它常用组件(组件版本，在app.json中可以设置；"style":"V2"是组件最新版本)

button

• 按钮组件
• 功能比HTML中的按钮丰富
• 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户权限、获取用户信息等等)

button组件的基本使用：

• 通过type属性指定按钮类型：1.默认；2.default字体主色调；3.primary主色调；4.warn警告
• size="mini"小尺寸按钮：就是将原有的尺寸变小
• plain镂空按钮
  

image

• 图片组件
• image组件默认宽度约300px、高度约240px

image组建的基本使用：

• 在不添加图片的情况下，图片组件也是有默认宽高的；当我们为它加上一个边框，就能看见组件所占据的区域
• image组件中的mode属性用来指定图片的裁剪与缩放模式，常用的mode属性值如下：
  1.scaleToFill：(默认值)缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素(宽度约300px、高度约240px)
  2.aspectFit：缩放模式，保持纵横比缩放图片，使图片能完全显示出来。也就是说，可以完整的将图片展示出来
  3.aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向会发生截取(一直按照比例放大，直到能把这个区域填满为止)
  4.widthFix：缩放模式，宽度不变，高度自动变化(这里的高度，指的是image标签的高度，不是图片高度)，保持原图宽高比不变
  5.height：缩放模式，高度不变，宽度自动变化(这里的宽度，指的是image标签的宽度，不是图片宽度)，保持原图宽高比不变
  

navigator

• 页面导航组件
• 类似于HTML中的a链接

小程序中的API

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的功能，例如：获取用户信息、本地存储、支付功能等等
API分为三大类：

• 1.事件监听API

  • 特点：以on开头，用来监听某些事件的触发
    举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

• 2.同步API

  • 特点1：以Sync结尾的API都是同步API
  • 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
    举例：wx.setStorageSync('Key','value')向本地存储中写入内容

• 3.异步API

  • 特点：类似于jOuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
    举例：wx.request()发起网络数据请求，通过success回调函数接收数据