微信小程序-P2-小程序的宿主环境学习笔记

1.什么是宿主环境

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

2.小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc…
小程序宿主环境包含的内容
① 通信模型
② 运行机制
③ 组件
④ API

2.1 通信模型

小程序中的通信模型分为两部分：

1. 渲染层和逻辑层之间的通信
   由微信客户端进行转发
2. 逻辑层和第三方服务器之间的通信
   由微信客户端进行转发
   

2.2 运行机制

2.2.1小程序启动的过程

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

2.2.2页面渲染的过程

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

2.3组件

2.3.1小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map 地图组件
7. canvas 画布组件
8. 开放能力
9. 无障碍访问

2.3.2常用的视图容器类组件

2.3.2.1. view

普通视图区域
类似于 HTML 中的 div，是一个块级元素
常用来实现页面的布局效果

<view></view>

2.3.2.2. scroll-view

可滚动的视图区域
常用来实现滚动列表效果

wxml代码

<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

wxss代码

/* pages/index/index.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color:lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightpink ;
}
.container1 view:nth-child(3){
    background-color: lightseagreen;
}
.container1{
    border: 1px solid red;
    width: 100px;
    height: 150px;
}

2.3.2.3swiper 和 swiper-item

轮播图容器组件 和 轮播图 item 组件

js文件代码

data: {
        //存放轮播图数据
        swiperList:[
          { id:1,
            image:"/images/2054947.jpg"
          },
          {id:2,
          image:"/images/2055071.jpg"
          },
          {id:3,
          image:'/images/2055154.jpg'
          }
        ],
    },

wxml文件代码

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
    <!--第一个轮播图 -->
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <!--第二个轮播图 -->
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <!--第三个轮播图 -->
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>        
</swiper>

wxss文件代码

.swiper-container{
    height: 150px;
}

.item{
    height: 100%;
    line-height: 150px;
    text-align: center;
}

swiper-item:nth-child(1) .item{
    background-color: red;
}

swiper-item:nth-child(2) .item{
    background-color:lightseagreen;
}
swiper-item:nth-child(3) .item{
    background-color:lightpink;
}

2.3.2常用的基础内容组件

2.3.2.1text

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

wxml文件代码

<!--text组件 -->
<view>
    <text selectable>4545454545</text>
</view>

2.3.2. rich-text

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

wxml文件代码

<!--rich-text组件  -->
<rich-text nodes="<h1 style='color :red'>标题</h1>"></rich-text>

2.3.3 其它常用组件

2.3.3.1button

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

wxml文件代码

<!-- button组件 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!--小尺寸按钮-->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!--镂空按钮-->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

2.3.3.2image

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

wxml文件代码

<!-- image组件 -->
<!--空图片 -->
<image></image>
<image src="/images/2054947.jpg" mode="aspectFit"></image>

2.3.3.3navigator

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

2.4API

小程序官方把 API 分为了如下 3 大类：

2.4.1事件监听 API

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

2.4.2同步 API

• 特点1：以 Sync 结尾的 API 都是同步 API
• 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
• 举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
• 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
• 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据